[CRON] sync translated content

10 files changed, 898 insertions, 0 deletions

diff --git a/files/fr/orphaned/web/api/svgstylable/index.html b/files/fr/orphaned/web/api/svgstylable/index.html
new file mode 100644
index 0000000000..f0f30a82ce
--- /dev/null
+++ b/files/fr/orphaned/web/api/svgstylable/index.html
@@ -0,0 +1,98 @@
+---
+title: SVGStylable
+slug: orphaned/Web/API/SVGStylable
+tags:
+  - API
+  - Reference
+  - SVG
+  - SVG DOM
+translation_of: Web/API/SVGStylable
+original_slug: 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/orphaned/web/css/@media/prefers-reduced-transparency/index.html b/files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html
new file mode 100644
index 0000000000..cba1deb11d
--- /dev/null
+++ b/files/fr/orphaned/web/css/@media/prefers-reduced-transparency/index.html
@@ -0,0 +1,85 @@
+---
+title: prefers-reduced-transparency
+slug: orphaned/Web/CSS/@media/prefers-reduced-transparency
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-reduced-transparency
+original_slug: Web/CSS/@media/prefers-reduced-transparency
+---
+<p>{{CSSRef}}{{SeeCompatTable}}{{draft}}</p>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-reduced-transparency</code></strong> permet de détecter si un utilisateur préfère (via un paramètre du système d'exploitation ou du navigateur) minimiser l'utilisation des effets de transparence.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à <code>false</code> lorsqu'il est utilisé dans un contexte booléen.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.</dd>
+</dl>
+
+<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+
+<p>À l'heure actuelle, aucun navigateur ou agent utilisateur n'implémente cette préférence malgré la présence de réglages correspondants dans les systèmes d'exploitation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;div class="transparency"&gt;Boîte transparente&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre>.transparency {
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .transparency {
+    opacity: 1;
+  }
+}
+</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('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</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("css.at-rules.media.prefers-reduced-transparency")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=175497">Le bug WebKit 175497</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
diff --git a/files/fr/orphaned/web/css/@media/scan/index.html b/files/fr/orphaned/web/css/@media/scan/index.html
new file mode 100644
index 0000000000..4d9d38cde6
--- /dev/null
+++ b/files/fr/orphaned/web/css/@media/scan/index.html
@@ -0,0 +1,86 @@
+---
+title: scan
+slug: orphaned/Web/CSS/@media/scan
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/scan
+original_slug: Web/CSS/@media/scan
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scan</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer le processus utilisé pour composer l'image sur l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>scan</code> est définie avec un mot-clé parmi ceux qui suivent :</p>
+
+<dl>
+ <dt><code>interlace</code></dt>
+ <dd>L'image est composée avec <a href="https://fr.wikipedia.org/wiki/Entrelacement_(vid%C3%A9o)">un entrelacement</a> grâce à des lignes intercalées (en deux passes).</dd>
+ <dt><code>progressive</code></dt>
+ <dd>L'image est composée ligne par ligne avec <a href="https://fr.wikipedia.org/wiki/Balayage_progressif">un balayage progressif</a>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Si votre écran utilise une composition avec entrelacement, ce texte devrait
+   être écrit avec une police sans serif/empattement. S'il utilise une composition
+   avec un balayage progressif, vous devriez voir une police avec serif/empattement.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}</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('CSS4 Media Queries', '#scan', 'scan')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</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("css.at-rules.media.scan")}}</p>
diff --git a/files/fr/orphaned/web/css/@page/bleed/index.html b/files/fr/orphaned/web/css/@page/bleed/index.html
new file mode 100644
index 0000000000..3465aa1178
--- /dev/null
+++ b/files/fr/orphaned/web/css/@page/bleed/index.html
@@ -0,0 +1,80 @@
+---
+title: bleed
+slug: orphaned/Web/CSS/@page/bleed
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/bleed
+original_slug: Web/CSS/@page/bleed
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>bleed</code></strong>, associé à la règle @ {{cssxref("@page")}}, définit l'espace duquel le contenu peut dépasser de la boîte de la page. Ce descripteur aura un effet uniquement si le descripteur {{cssxref("@page/marks","marks")}} est utilisé pour afficher les marques de coupure.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+bleed: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+bleed: 8pt;
+bleed: 1cm;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur correspond à <code>6pt</code> si {{cssxref("marks")}} vaut <code>crop</code>. Dans les autres cas, cette valeur vaut zéro.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Cette valeur indique la distance, dans chaque direction, de laquelle le contenu peut dépasser de la boîte de la page. Les valeurs négatives sont autorisées mais les différentes implémentations fixent différentes limites.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+{{csssyntax}}
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  bleed: 1cm;
+  marks: crop;
+}
+</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 Paged Media", "#bleed", "bleed")}}</td>
+   <td>{{Spec2("CSS3 Paged Media")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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("css.at-rules.page.bleed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/fr/orphaned/web/css/@page/marks/index.html b/files/fr/orphaned/web/css/@page/marks/index.html
new file mode 100644
index 0000000000..bb0558bd4e
--- /dev/null
+++ b/files/fr/orphaned/web/css/@page/marks/index.html
@@ -0,0 +1,83 @@
+---
+title: marks
+slug: orphaned/Web/CSS/@page/marks
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/marks
+original_slug: Web/CSS/@page/marks
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>marks</code></strong>, associé à la règle @ {{cssxref("@page")}}, est utilisé pour afficher des marques de coupure (<em>crop marks</em>) ou des croix d'alignement (<em>cross marks</em>). Les marques de coupure sont utilisées pour massicoter les pages et les croix d'alignement sont utilisées afin d'aligner plusieurs feuilles entre elles.</p>
+
+<p>Les marques de coupure et d'alignement sont imprimées en dehors de la boîte de la page. Pour qu'il y ait l'espace nécessaire au dessin de ces symboles, les pages finales doivent être légèrement plus grandes que la boîtes de la page.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>crop</code></dt>
+ <dd>Les marques de découpe seront affichées sur la page finale.</dd>
+ <dt><code>cross</code></dt>
+ <dd>Les marques d'alignement seront affichées sur la page finale.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune marque ne sera affichée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+{{csssyntax}}
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  marks: crop cross;
+}
+</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 Paged Media', '#marks', 'marks')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cette propriété CSS avait initialement été proposée pour la spécification CSS de niveau 2 mais a été abandonnée lors de la première révision.</p>
+
+<p>{{cssinfo}}</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("css.at-rules.page.marks")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/fr/orphaned/web/html/element/isindex/index.html b/files/fr/orphaned/web/html/element/isindex/index.html
new file mode 100644
index 0000000000..90e3a1539f
--- /dev/null
+++ b/files/fr/orphaned/web/html/element/isindex/index.html
@@ -0,0 +1,71 @@
+---
+title: <isindex>
+slug: orphaned/Web/HTML/Element/isindex
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/isindex
+original_slug: Web/HTML/Element/isindex
+---
+<div>{{Obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;isindex&gt;</code></strong> est un élément obsolète qui permet de placer un champ sur une page afin d'effectuer des recherches dans le document. <code>&lt;isindex&gt;</code> devait permettre de saisir une ligne de texte pour une requête, à la suite de cette saisie, le serveur renvoyait une liste de pages qui correspondait à la requête. La prise en charge de cet élément dépendait du navigateur et du serveur.</p>
+
+<p><code>&lt;isindex&gt;</code> est un élément déprécié depuis HTML 4.01 car on peut obtenir le même comportement grâce à un formulaire HTML (cf. {{HTMLElement("form")}}). Tous les navigateurs ont désormais retiré <code>&lt;isindex&gt;</code> comme élément (<a href="https://html.spec.whatwg.org/#non-conforming-features">ce dernier est classé comme une fonctionnalité non-conforme dans le standard WHATWG</a>).</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("prompt")}}</dt>
+ <dd>La valeur de cet attribut sera le texte affiché dans le champ de saisie avant que l'utilisateur y saisisse un texte.</dd>
+ <dt>{{htmlattrdef("action")}}</dt>
+ <dd>Cet atttribut peut être utilisé afin d'envoyer la requête vers une URL différente. Cet attribut n'est pas défini par le W3C.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;isindex prompt="Rechercher…" /&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Historique">Historique</h2>
+
+<p>En juin 1992, Dan Connolly indiquant <a class="external text" href="https://web.archive.org/web/20160306083612/http://1997.webhistory.org/www.lists/www-talk.1992/0080.html" rel="nofollow">sa préférence</a> pour un autre type d'ancre par rapport à <code>isindex</code>.</p>
+
+<p>En novembre 1992, <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/thread.html#31" rel="nofollow">les index sont plus considérés comme des liens que comme des documents</a>. Pour cette raison, différentes solutions sont proposées et l'ergonomie des formulaires est <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0039.html" rel="nofollow">mentionnée</a> en référence au navigateur Dynatext : « le navigateur affiche des boutons, les champs textuels, l'utilisateur remplit les champs puis clique sur OK et les résultats de la requête sont récupérés sous la forme d'un tableau de contenu ».</p>
+
+<p>Lors <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/thread.html#42" rel="nofollow">d'une discussion en novembre 1992</a>, Kevin Hoadley <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0042.html" rel="nofollow">remet en cause</a> le besoin d'un élément <code>isindex</code> et propose de l'abandonné. Il propose d'utiliser un élément {{HTMLElement("input")}} (une idée également poussée par Steve Putz). Tim Berners-Lee <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0044.html" rel="nofollow">explique </a>alors que le but de <code>isindex</code> est de pouvoir agréger les résultats d'une recherche. Kevin <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0048.html" rel="nofollow">répond</a> alors qu'il n'apprécie pas le côté booléen de <code>isindex</code> et qu'il serait préférable d'avoir un système où tout puisse être recherché, il propose d'étendre le cadre du WWW avec une configuration httpd spécifique et de définir une correspondance entre les URI et les requêtes de recherche.</p>
+
+<p>En 2016, <a href="https://github.com/w3c/html/issues/240">le retrait de <code>isindex</code> de la spécification</a> est proposé.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external text" href="https://www.w3.org/TR/html5" rel="nofollow">La spécification HTML5</a> indique que cet élément est <a class="external text" href="https://www.w3.org/TR/html5/obsolete.html#obsolete" rel="nofollow">non-conforme</a>.</li>
+ <li><code><a class="external text" href="https://www.w3.org/TR/html401/interact/forms.html#h-17.8" rel="nofollow">isindex</a></code> est un élément déprécié dans la spécification <a class="external text" href="https://www.w3.org/TR/html401/" rel="nofollow">HTML 4.01</a></li>
+ <li><code><a class="external text" href="https://www.w3.org/TR/REC-html32#isindex" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/TR/REC-html32" rel="nofollow">HTML 3.2</a></li>
+ <li><code><a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.2.3" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_5.html" rel="nofollow">HTML 2.0</a> ainsi que la description du comportement <a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_7.html#SEC7.5" rel="nofollow">des requêtes et index</a> (HTML 2.0)</li>
+ <li><code><a class="external text" href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_51.html" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_1.html" rel="nofollow">HTML+</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité 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("html.elements.isindex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("form")}}</li>
+</ul>
diff --git a/files/fr/orphaned/web/html/element/listing/index.html b/files/fr/orphaned/web/html/element/listing/index.html
new file mode 100644
index 0000000000..ccccd2af09
--- /dev/null
+++ b/files/fr/orphaned/web/html/element/listing/index.html
@@ -0,0 +1,49 @@
+---
+title: <listing>
+slug: orphaned/Web/HTML/Element/listing
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/listing
+original_slug: Web/HTML/Element/listing
+---
+<div>{{Obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;listing&gt;</code></strong> affiche le texte compris entre les balises d'ouverture et de fermeture sans interpréter le HTML contenu, et en utilisant une police à chasse fixe. Le standard HTML 2 recommande de ne pas casser les lignes si elles ne sont pas plus grandes que 132 caractères.</p>
+
+<div class="note"><strong>Note : N'utilisez pas cet élément</strong>
+
+<ul>
+ <li>Il est déprécié depuis HTML 3.2 et n'a jamais été implémenté d'une manière cohérente par tous les navigateurs. De plus, il est obsolète dans HTML5 et peut être rendu par les agents-utilisateurs conformes comme l'élément {{HTMLElement("pre")}}, qui interprète l'HTML contenu !</li>
+ <li>Utilisez plutôt l'élément {{HTMLElement("pre")}} ou si sémantiquement approprié, l'élément {{HTMLElement("code")}} en échappant '<code>&lt;</code>' et '<code>&gt;</code>' pour qu'ils ne soient pas interprétés.</li>
+ <li>Une police à espacement fixe peut aussi être obtenue en utilisant un simple élément {{HTMLElement("div")}}, et en appliquant une règle <a href="/fr/docs/CSS">CSS</a> utilisant la valeur de police générique <code>monospace</code> dans la propriété {{cssxref("font-family")}}</li>
+</ul>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément a aucun attribut spécifique en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}<code>.</code></p>
+
+<div class="note">
+<p><strong>Note d'implémentation : </strong>jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité 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("html.elements.listing")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Utilisez plutôt les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}}.</li>
+ <li>Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("xmp")}} sont similaires à {{HTMLElement("listing")}} mais sont également obsolètes.</li>
+</ul>
diff --git a/files/fr/orphaned/web/html/element/multicol/index.html b/files/fr/orphaned/web/html/element/multicol/index.html
new file mode 100644
index 0000000000..49034047bc
--- /dev/null
+++ b/files/fr/orphaned/web/html/element/multicol/index.html
@@ -0,0 +1,38 @@
+---
+title: <multicol>
+slug: orphaned/Web/HTML/Element/multicol
+tags:
+  - Experimental
+  - HTML
+  - Non-standard
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/multicol
+original_slug: Web/HTML/Element/multicol
+---
+<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;multicol&gt;</code></strong> était un élement expérimental conçu afin de réaliser des agencements sur plusieurs colonnes.<br>
+ Il n'a jamais eu une traction significative et n'est pas implémenté dans la plupart des navigateurs.</p>
+
+<div class="warning">
+<p><strong>N'utilisez pas cet élément ! </strong>Pour implémenter un agencement sur plusieurs colonnes, vous devez utilisez les élements HTML classiques comme {{HTMLElement("div")}} et les fonctionnalités CSS <a href="/fr/docs/Web/CSS/Colonnes_CSS/Utiliser_une_disposition_multi-colonnes">permettant d'organiser plusieurs colonnes</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité 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("html.elements.multicol")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS">Les colonnes CSS</a> qui doivent être utilisées lorsqu'on souhaite obtenir une disposition avec plusieurs colonnes</li>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS/Utiliser_une_disposition_multi-colonnes">Le guide : Créer des dispositions avec plusieurs colonnes en CSS</a></li>
+</ul>
diff --git a/files/fr/orphaned/web/html/element/nextid/index.html b/files/fr/orphaned/web/html/element/nextid/index.html
new file mode 100644
index 0000000000..4f576ca0d1
--- /dev/null
+++ b/files/fr/orphaned/web/html/element/nextid/index.html
@@ -0,0 +1,60 @@
+---
+title: '<nextid> : l''élément NeXT ID (Obsolète)'
+slug: orphaned/Web/HTML/Element/nextid
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/nextid
+original_slug: Web/HTML/Element/nextid
+---
+<div>{{HTMLRef}}{{Deprecated_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;nextid&gt;</code></strong> est un élément obsolète qui était utilisé par l'outil de conception web NeXT afin de générer automatiquement des attributs {{htmlattrxref("name","a")}}. Cet élément fut l'un des premiers à disparaître du DTD public des versions HTML et est également l'un des premiers éléments HTML les moins compris.</p>
+
+<dl>
+ <dt>HTML "0.a" - valable jusqu'au 10 janvier 1991</dt>
+ <dd>Aucun exemple disponible.</dd>
+ <dt>HTML "0.c" - à partir du 23 janvier 1991 et jusqu'au 23 novembre 1992</dt>
+ <dd>Cette version d'HTML ajoute <code>&lt;NEXTID&gt;</code> en tant que formulaire, non conforme à SGML, simplement utilisé comme valeur numérique.</dd>
+ <dt>HTML "0.d" - à partir du 26 novembre 1992 jusqu'au 4 mai 1993</dt>
+ <dd>Pendant cette période, NeXT et les anciens DTD indiquent que <code>&lt;NEXTID&gt;</code> ne peut prendre qu'un nombre comme valeur pour son attribut <code>N</code>.</dd>
+ <dt>HTML "1.k" - Version 1 (première version officielle)</dt>
+ <dd>Dans le premier brouillon officiel de HTML, <code>&lt;NEXTID&gt;</code> permet d'utiliser un nom dans son attribut plutôt qu'un seul nombre.</dd>
+ <dt>HTML "1.m" - Version 1 (deuxième version)</dt>
+ <dd>Dans le brouillon HTML qui suit, <code>&lt;NEXTID&gt;</code> peut être retiré de l'affichage grâce à une commande SGML.</dd>
+ <dt>HTML Version 2, niveau 1</dt>
+ <dd>L'élément ne peut être inclus dans les éléments {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("option")}}.</dd>
+ <dt>HTML Version 2, niveau 1 strict</dt>
+ <dd>Ajoute des exclusions supplémentaires pour les éléments dépréciés.</dd>
+ <dt>HTML Version 2, niveau 2</dt>
+ <dd>La version par défaut, qui permet d'utiliser et d'inclure l'ensemble des éléments et attributs d'HTML 2.</dd>
+ <dt>HTML Version 2, niveau 2 strict</dt>
+ <dd>Cette version exclut les éléments dépréciés et interdit d'utiliser certaines constructions (comme l'inclusion d'un titre (<code>&lt;h1-h6&gt;</code>) dans un lien ({{HTMLElement("a")}} ou des champs de saisie {{HTMLElement("input")}} qui ne soient pas des éléments de bloc).</dd>
+ <dt>HTML Version 3.2</dt>
+ <dd><code>&lt;NEXTID&gt;</code> disparaît du DTD.</dd>
+</dl>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>À l'instar de l'ensemble des éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels/">les attribus universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("n")}}</dt>
+ <dd>Une référence à une ancre.</dd>
+</dl>
+
+<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("html.elements.nextid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("isindex")}}</li>
+</ul>
diff --git a/files/fr/orphaned/web/html/preloading_content/index.html b/files/fr/orphaned/web/html/preloading_content/index.html
new file mode 100644
index 0000000000..f5a7840335
--- /dev/null
+++ b/files/fr/orphaned/web/html/preloading_content/index.html
@@ -0,0 +1,248 @@
+---
+title: Précharger du contenu avec rel="preload"
+slug: orphaned/Web/HTML/Preloading_content
+tags:
+  - Guide
+  - HTML
+  - JavaScript
+  - Link
+  - Media
+  - Performance
+  - Web Performance
+  - as
+  - preload
+  - rel
+translation_of: Web/HTML/Preloading_content
+original_slug: Web/HTML/Preloading_content
+---
+<p class="summary">La valeur <code>preload</code> de l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>rel</code></a> pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> permet d'écrire des requêtes déclaratives de récupération au sein de l'élément <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a>. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances.</p>
+
+<p class="summary">Cet article est un guide sur le fonctionnement de <code>&lt;link rel="preload"&gt;</code>.</p>
+
+<h2 id="Les_bases">Les bases</h2>
+
+<p>On utilise généralement l'élément <code>&lt;link&gt;</code> de façon assez simple afin de charger une feuille de style CSS pour la page :</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" href="styles/main.css"&gt;</pre>
+
+<p>Dans le cas qui va nous intéresser, on utilisera l'attribut <code>rel</code> avec la valeur <code>preload</code>. Cela va permettre d'utiliser l'élément <code>&lt;link&gt;</code> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer :</p>
+
+<ul>
+  <li>le chemin de la ressource à précharger via l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-href"><code>href</code></a></li>
+  <li>et le type de la ressource via l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-as"><code>as</code></a>.</li>
+</ul>
+
+<p>Voici un exemple d'application simple (vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">le code source de cet exemple JS et CSS</a> et visualiser <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">la démo <i>live</i></a>) :</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Exemple de préchargement pour JS et CSS&lt;/title&gt;
+
+  &lt;link rel="preload" href="style.css" as="style"&gt;
+  &lt;link rel="preload" href="main.js" as="script"&gt;
+
+  &lt;link rel="stylesheet" href="style.css"&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;h1&gt;Balles rebondissantes&lt;/h1&gt;
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+  &lt;script src="main.js"&gt;&lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>Ici, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils seront nécessaires au rendu de la page par la suite. Cet exemple est trivial, car le navigateur découvre probablement les éléments <code>&lt;link rel="stylesheet"&gt;</code> et <code>&lt;script&gt;</code> dans le même morceau de HTML que les préchargements, mais les avantages sont d'autant plus évidents que les ressources sont découvertes tardivement et qu'elles sont importantes. Par exemple :</p>
+
+<ul>
+	<li>Les ressources qui sont pointées à partir du CSS, comme les polices ou les images.</li>
+	<li>Les ressources que JavaScript peut demander, comme JSON, les scripts importés ou les <i>web workers</i>.</li>
+	<li>Images et fichiers vidéo plus volumineux.</li>
+</ul>
+
+<p><code>preload</code> présente également d'autres avantages. L'utilisation de <code>as</code> pour spécifier le type de contenu à précharger permet au navigateur de :</p>
+
+<ul>
+	<li>Donner la priorité au chargement des ressources de façon plus précise.</li>
+	<li>Stocker dans le cache pour les demandes futures, en réutilisant la ressource si nécessaire.</li>
+	<li>Appliquer la bonne <a href="/fr/docs/Web/HTTP/CSP">politique de sécurité du contenu</a> à la ressource.</li>
+	<li>Définissez les bons en-têtes de requête <a href="/fr/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> pour celle-ci.</li>
+</ul>
+
+<h3 id="What_types_of_content_can_be_preloaded'on_peut_précharger">Quels sont les types de contenu qu'on peut précharger ?</h3>
+
+<p>Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut <code>as</code> :</p>
+
+<ul>
+  <li><code>audio</code> : un fichier audio.</li>
+  <li><code>document</code> : un document HTML destiné à être intégré dans un élément <a href="/fr/docs/Web/HTML/Element/frame"><code>&lt;frame&gt;</code></a> ou dans un élément <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>.</li>
+  <li><code>embed</code> : une ressource destinée à être intégrée dans un élément <a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a>.</li>
+  <li><code>fetch</code> : une ressource à laquelle on accèdera via une requête <code>fetch</code> ou via une requête XHR (par exemple un <code>ArrayBuffer</code> ou un fichier JSON).</li>
+  <li><code>font</code> : un fichier de police de caractère.</li>
+  <li><code>image</code> : un fichier contenant une image .</li>
+  <li><code>object</code> : une ressource à intégrer dans un élément <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>.</li>
+  <li><code>script</code> : un fichier JavaScript.</li>
+  <li><code>style</code> : une feuille de style CSS.</li>
+  <li><code>track</code> : un fichier WebVTT.</li>
+  <li><code>worker</code> : un <i>web worker</i> ou un <i>worker</i> partagé JavaScript.</li>
+  <li><code>video</code> : un fichier vidéo, généralement utilisé dans un élément <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>.</li>
+</ul>
+
+<div class="notecard note">
+  <p><strong>Note :</strong> Le préchargement de <code>vidéo</code> est inclus dans la spécification Preload, mais n'est pas actuellement mis en œuvre par les navigateurs.</p>
+</div>
+
+<div class="notecard note">
+  <p><strong>Note :</strong> Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment <a href="https://w3c.github.io/preload/#link-element-extensions">les extensions à l'élément <code>&lt;link&gt;</code></a>. On notera également que la liste complète des valeurs acceptables pour l'attribut <code>as</code> est définie dans la spécification Fetch (cf. <a href="https://fetch.spec.whatwg.org/#concept-request-destination">les destinations de requête</a>).</p>
+</div>
+
+<h2 id="Including_a_MIME_type">Ajouter un type MIME</h2>
+
+<p>Les éléments <code>&lt;link&gt;</code> permettent d'utiliser un attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> qui contient <a href="https://fr.wikipedia.org/wiki/Type_MIME">le type MIME</a> de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut <code>type</code> afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.</p>
+
+<p>Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">voir le code source complet</a> et <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">la version live</a>) :</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Exemple de préchargement d'une vidéo&lt;/title&gt;
+
+  &lt;link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;video controls&gt;
+    &lt;source src="sintel-short.mp4" type="video/mp4"&gt;
+    &lt;source src="sintel-short.webm" type="video/webm"&gt;
+    &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5.
+       Voici &lt;a href="sintel-short.mp4"&gt;un lien pour télécharger la vidéo&lt;/a&gt;.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/body&gt;</pre>
+
+<p>Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.</p>
+
+<h2 id="CORS-enabled_fetches">Récupérer des ressources de différentes origines</h2>
+
+<p>Lors du préchargement de ressources qui sont récupérées avec <a href="/fr/docs/Web/HTTP/CORS">CORS</a> activé (par exemple. <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch"><code>fetch()</code></a>, <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> ou <a href="/fr/docs/Web/CSS/@font-face">fonts</a>), une attention particulière doit être apportée au paramétrage de l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-crossorigin"><code>crossorigin</code></a> sur votre <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>. L'attribut doit être défini pour correspondre au mode CORS et aux informations d'identification de la ressource, même lorsque la récupération n'est pas d'origine croisée.</p>
+
+<p>Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">les spécifications pour la récupération des polices</a> si vous êtes intéressé par les détails).</p>
+
+<p>Utilisons ce cas de figure comme exemple. Vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">le code source complet de l'exemple sur GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">et voir le résultat <em>live</em> ici</a>) :</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Web font example&lt;/title&gt;
+
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
+
+  &lt;link href="style.css" rel="stylesheet"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  …
+&lt;/body&gt;</pre>
+
+<p>Non seulement nous fournissons les indications relatives au type MIME dans les attributs <code>type</code>, mais nous fournissons également l'attribut <code>crossorigin</code> pour nous assurer que le mode CORS du préchargement correspond à l'éventuelle demande de ressource de police.</p>
+
+<h2 id="Including_media">Gérer les différents médias</h2>
+
+<p>Une qualité des éléments <code>&lt;link&gt;</code> est qu'ils gèrent l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-media"><code>media</code></a>. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource <a href="/fr/docs/Web/CSS/@media">selon le type de média</a> voire <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">selon des requêtes de média (<em>media queries</em>)</a>. En bref, il est possible de faire du chargement de ressources qui soit <em>responsive</em> !</p>
+
+<p>Prenons un exemple simple (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">le code source est disponible sur GitHub</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">avec une démonstration <em>live</em></a>) :</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Exemple de préchargement responsive&lt;/title&gt;
+
+  &lt;link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"&gt;
+  &lt;link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"&gt;
+
+  &lt;link rel="stylesheet" href="main.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;header&gt;
+    &lt;h1&gt;Mon site&lt;/h1&gt;
+  &lt;/header&gt;
+
+  &lt;script&gt;
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  &lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>Vous pouvez ici voir qu'on a ajouté les attributs <code>media</code> sur les éléments <code>&lt;link&gt;</code> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc <a href="/fr/docs/Web/API/Window/matchMedia"><code>Window.matchMedia</code></a> / <a href="/fr/docs/Web/API/MediaQueryList"><code>MediaQueryList</code></a> (lire <a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester les requêtes média</a> pour plus d'informations sur ce point).</p>
+
+<p>Il est ainsi beaucoup plus probable que la police soit disponible pour le rendu de la page, ce qui réduit les FOUT (flash de texte non stylisé).</p>
+
+<p>Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.</p>
+
+<h2 id="Scripting_and_preloads">Utiliser des scripts et des préchargements différés</h2>
+
+<p>Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de <a href="/fr/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a> qu'on attache au DOM :</p>
+
+<pre class="brush: js">var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+</pre>
+
+<p>Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.</p>
+
+<p>Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :</p>
+
+<pre class="brush: js">var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);</pre>
+
+<p>Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.</p>
+
+<h2 id="Other_resource_preloading_mechanisms">Les autres mécanismes de préchargement</h2>
+
+<p>Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <code>&lt;link rel="preload"&gt;</code> :</p>
+
+<ul>
+  <li><code>&lt;link rel="prefetch"&gt;</code> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la <strong>prochaine</strong> page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources <code>prefetch</code> que pour celles utilisant <code>preload</code> (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire <a href="/fr/docs/Web/HTTP/Link_prefetching_FAQ">la FAQ sur le préchargement des liens</a>.</li>
+  <li><code>&lt;link rel="prerender"&gt;</code> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère <code>prerender</code> comme <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">un préchargement NoState</a>.</li>
+  <li><code>&lt;link rel="subresource"&gt;</code> {{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut <code>as</code> n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.</li>
+  <li>De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.</li>
+</ul>
+
+<h2 id="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td>
+      <td>{{Spec2('Preload')}}</td>
+      <td>Détails complémentaires sur <code>preload</code>.</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td>
+      <td>{{Spec2('HTML WHATWG')}}</td>
+      <td>Définition simple de <code>preload</code>.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("html.elements.link.rel.preload")}}</p>
+
+<h2 id="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Le préchargement : à quoi ça sert ? (en anglais)</a> par Yoav Weiss</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</div>