From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../premiers_pas/donn\303\251es_xml/index.html" | 191 ------------- .../interfaces_utilisateur_xul/index.html | 315 --------------------- files/fr/css/premiers_pas/liaisons_xbl/index.html | 198 ------------- 3 files changed, 704 deletions(-) delete mode 100644 "files/fr/css/premiers_pas/donn\303\251es_xml/index.html" delete mode 100644 files/fr/css/premiers_pas/interfaces_utilisateur_xul/index.html delete mode 100644 files/fr/css/premiers_pas/liaisons_xbl/index.html (limited to 'files/fr/css') diff --git "a/files/fr/css/premiers_pas/donn\303\251es_xml/index.html" "b/files/fr/css/premiers_pas/donn\303\251es_xml/index.html" deleted file mode 100644 index c4608b74eb..0000000000 --- "a/files/fr/css/premiers_pas/donn\303\251es_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 ---- -

-

Cette page contient un exemple d'utilisation de CSS avec des données XML. -

Vous créerez un document XML simple et une feuille de style servant à l'afficher dans un navigateur. -

-

Information : données XML

-

XML (eXtended Markup Language) est un langage d'usage général prévu pour tous types de données structurées. -

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. -

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. -

- - -
Exemple -
Les données d'un document XML utilisent des balises <INFO>. Vous désirez que les éléments INFO du document soient affichés comme des paragraphes en HTML. -

Dans la feuille de style du document, vous spécifierez comment les éléments INFO doivent être affichés : -

-
-
INFO {
-  display: block;
-  margin: 1em 0;
-  }
-
-
-
-

Les valeurs les plus courantes pour la propriété display sont : -

- - - - -
blockEst affiché comme un élément DIV en HTML (pour les titres, les paragraphes, etc.) -
inlineEst affiché comme un élément SPAN en HTML (pour insister sur certaines parties du texte) -
-

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. -

- - -
Plus de détails -
D'autres valeurs de la propriété display permettent d'afficher l'élément comme un élément de liste, ou un élément de tableau. -

Pour la liste complète des types d'affichage, consultez The display property dans la spécification CSS. -

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. -

Pour plus d'informations à propos de l'utilisation de XML dans Mozilla, consultez la page XML de ce wiki. -

-
-

Action : une démonstration de XML

-

Créez un nouveau fichier XML, doc9.xml. -Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté : -

-
<?xml version="1.0"?>
-<!-- Démonstration de XML -->
-
-<?xml-stylesheet type="text/css" href="style9.css"?>
-
-<!DOCTYPE planete>
-<planete>
-
-<ocean>
-<nom>Arctique</nom>
-<surface>13 000</surface>
-<profondeur>1 200</profondeur>
-</ocean>
-
-<ocean>
-<nom>Atlantique</nom>
-<surface>87 000</surface>
-<profondeur>3 900</profondeur>
-</ocean>
-
-<ocean>
-<nom>Pacifique</nom>
-<surface>180 000</surface>
-<profondeur>4 000</profondeur>
-</ocean>
-
-<ocean>
-<nom>Indien</nom>
-<surface>75 000</surface>
-<profondeur>3 900</profondeur>
-</ocean>
-
-<ocean>
-<nom>Antarctique</nom>
-<surface>20 000</surface>
-<profondeur>4 500</profondeur>
-</ocean>
-
-</planete>
-
-

Créez un nouveau fichier CSS, style9.css. -Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté : -

-
/*** 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";
-  }
-
-

Ouvrez le document dans votre navigateur : -

- - -
-

Océans

-

Arctique
-Surface : 13 000 millions de km²
-Profondeur moyenne : 1 200 m

-

Atlantique
-Surface : 87 000 millions de km²
-Profondeur moyenne : 3 900 m

-

. . .

-
-
-


-Remarques à propos de cette démonstration : -

- -


-

- - -
Challenge -
Modifiez la feuille de style afin qu'elle affiche le document comme un tableau. -

(Consultez le chapître Tables dans la spécification CSS pour des exemples que vous pouvez adapter.) -

-
-

Pour continuer

-

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 page de discussion. -

Ceci est la dernière page du tutoriel. -Pour plus d'informations à propos de l'utilisation de CSS dans Mozilla, consultez la page principale CSS de ce wiki. -

{{ 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 ---- -

 

-

Cette page illustre le langage spécialisé de Mozilla pour créer des interfaces utilisateur.

-

Vous créerez une démonstration simple utilisable dans votre navigateur Mozilla.

-

Information : les interfaces utilisateur

-

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.

-

Mozilla pallie à cette limitation en fournissant un langage spécialisé dans la création d'interfaces utilisateur : - - XUL - (XML User-interface Language, généralement prononcé en anglais comme « - - zool -  »).

-

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.

-

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.

-

Comme d'autres langages basés sur XML, XUL utilise des feuilles de style CSS.

- - - - - - - -
- Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en XUL, consultez la page XUL de ce wiki.
-

Action : une démonstration de XUL

-

Créez un nouveau document XUL en tant que fichier texte, doc7.xul. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :

-
- 
<?xml version="1.0"?>
-<?xml-stylesheet type="text/css" href="style7.css"?>
-<!DOCTYPE window>
-
-<window
-  xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-  title="Premiers pas avec CSS - Démonstration de XUL"
-  onload="init();">
-
-<script type="application/x-javascript" src="script7.js"/>
-
-<label class="head-1" value="Démonstration de XUL"/>
-
-<vbox>
-
-  <groupbox class="demo-group">
-    <caption label="Calculatrice du jour de la semaine"/>
-    <grid>
-      <columns>
-        <column/>
-        <column/>
-        </columns>
-      <rows>
-        <row>
-          <label class="text-prompt" value="Date :"
-            accesskey="D" control="date-text"/>
-          <textbox id="date-text" type="timed"
-            timeout="750" oncommand="refresh();"/>
-          </row>
-        <row>
-          <label value="Day:"/>
-          <hbox id="day-box">
-            <label class="day" value="Dimanche" disabled="true"/>
-            <label class="day" value="Lundi" disabled="true"/>
-            <label class="day" value="Mardi" disabled="true"/>
-            <label class="day" value="Mercredi" disabled="true"/>
-            <label class="day" value="Jeudi" disabled="true"/>
-            <label class="day" value="Vendredi" disabled="true"/>
-            <label class="day" value="Samedi" disabled="true"/>
-            </hbox>
-          </row>
-        </rows>
-      </grid>
-    <hbox class="buttons">
-      <button id="clear" label="Réinitialiser" accesskey="R"
-        oncommand="clearDate();"/>
-      <button id="today" label="Aujourd'hui" accesskey="A"
-        oncommand="setToday();"/>
-      </hbox>
-    </groupbox>
-
-  <statusbar>
-    <statusbarpanel id="status"/>
-    </statusbar>
-
-</vbox>
-
-</window>
-
-
-

Créez un nouveau fichier CSS, style7.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :

-
- 
/*** 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;
-  }
-
-
-

Créez un nouveau fichier texte, script7.js. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :

-
- 
// 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-- > 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())
-    }
-  }
-
-
-

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.

-

Ouvrez le document dans votre navigateur Mozilla et testez l'interface.

-

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 :

- - - - - - -
-

Démonstration de XUL

-
-

Calculatrice du jour de la semaine

- - - - - - - - - - - - - - - -
Date :27/06/2005
Day:Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi
  -
-

Réinitialiser Aujourd'hui

-
-
-
-
-

27 juin 2005

-
-
-

Remarques à propos de cette démonstration :

- -

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.

- - - - - - - -
- Challenge
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. -

Découvrez la classe ( - - class - ) de son élément html:input. Il s'agit de l'élément qui reçoit réellement l'entrée de l'utilisateur.

-

À 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).

-
-

Pour continuer

-

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 page de discussion.

-

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 : Graphiques SVG.

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 ---- -

 

-

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.

-

Vous appliquerez cette technique dans une démonstration simple.

-

Information : les liaisons XBL

-

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.

-

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é.

-

Mozilla fournit un mécanisme permettant de surmonter ces limitations : - - XBL - (XML Bindings Language). Vous pouvez utiliser XBL pour lier des éléments sélectionnés à leurs propres :

- -

É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.

- - - - - - - -
- Plus de détails
Pour plus d'informations à propos des liaisons XBL, consultez la page XBL de ce wiki.
-

Action : une démonstration de XBL

-

Créez un nouveau document HTML, doc6.html. Copiez et collez-y le contenu ci-dessous :

-
- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Premiers pas en CSS avec Mozilla CSS - Démonstration de XBL</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>Démonstration de XBL</H1>
-<DIV id="square">Cliquez ici</DIV>
-</BODY>
-
-</HTML>
-
-
-

Créez un nouveau fichier CSS, style6.css. Cette feuille de style contient le style du document. Copiez et collez-y le contenu ci-dessous :

-
- 
/*** Démonstration de XBL ***/
-#square {
-  -moz-binding: url("square.xbl#square");
-  }
-
-
-

Créez un nouveau fichier texte, square.xbl. 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é :

-
- 
<?xml version="1.0"?>
-<!DOCTYPE bindings>
-<bindings xmlns="http://www.mozilla.org/xbl">
-
-<binding id="square">
-
-  <resources>
-    <stylesheet src="bind6.css"/>
-    </resources>
-
-  <content xmlns="http://www.w3.org/1999/xhtml">
-    <div anonid="square"/>
-    <button anonid="button" type="button">
-      <xbl:children/>
-      </button>
-    </content>
-
-  <implementation>
-
-    <field name="square"><![CDATA[
-      document.getAnonymousElementByAttribute(this, "anonid", "square")
-      ]]></field>
-
-    <field name="button"><![CDATA[
-      document.getAnonymousElementByAttribute(this, "anonid", "button")
-      ]]></field>
-
-    <method name="doDemo">
-      <body><![CDATA[
-        this.square.style.backgroundColor = "#cf4"
-        this.square.style.marginLeft = "20em"
-        this.button.setAttribute("disabled", "true")
-        setTimeout(this.clearDemo, 2000, this)
-        ]]></body>
-      </method>
-
-    <method name="clearDemo">
-      <parameter name="me"/>
-      <body><![CDATA[
-        me.square.style.backgroundColor = "transparent"
-        me.square.style.marginLeft = "0"
-        me.button.removeAttribute("disabled")
-        ]]></body>
-      </method>
-
-    </implementation>
-
-  <handlers>
-    <handler event="click" button="0"><![CDATA[
-     if (event.originalTarget == this.button) this.doDemo()
-     ]]></handler>
-    </handlers>
-
-  </binding>
-
-</bindings>
-
-
-

Créez un nouveau fichier CSS, bind6.css. Cette feuille de style séparée contient le style pour la liaison. Copiez et collez-y le contenu ci-dessous :

-
- 
/*** Démonstration de XBL ***/
-[anonid="square"] {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  }
-
-[anonid="button"] {
-  margin-top: 1em;
-  padding: .5em 2em;"
-  }
-
-
-

Ouvrez le document dans votre navigateur et appuyez sur le bouton.

-

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 :

- - - - - - - -
- - - - - - -
-

Démonstration de XBL

-
-
-  
-
-
- 		- - - - - - -
-

Démonstration de XBL

-
-
-  
-
-
-
-

Remarques à propos de cette démonstration :

- - - - - - - - -
- Challenges
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. -

Utilisez l'inspecteur DOM pour examiner le document, afin de révéler le contenu ajouté.

-
-

Pour continuer

-

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 page de discussion.

-

Dans cette démonstration, le carré et le bouton forment un composant graphique ( - - widget - ) 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 : Interfaces utilisateur XUL.

-- cgit v1.2.3-54-g00ecf