update based on https://github.com/mdn/yari/issues/2028

3 files changed, 0 insertions, 704 deletions

diff --git a/files/fr/css/premiers_pas/données_xml/index.html b/files/fr/css/premiers_pas/données_xml/index.html
deleted file mode 100644
index c4608b74eb..0000000000
--- a/files/fr/css/premiers_pas/données_xml/index.html
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: Données XML
-slug: CSS/Premiers_pas/Données_XML
-tags:
-  - CSS
-  - 'CSS:Premiers_pas'
-translation_of: Archive/Beginner_tutorials/XML_data
----
-<p>
-</p><p>Cette page contient un exemple d'utilisation de CSS avec des données XML.
-</p><p>Vous créerez un document XML simple et une feuille de style servant à l'afficher dans un navigateur.
-</p>
-<h3 id="Information_:_donn.C3.A9es_XML" name="Information_:_donn.C3.A9es_XML"> Information : données XML </h3>
-<p><i><a href="fr/XML">XML</a></i> (eXtended Markup Language) est un langage d'usage général prévu pour tous types de données structurées.
-</p><p>Par défaut, votre navigateur Mozilla affiche XML dans un format très similaire aux données originales contenues dans le fichier XML.
-Les balises définissant la structure des données sont visibles.
-</p><p>En liant un fichier CSS avec le document XML, vous pouvez définir d'autres manières de l'afficher. Pour ce faire, votre feuille de style utilisera des règles associant les balises du document XML aux types d'affichage utilisés par HTML.
-</p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
-<caption>Exemple
-</caption><tbody><tr>
-<td> Les données d'un document XML utilisent des balises <code>&lt;INFO&gt;</code>. Vous désirez que les éléments <small>INFO</small> du document soient affichés comme des paragraphes en HTML.
-<p>Dans la feuille de style du document, vous spécifierez comment les éléments <small>INFO</small> doivent être affichés :
-</p>
-<div style="width: 30em;">
-<pre class="eval">INFO {
-  display: block;
-  margin: 1em 0;
-  }
-</pre>
-</div>
-</td></tr></tbody></table>
-<p>Les valeurs les plus courantes pour la propriété <code>display</code> sont :
-</p>
-<table style="margin-left: 2em;">
-<tbody><tr>
-<td style="padding-right: 2em;"><code>block</code></td><td>Est affiché comme un élément <small>DIV</small> en HTML (pour les titres, les paragraphes, etc.)
-</td></tr>
-<tr>
-<td><code>inline</code></td><td>Est affiché comme un élément <small>SPAN</small> en HTML (pour insister sur certaines parties du texte)
-</td></tr></tbody></table>
-<p>Vous ajouterez vos propres règles de style spécifiant la police, les marges et d'autres détails de la même façon que pour un document HTML.
-</p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
-<caption>Plus de détails
-</caption><tbody><tr>
-<td> D'autres valeurs de la propriété <code>display</code> permettent d'afficher l'élément comme un élément de liste, ou un élément de tableau.
-<p>Pour la liste complète des types d'affichage, consultez <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a> dans la spécification CSS.
-</p><p>Si vous n'utilisez que CSS, la structure de ce qui est affiché doit être la même que la structure du document.
-D'autres technologies peuvent modifier la structure de l'affichage, par exemple XBL peut ajouter du contenu, et JavaScript peut modifier le DOM.
-</p><p>Pour plus d'informations à propos de l'utilisation de XML dans Mozilla, consultez la page <a href="fr/XML">XML</a> de ce wiki.
-</p>
-</td></tr></tbody></table>
-<h3 id="Action_:_une_d.C3.A9monstration_de_XML" name="Action_:_une_d.C3.A9monstration_de_XML"> Action : une démonstration de XML </h3>
-<p>Créez un nouveau fichier XML, <code>doc9.xml</code>.
-Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :
-</p>
-<div style="width: 48em; height: 12em; overflow: auto;"><pre>&lt;?xml version="1.0"?&gt;
-&lt;!-- Démonstration de XML --&gt;
-
-&lt;?xml-stylesheet type="text/css" href="style9.css"?&gt;
-
-&lt;!DOCTYPE planete&gt;
-&lt;planete&gt;
-
-&lt;ocean&gt;
-&lt;nom&gt;Arctique&lt;/nom&gt;
-&lt;surface&gt;13 000&lt;/surface&gt;
-&lt;profondeur&gt;1 200&lt;/profondeur&gt;
-&lt;/ocean&gt;
-
-&lt;ocean&gt;
-&lt;nom&gt;Atlantique&lt;/nom&gt;
-&lt;surface&gt;87 000&lt;/surface&gt;
-&lt;profondeur&gt;3 900&lt;/profondeur&gt;
-&lt;/ocean&gt;
-
-&lt;ocean&gt;
-&lt;nom&gt;Pacifique&lt;/nom&gt;
-&lt;surface&gt;180 000&lt;/surface&gt;
-&lt;profondeur&gt;4 000&lt;/profondeur&gt;
-&lt;/ocean&gt;
-
-&lt;ocean&gt;
-&lt;nom&gt;Indien&lt;/nom&gt;
-&lt;surface&gt;75 000&lt;/surface&gt;
-&lt;profondeur&gt;3 900&lt;/profondeur&gt;
-&lt;/ocean&gt;
-
-&lt;ocean&gt;
-&lt;nom&gt;Antarctique&lt;/nom&gt;
-&lt;surface&gt;20 000&lt;/surface&gt;
-&lt;profondeur&gt;4 500&lt;/profondeur&gt;
-&lt;/ocean&gt;
-
-&lt;/planete&gt;
-</pre></div>
-<p>Créez un nouveau fichier CSS, <code>style9.css</code>.
-Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :
-</p>
-<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** Démonstration de XML ***/
-
-planete:before {
-  display: block;
-  width: 8em;
-  font-weight: bold;
-  font-size: 200%;
-  content: "Océans";
-  margin: -.75em 0px .25em -.25em;
-  padding: .1em .25em;
-  background-color: #cdf;
-  }
-
-planete {
-  display: block;
-  margin: 2em 1em;
-  border: 4px solid #cdf;
-  padding: 0px 1em;
-  background-color: white;
-  }
-
-ocean {
-  display: block;
-  margin-bottom: 1em;
-  }
-
-nom {
-  display: block;
-  font-weight: bold;
-  font-size: 150%;
-  }
-
-surface {
-  display: block;
-  }
-
-surface:before {
-  content: "Surface : ";
-  }
-
-surface:after {
-  content: " millions de km\B2";
-  }
-
-profondeur {
-  display: block;
-  }
-
-profondeur:before {
-  content: "Profondeur moyenne : ";
-  }
-
-profondeur:after {
-  content: " m";
-  }
-</pre></div>
-<p>Ouvrez le document dans votre navigateur :
-</p>
-<table style="border: 2px outset #36b; padding: 1em;">
-<tbody><tr>
-<td><div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;">
-<p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Océans</p>
-<p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><b>Arctique</b><br>
-Surface : 13 000 millions de km²<br>
-Profondeur moyenne : 1 200 m</p>
-<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>Atlantique</b><br>
-Surface : 87 000 millions de km²<br>
-Profondeur moyenne : 3 900 m</p>
-<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>. . .</b></p>
-</div>
-</td></tr></tbody></table>
-<p><br>
-Remarques à propos de cette démonstration :
-</p>
-<ul><li> L'exposant (dans "millions de km²") est un caractère Unicode, codé comme <code>\B2</code> dans le fichier CSS.
-</li><li> Le titre, « Océans », a une marge supérieure négative, ce qui l'amène à être affiché par dessus la bordure.
-</li></ul>
-<p><br>
-</p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
-<caption>Challenge
-</caption><tbody><tr>
-<td> Modifiez la feuille de style afin qu'elle affiche le document comme un tableau.
-<p>(Consultez le chapître <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> dans la spécification CSS pour des exemples que vous pouvez adapter.)
-</p>
-</td></tr></tbody></table>
-<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>page de discussion</a>.
-</p><p>Ceci est la dernière page du tutoriel.
-Pour plus d'informations à propos de l'utilisation de CSS dans Mozilla, consultez la page principale <a href="fr/CSS">CSS</a> de ce wiki.
-</p>{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "ko": "ko/CSS/Getting_Started/XML_data", "pl": "pl/CSS/Na_pocz\u0105tek/Dane_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML" } ) }}
diff --git a/files/fr/css/premiers_pas/interfaces_utilisateur_xul/index.html b/files/fr/css/premiers_pas/interfaces_utilisateur_xul/index.html
deleted file mode 100644
index eba4bce28c..0000000000
--- a/files/fr/css/premiers_pas/interfaces_utilisateur_xul/index.html
+++ /dev/null
@@ -1,315 +0,0 @@
----
-title: Interfaces utilisateur XUL
-slug: CSS/Premiers_pas/Interfaces_utilisateur_XUL
-tags:
-  - CSS
-  - 'CSS:Premiers_pas'
-translation_of: Archive/Beginner_tutorials/XUL_user_interfaces
----
-<p> </p>
-<p>Cette page illustre le langage spécialisé de Mozilla pour créer des interfaces utilisateur.</p>
-<p>Vous créerez une démonstration simple utilisable dans votre navigateur Mozilla.</p>
-<h3 id="Information_:_les_interfaces_utilisateur" name="Information_:_les_interfaces_utilisateur">Information : les interfaces utilisateur</h3>
-<p>Bien que le HTML propose quelques éléments d'interface utilisateur, il ne contient pas toutes les fonctionnalités nécessaires à la création d'une application complète.</p>
-<p>Mozilla pallie à cette limitation en fournissant un langage spécialisé dans la création d'interfaces utilisateur :
-  <i>
-    XUL</i>
-  (XML User-interface Language, généralement prononcé en anglais comme «
-  <i>
-    zool</i>
-   »).</p>
-<p>Beaucoup des fonctions usuelles des interfaces utilisateur sont intégrées dans XUL. Par exemple, celui-ci fournit des fenêtres spécialisées telles que des dialogues ou des assistants, ainsi que des barres d'état, des barres de menus et d'outils, et même des navigateurs entiers.</p>
-<p>Des fonctionnalités plus spécialisées peuvent être construites en combinant XUL avec d'autres technologies que vous avez pu voir dans ce tutoriel : les styles CSS, du code JavaScript, et des liaisons XBL.</p>
-<p>Comme d'autres langages basés sur XML, XUL utilise des feuilles de style CSS.</p>
-<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 XUL, consultez la page <a href="fr/XUL">XUL</a> de ce wiki.</td>
-    </tr>
-  </tbody>
-</table>
-<h3 id="Action_:_une_d.C3.A9monstration_de_XUL" name="Action_:_une_d.C3.A9monstration_de_XUL">Action : une démonstration de XUL</h3>
-<p>Créez un nouveau document XUL en tant que fichier texte, <code>doc7.xul</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :</p>
-<div style="width: 48em; height: 12em; overflow: auto;">
-  <pre>&lt;?xml version="1.0"?&gt;
-&lt;?xml-stylesheet type="text/css" href="style7.css"?&gt;
-&lt;!DOCTYPE window&gt;
-
-&lt;window
-  xmlns="http&amp;58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-  title="Premiers pas avec CSS - Démonstration de XUL"
-  onload="init();"&gt;
-
-&lt;script type="application/x-javascript" src="script7.js"/&gt;
-
-&lt;label class="head-1" value="Démonstration de XUL"/&gt;
-
-&lt;vbox&gt;
-
-  &lt;groupbox class="demo-group"&gt;
-    &lt;caption label="Calculatrice du jour de la semaine"/&gt;
-    &lt;grid&gt;
-      &lt;columns&gt;
-        &lt;column/&gt;
-        &lt;column/&gt;
-        &lt;/columns&gt;
-      &lt;rows&gt;
-        &lt;row&gt;
-          &lt;label class="text-prompt" value="Date :"
-            accesskey="D" control="date-text"/&gt;
-          &lt;textbox id="date-text" type="timed"
-            timeout="750" oncommand="refresh();"/&gt;
-          &lt;/row&gt;
-        &lt;row&gt;
-          &lt;label value="Day:"/&gt;
-          &lt;hbox id="day-box"&gt;
-            &lt;label class="day" value="Dimanche" disabled="true"/&gt;
-            &lt;label class="day" value="Lundi" disabled="true"/&gt;
-            &lt;label class="day" value="Mardi" disabled="true"/&gt;
-            &lt;label class="day" value="Mercredi" disabled="true"/&gt;
-            &lt;label class="day" value="Jeudi" disabled="true"/&gt;
-            &lt;label class="day" value="Vendredi" disabled="true"/&gt;
-            &lt;label class="day" value="Samedi" disabled="true"/&gt;
-            &lt;/hbox&gt;
-          &lt;/row&gt;
-        &lt;/rows&gt;
-      &lt;/grid&gt;
-    &lt;hbox class="buttons"&gt;
-      &lt;button id="clear" label="Réinitialiser" accesskey="R"
-        oncommand="clearDate();"/&gt;
-      &lt;button id="today" label="Aujourd'hui" accesskey="A"
-        oncommand="setToday();"/&gt;
-      &lt;/hbox&gt;
-    &lt;/groupbox&gt;
-
-  &lt;statusbar&gt;
-    &lt;statusbarpanel id="status"/&gt;
-    &lt;/statusbar&gt;
-
-&lt;/vbox&gt;
-
-&lt;/window&gt;
-</pre>
-</div>
-<p>Créez un nouveau fichier CSS, <code>style7.css</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :</p>
-<div style="width: 48em; height: 12em; overflow: auto;">
-  <pre>/*** Démonstration de XUL ***/
-window {
-  -moz-box-align: start;
-  background-color: -moz-dialog;
-  font: -moz-dialog;
-  padding: 2em;
-  }
-
-.head-1 {
-  font-weight: bold;
-  font-size: 200%;
-  padding-left: 5px;
-  }
-
-
-/* group box */
-.demo-group {
-  padding: 1em;
-  }
-
-.demo-group grid {
-  margin-bottom: 1em;
-  }
-
-.demo-group column {
-  margin-right: .5em;
-  }
-
-.demo-group row {
-  margin-bottom: .5em;
-  }
-
-.demo-group .buttons {
-  -moz-box-pack: end;
-  }
-
-
-/* labels des jours de la semaine */
-.day {
-  margin-left: 1em;
-  }
-
-.day[disabled] {
-  color: #777;
-  }
-
-.day:first-child {
-  margin-left: 4px;
-  }
-
-
-/* labels colonne de gauche */
-.text-prompt {
-  padding-top: .25em;
-  }
-
-
-/* boîte d'entrée de la date */
-#date-text {
-  max-width: 8em;
-  }
-
-
-/* barre d'état */
-statusbar {
-  width: 100%;
-  border: 1px inset -moz-dialog;
-  margin: 4px;
-  padding: 0px 4px;
-  }
-
-#status {
-  padding: 4px;
-  }
-
-#status[warning] {
-  color: red;
-  }
-</pre>
-</div>
-<p>Créez un nouveau fichier texte, <code>script7.js</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :</p>
-<div style="width: 48em; height: 12em; overflow: auto;">
-  <pre>// Démonstratio de XUL
-
-var dateBox, dayBox, currentDay, status; // éléments
-
-// appelée par window onLoad
-function init() {
-  dateBox = document.getElementById("date-text")
-  dayBox = document.getElementById("day-box")
-  status = document.getElementById("status")
-  setToday();
-  }
-
-// appelée par le bouton Réinitialiser
-function clearDate() {
-  dateBox.value = ""
-  refresh()
-  }
-
-// appelée par le bouton aujourd'hui
-function setToday() {
-  var d = new Date()
-  dateBox.value = (d.getMonth() + 1)
-    + "/" + d.getDate()
-    + "/" + d.getFullYear()
-  refresh()
-  }
-
-// appelée par la boîte de texte Date
-function refresh() {
-  var d = dateBox.value
-  var theDate = null
-
-  showStatus(null)
-  if (d != "") {
-    try {
-      var a = d.split("/")
-      var theDate = new Date(a[2], a[1], a[0] - 1)
-      showStatus(theDate)
-      }
-    catch (ex) {}
-    }
-  setDay(theDate)
-  }
-
-// fonctions internes
-function setDay(aDate) {
-  if (currentDay) currentDay.setAttribute("disabled", "true")
-  if (aDate == null) currentDay = null
-  else {
-    var d = aDate.getDay()
-    currentDay = dayBox.firstChild
-    while (d-- &gt; 0) currentDay = currentDay.nextSibling
-    currentDay.removeAttribute("disabled")
-    }
-  dateBox.focus();
-  }
-
-function showStatus(aDate) {
-  if (aDate == null) {
-    status.removeAttribute("warning")
-    status.setAttribute("label", "")
-    }
-  else if (aDate === false || isNaN(aDate.getTime())) {
-    status.setAttribute("warning", "true")
-    status.setAttribute("label", "Date invalide")
-    }
-  else {
-    status.removeAttribute("warning")
-    status.setAttribute("label", aDate.toLocaleDateString())
-    }
-  }
-</pre>
-</div>
-<p>Pour voir le résultat exactement tel que prévu, utilisez le thème par défaut dans votre navigateur. Si vous utilisz un thème différent, il peut changer certains styles de l'interface et faire en sorte que la démonstration aie l'air étrange.</p>
-<p>Ouvrez le document dans votre navigateur Mozilla et testez l'interface.</p>
-<p>Ce wiki ne permet pas d'utiliser XUL et JavaScript dans ses pages, il n'est donc pas possible de faire la démonstration ici. Cela ressemble à ceci :</p>
-<table style="border: 2px outset #36b; background-color: threedface; padding: 1em; cursor: default; white-space: nowrap; margin: .5em 0;">
-  <tbody>
-    <tr>
-      <td>
-        <p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">Démonstration de XUL</p>
-        <div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;">
-          <p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;">Calculatrice du jour de la semaine</p>
-          <table style="background-color: threedface; margin: .5em; padding-right: .5em;">
-            <tbody>
-              <tr>
-                <td style="padding-right: .5em;"><u>D</u>ate :</td>
-                <td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">27/06/2005</td>
-              </tr>
-              <tr>
-                <td>Day:</td>
-                <td style="color: graytext;">Dimanche <span style="color: #000;">Lundi</span> Mardi Mercredi Jeudi Vendredi Samedi</td>
-              </tr>
-              <tr>
-                <td> </td>
-                <td>
-                  <div style="float: right; margin-top: .5em;">
-                    <p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>R</u>éinitialiser</span> <span style="border: 2px outset threedface; padding: .25em 1em;"><u>A</u>ujourd'hui</span></p>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div style="border: 1px inset threedface; margin-top: 1em;">
-          <p style="margin: 0; padding: .25em .5em;">27 juin 2005</p>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p>Remarques à propos de cette démonstration :</p>
-<ul>
-  <li>Le document XUL est lié à la feuille de style de la façon habituelle, ainsi qu'au script.</li>
-  <li>Le script n'est pas important dans cette démonstration.</li>
-  <li>Une grande partie du style de ce qui est visible dépend du thème de votre navigateur.</li>
-</ul>
-<p>Examinez la feuille de style du document pour vous assurez que vous comprenez toutes les règles qui y figurent. S'il y a une règle que vous ne comprenez pas, mettez-la en commentaire et actualisez dans votre navigateur pour voir son effet sur le document.</p>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
-  <caption>
-    Challenge</caption>
-  <tbody>
-    <tr>
-      <td>Utilisez l'inspecteur DOM pour examiner la boîte de texte Date. Elle est constituée d'autres éléments qui sont générés par sa liaison XBL.
-        <p>Découvrez la classe (
-          <i>
-            class</i>
-          ) de son élément <code>html:input</code>. Il s'agit de l'élément qui reçoit réellement l'entrée de l'utilisateur.</p>
-        <p>À l'aide de ces informations, ajoutez une règle à la feuille de style qui rend le fond de la boîte Date bleu pâle lorsqu'elle a le focus clavier (mais reste blanche lorsque le focus clavier est ailleurs).</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<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>page de discussion</a>.</p>
-<p>Dans cette démonstration, vous voyez les formes rectangulaires standard qui sont communes à la plupart des interfaces utilisateur. Mozilla gère également un langage graphique spécialisé pour créer des formes, et peut utiliser CSS pour en spécifier le style. La page suivante en propose une démonstration : <b><a href="/fr/docs/CSS/Premiers_pas/Graphiques_SVG">Graphiques SVG</a></b>.</p>
diff --git a/files/fr/css/premiers_pas/liaisons_xbl/index.html b/files/fr/css/premiers_pas/liaisons_xbl/index.html
deleted file mode 100644
index 8f087ebf77..0000000000
--- a/files/fr/css/premiers_pas/liaisons_xbl/index.html
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: Liaisons XBL
-slug: CSS/Premiers_pas/Liaisons_XBL
-tags:
-  - CSS
-  - 'CSS:Premiers_pas'
-translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets
----
-<p> </p>
-<p>Cette page illustre la façon d'utiliser CSS dans Mozilla pour améliorer la structure d'applications complexes, afin de rendre le code et ses ressources plus facilement réutilisables.</p>
-<p>Vous appliquerez cette technique dans une démonstration simple.</p>
-<h3 id="Information_:_les_liaisons_XBL" name="Information_:_les_liaisons_XBL">Information : les liaisons XBL</h3>
-<p>La structure fournie par les langages de balisage et CSS n'est pas idéale pour les applications complexes où certaines parties nécessitent d'être indépendantes et réutilisables. Vous pouvez placer les feuilles de style et les scripts dans des fichiers séparés, mais vous devez lier ces fichiers avec le document dans son ensemble.</p>
-<p>Une autre limitation structurelle concerne le contenu. Vous pouvez utiliser CSS pour fournir du contenu pour des éléments sélectionnés, mais ce contenu est limité à du texte et des images, et son positionnement est limité à juste avant ou juste après l'élément sélectionné.</p>
-<p>Mozilla fournit un mécanisme permettant de surmonter ces limitations :
-  <i>
-    XBL</i>
-  (XML Bindings Language). Vous pouvez utiliser XBL pour lier des éléments sélectionnés à leurs propres :</p>
-<ul>
-  <li>Feuilles de style</li>
-  <li>Contenu</li>
-  <li>Propriétés et méthodes</li>
-  <li>Gestionnaires d'évènements</li>
-</ul>
-<p>Étant donné que vous évitez de lier tout au niveau du document, vous pouvez créer des pièces indépendantes faciles à maintenir et réutilisables.</p>
-<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 liaisons XBL, consultez la page <a href="fr/XBL">XBL</a> de ce wiki.</td>
-    </tr>
-  </tbody>
-</table>
-<h3 id="Action_:_une_d.C3.A9monstration_de_XBL" name="Action_:_une_d.C3.A9monstration_de_XBL">Action : une démonstration de XBL</h3>
-<p>Créez un nouveau document HTML, <code>doc6.html</code>. Copiez et collez-y le contenu ci-dessous :</p>
-<div style="width: 48em;">
-  <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
-&lt;HTML&gt;
-
-&lt;HEAD&gt;
-&lt;TITLE&gt;Premiers pas en CSS avec Mozilla CSS - Démonstration de XBL&lt;/TITLE&gt;
-&lt;LINK rel="stylesheet" type="text/css" href="style6.css"&gt;&lt;/strong&gt;
-&lt;/HEAD&gt;
-
-&lt;BODY&gt;
-&lt;H1&gt;Démonstration de XBL&lt;/H1&gt;
-&lt;DIV id="square"&gt;Cliquez ici&lt;/DIV&gt;
-&lt;/BODY&gt;
-
-&lt;/HTML&gt;
-</pre>
-</div>
-<p>Créez un nouveau fichier CSS, <code>style6.css</code>. Cette feuille de style contient le style du document. Copiez et collez-y le contenu ci-dessous :</p>
-<div style="width: 48em;">
-  <pre>/*** Démonstration de XBL ***/
-#square {
-  -moz-binding: url("square.xbl#square");
-  }
-</pre>
-</div>
-<p>Créez un nouveau fichier texte, <code>square.xbl</code>. Ce fichier contient la liaison XBL. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défile pour l'obtenir dans son entièreté :</p>
-<div style="width: 48em; height: 12em; overflow: auto;">
-  <pre>&lt;?xml version="1.0"?&gt;
-&lt;!DOCTYPE bindings&gt;
-&lt;bindings xmlns="http://www.mozilla.org/xbl"&gt;
-
-&lt;binding id="square"&gt;
-
-  &lt;resources&gt;
-    &lt;stylesheet src="bind6.css"/&gt;
-    &lt;/resources&gt;
-
-  &lt;content xmlns="http://www.w3.org/1999/xhtml"&gt;
-    &lt;div anonid="square"/&gt;
-    &lt;button anonid="button" type="button"&gt;
-      &lt;xbl:children/&gt;
-      &lt;/button&gt;
-    &lt;/content&gt;
-
-  &lt;implementation&gt;
-
-    &lt;field name="square"&gt;&lt;![CDATA[
-      document.getAnonymousElementByAttribute(this, "anonid", "square")
-      ]]&gt;&lt;/field&gt;
-
-    &lt;field name="button"&gt;&lt;![CDATA[
-      document.getAnonymousElementByAttribute(this, "anonid", "button")
-      ]]&gt;&lt;/field&gt;
-
-    &lt;method name="doDemo"&gt;
-      &lt;body&gt;&lt;![CDATA[
-        this.square.style.backgroundColor = "#cf4"
-        this.square.style.marginLeft = "20em"
-        this.button.setAttribute("disabled", "true")
-        setTimeout(this.clearDemo, 2000, this)
-        ]]&gt;&lt;/body&gt;
-      &lt;/method&gt;
-
-    &lt;method name="clearDemo"&gt;
-      &lt;parameter name="me"/&gt;
-      &lt;body&gt;&lt;![CDATA[
-        me.square.style.backgroundColor = "transparent"
-        me.square.style.marginLeft = "0"
-        me.button.removeAttribute("disabled")
-        ]]&gt;&lt;/body&gt;
-      &lt;/method&gt;
-
-    &lt;/implementation&gt;
-
-  &lt;handlers&gt;
-    &lt;handler event="click" button="0"&gt;&lt;![CDATA[
-     if (event.originalTarget == this.button) this.doDemo()
-     ]]&gt;&lt;/handler&gt;
-    &lt;/handlers&gt;
-
-  &lt;/binding&gt;
-
-&lt;/bindings&gt;
-</pre>
-</div>
-<p>Créez un nouveau fichier CSS, <code>bind6.css</code>. Cette feuille de style séparée contient le style pour la liaison. Copiez et collez-y le contenu ci-dessous :</p>
-<div style="width: 48em;">
-  <pre>/*** Démonstration de XBL ***/
-[anonid="square"] {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  }
-
-[anonid="button"] {
-  margin-top: 1em;
-  padding: .5em 2em;"
-  }
-</pre>
-</div>
-<p>Ouvrez le document dans votre navigateur et appuyez sur le bouton.</p>
-<p>Ce wiki ne permet pas d'utiliser JavaScript au sein des pages, il n'est dont pas possible de montrer la démonstration ici. Cela ressemble à ceci, avant et après l'appui sur le bouton :</p>
-<table>
-  <tbody>
-    <tr>
-      <td style="padding-right: 2em;">
-        <table style="border: 2px outset #36b; padding: 0 4em .5em .5em;">
-          <tbody>
-            <tr>
-              <td>
-                <p><b>Démonstration de XBL</b></p>
-                <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white; margin-right: 5em;">
-                  <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;">
-                     </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-      <td>
-        <table style="border: 2px outset #36b; padding: 0 4em .5em .5em;">
-          <tbody>
-            <tr>
-              <td>
-                <p><b>Démonstration de XBL</b></p>
-                <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #cf4; margin-left: 5em;">
-                  <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;">
-                     </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<p>Remarques à propos de cette démonstration :</p>
-<ul>
-  <li>Le document HTML est liée à sa feuille de style comme d'habitude, mais il ne lie vers aucun code JavaScript.</li>
-  <li>Le document ne contient aucun bouton. Il contient uniquement le texte du label de celui-ci. Le bouton est ajouté par la liaison.</li>
-  <li>La feuille de style du document est liée à la liaison XBL.</li>
-  <li>La liaison est liée à sa propre feuille de style, fournit son propre contenu et code JavaScript. Elle est donc totalement indépendante.</li>
-</ul>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
-  <caption>
-    Challenges</caption>
-  <tbody>
-    <tr>
-      <td>Modifiez le fichier XBL afin que le carré double sa largeur lorsqu'il change de couleur au lieu de se déplacer vers la droite.
-        <p>Utilisez l'inspecteur DOM pour examiner le document, afin de révéler le contenu ajouté.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<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>page de discussion</a>.</p>
-<p>Dans cette démonstration, le carré et le bouton forment un composant graphique (
-  <i>
-    widget</i>
-  ) indépendant qui fonctionne au sein d'un document HTML. Mozilla dispose d'un langage de balisage spécialisé pour créer des interfaces utilisateur. La page suivante en donne une démonstration : <b><a href="/fr/docs/CSS/Premiers_pas/Interfaces_utilisateur_XUL">Interfaces utilisateur XUL</a></b>.</p>