Remove redondant pages due to sync moves from mdn/content and prepare landing page for web (#3112)

1 files changed, 0 insertions, 397 deletions

diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html
deleted file mode 100644
index 7c38602401..0000000000
--- a/files/fr/web/css/media_queries/using_media_queries/index.html
+++ /dev/null
@@ -1,397 +0,0 @@
----
-title: Médias
-slug: Web/CSS/Media_Queries/Using_media_queries
-tags:
-  - CSS
-  - CSS:Premiers_pas
-translation_of: Web/Progressive_web_apps/Responsive/Media_types
-original_slug: Web/Progressive_web_apps/Responsive/Media_types
----
-<p> </p>
-<p>La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.</p>
-<p>Cette page revient sur le but et la structure des feuilles de style CSS.</p>
-<h3 id="Information_:_les_m.C3.A9dias" name="Information_:_les_m.C3.A9dias">Information : les médias</h3>
-<p>Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.</p>
-<p>Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.</p>
-<p>Pour spécifier des règles spécifiques à un type de média, utilisez <code>@media</code> suivi du type de média, suivi de crochets courbes entourant les règles.</p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
-  <caption>
-    Exemple</caption>
-  <tbody>
-    <tr>
-      <td>Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site.
-        <p>Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id <code>nav-area</code>.</p>
-        <p>Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :</p>
-        <div style="width: 30em;">
-          <pre class="eval">
-@media print {
-  #nav-area {display: none;}
-  }
-</pre>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p>Voici certains des types de média courants :</p>
-<table style="margin-left: 2em;">
-  <tbody>
-    <tr>
-      <td><code>screen</code></td>
-      <td>Écran d'ordinateur en couleurs</td>
-    </tr>
-    <tr>
-      <td><code>print</code></td>
-      <td>Média paginé</td>
-    </tr>
-    <tr>
-      <td style="padding-right: 1em;"><code>projection</code></td>
-      <td>Projection sur un écran</td>
-    </tr>
-    <tr>
-      <td><code>all</code></td>
-      <td>Tous les médias (la valeur par défaut)</td>
-    </tr>
-  </tbody>
-</table>
-<p> </p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;">
-  <caption>
-    Plus de détails</caption>
-  <tbody>
-    <tr>
-      <td>Il existe d'autres manières de spécifier le type de média d'une série de règles.
-        <p>Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut <code>media</code> de la balise <code>LINK</code>.</p>
-        <p>En CSS, vous pouvez utiliser <code>@import</code> au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.</p>
-        <p>En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.</p>
-        <p>Pour tous les détails sur les types de média, consultez <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> dans la spécification CSS.</p>
-        <p>Plus d'exemples utilisant la propriété <code>display</code> sont présentés sur une prochaine page de ce tutoriel : <a href="/fr/CSS/Premiers_pas/Données_XML" title="fr/CSS/Premiers_pas/Données_XML">Données XML</a>.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p> </p>
-<h4 id="Impression" name="Impression">Impression</h4>
-<p>CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.</p>
-<p>Une règle <code>@page</code> permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, <code>@page:left</code>, et les pages de droite, <code>@page:right</code>.</p>
-<p>Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (<code>cm</code>) et millimètres (<code>mm</code>), les pouces (<code>in</code>) ou les points (1 <code>pt</code> = 1/72 pouces). Il est également toujours approprié d'utiliser <code>em</code> pour s'accorder à la taille de police, et les pourcentages (<code>%</code>).</p>
-<p>Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés <code>page-break-before</code> (saut de page avant), <code>page-break-after</code> (saut de page après) et <code>page-break-inside</code> (saut de page à l'intérieur).</p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
-  <caption>
-    Exemples</caption>
-  <tbody>
-    <tr>
-      <td>Cette règle définit les marges de la page à deux centimètres de chaque côté :
-        <div style="width: 30em;">
-          <pre class="eval">
-@page {margin: 2cm;}
-</pre>
-        </div>
-        <p>Cette règle s'assure que chaque élément <small>H1</small> commencera une nouvelle page :</p>
-        <div style="width: 30em;">
-          <pre class="eval">
-h1 {page-break-before: always;}
-</pre>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p> </p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;">
-  <caption>
-    Plus de détails</caption>
-  <tbody>
-    <tr>
-      <td>Pour tous les détails sur la gestion des médias paginés par CSS, consultez <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> dans la spécification CSS.
-        <p>Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p> </p>
-<h4 id="Interfaces_utilisateur" name="Interfaces_utilisateur">Interfaces utilisateur</h4>
-<p>CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.</p>
-<p>Il n'y a pas de type de média spécial pour ce type de périphériques.</p>
-<p>Voici les cinq sélecteurs spéciaux :</p>
-<table style="margin-left: 2em;">
-  <tbody>
-    <tr>
-      <td style="width: 10em;"><strong>Selecteur</strong></td>
-      <td><strong>Sélectionne</strong></td>
-    </tr>
-    <tr>
-      <td><code>E:hover</code></td>
-      <td>Tout élément E survolé par le pointeur</td>
-    </tr>
-    <tr>
-      <td><code>E:focus</code></td>
-      <td>Tout élément E ayant le focus du clavier</td>
-    </tr>
-    <tr>
-      <td><code>E:active</code></td>
-      <td>Tout élément E impliqué dans l'action courante de l'utilisateur</td>
-    </tr>
-    <tr>
-      <td><code>E:link</code></td>
-      <td>Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur <em>n'a pas</em> visitée récemment</td>
-    </tr>
-    <tr>
-      <td><code>E:visited</code></td>
-      <td>Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur <em>a</em> visitée récemment</td>
-    </tr>
-  </tbody>
-</table>
-<p>La propriété <code>cursor</code> spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :</p>
-<table style="margin-left: 2em;">
-  <tbody>
-    <tr>
-      <td style="width: 10em;"><strong>Valeur</strong></td>
-      <td><strong>Indique</strong></td>
-    </tr>
-    <tr style="cursor: pointer;">
-      <td><code>pointer</code></td>
-      <td>Indique un lien</td>
-    </tr>
-    <tr style="cursor: wait;">
-      <td><code>wait</code></td>
-      <td>Indique que le programme n'accepte aucune interaction pour le moment</td>
-    </tr>
-    <tr style="cursor: progress;">
-      <td><code>progress</code></td>
-      <td>Indique que le programme fonctionne, mais peut toujours accepter une autre commande</td>
-    </tr>
-    <tr style="cursor: default;">
-      <td><code>default</code></td>
-      <td>Le curseur par défaut (habituellement une flèche)</td>
-    </tr>
-  </tbody>
-</table>
-<p><br>
-  Une propriété <code>outline</code> crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété <code>border</code>, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.</p>
-<p>Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut <code>disabled</code> ou <code>readonly</code>. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : <code>{{ mediawiki.external('disabled') }}</code> ou <code>{{ mediawiki.external('readonly') }}</code>.</p>
-<p> </p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
-  <caption>
-    Exemple</caption>
-  <tbody>
-    <tr>
-      <td>Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui :
-        <div style="width: 30em;">
-          <pre>
-.bouton-vert {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.bouton-vert[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.bouton-vert:active {
-  border-style: inset;
-  }
-</pre>
-        </div>
-        <p>Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :</p>
-        <table style="border: 2px outset #36b; padding: 1em; background-color: #fff;">
-          <tbody>
-            <tr>
-              <td>
-                <table>
-                  <tbody>
-                    <tr>
-                      <td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Cliquez ici</span></td>
-                      <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Cliquez ici</span></td>
-                      <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Cliquez ici</span></td>
-                    </tr>
-                    <tr style="line-height: 25%;">
-                      <td> </td>
-                    </tr>
-                    <tr style="font-style: italic;">
-                      <td>disabled</td>
-                      <td>normal</td>
-                      <td>active</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <p>Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
-  <caption>
-    Plus de détails</caption>
-  <tbody>
-    <tr>
-      <td>Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> dans la spécification CSS.
-        <p>Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<h3 id="Action_:_impression_d.27un_document" name="Action_:_impression_d.27un_document">Action : impression d'un document</h3>
-<p>Créez un nouveau document HTML, <code>doc4.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :</p>
-<div style="width: 48em; height: 12em; overflow: auto;">
-  <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
-&lt;HTML&gt;
-
-&lt;HEAD&gt;
-&lt;TITLE&gt;Exemple à imprimer&lt;/TITLE&gt;
-&lt;LINK rel="stylesheet" type="text/css" href="style4.css"&gt;&lt;/strong&gt;
-&lt;/HEAD&gt;
-
-&lt;BODY&gt;
-&lt;H1&gt;Section A&lt;/H1&gt;
-&lt;P&gt;Ceci est la première section...&lt;/P&gt;
-
-&lt;H1&gt;Section B&lt;/H1&gt;
-&lt;P&gt;Ceci est la seconde section...&lt;/P&gt;
-
-&lt;DIV id="en-tete-impression"&gt;
-Titre pour les médias paginés
-&lt;/DIV&gt;
-
-&lt;DIV id="pied-de-page-impression"&gt;
-Page :
-&lt;/DIV&gt;
-
-&lt;/BODY&gt;
-&lt;/HTML&gt;
-</pre>
-</div>
-<p>Créez une nouvelle feuille de style, <code>style4.css</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :</p>
-<div style="width: 48em; height: 12em; overflow: auto;">
-  <pre>/*** Exemple d'impression ***/
-
-/* Réglages par défaut pour l'écran */
-#en-tete-impression,
-#pied-de-page-impression {
-  display: none;
-  }
-
-/* Uniquement pour l'impression */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#en-tete-impression {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#pied-de-page-impression {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#pied-de-page-impression:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* fin des paramètres pour l'impression */
-</pre>
-</div>
-<p>Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.</p>
-<p>Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.</p>
-<table>
-  <tbody>
-    <tr>
-      <td>
-        <table style="border: 2px outset #36b; padding: 1em;">
-          <tbody>
-            <tr>
-              <td>
-                <table style="width: 15em; margin-right: 2em;">
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">
-                          Titre</div>
-                        <div style="font-size: 150%; font-weight: bold;">
-                          Section A</div>
-                        <div style="font-size: 75%;">
-                          Ceci est la première section...</div>
-                        <div style="font-size: 150%; text-align: right; margin-top: 12em;">
-                          Page : 1</div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-      <td>
-        <table style="border: 2px outset #36b; padding: 1em;">
-          <tbody>
-            <tr>
-              <td>
-                <table style="width: 15em; margin-right: 2em;">
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div style="font-size: 150%; text-align: center; margin-bottom: .5em;">
-                          Titre</div>
-                        <div style="font-size: 150%; font-weight: bold;">
-                          Section B</div>
-                        <div style="font-size: 75%;">
-                          Ceci est la seconde section...</div>
-                        <div style="font-size: 150%; text-align: right; margin-top: 12em;">
-                          Page : 2</div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p> </p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
-  <caption>
-    Challenge</caption>
-  <tbody>
-    <tr>
-      <td>Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé.
-        <p>Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.</p>
-        <p>Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p> </p>
-<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
-<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Médias" title="Talk:fr/CSS/Premiers_pas/Médias">page de discussion</a>.</p>
-<p>Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : <strong><a href="/fr/docs/CSS/Premiers_pas/JavaScript" title="fr/CSS/Premiers_pas/JavaScript">JavaScript</a></strong>.</p>