Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi

Comment ajouter du style à XML

Le document Recommandation CSS2 contient un bref tutoriel sur l'utilisation de CSS avec XML (voir § 2.2). Au moment où CSS2 a été écrit, la spécification officielle du style dans XML n'était pas prête. Voici ce que ce tutoriel aurait dû contenir. Notez que l'on utilise CSS dans les exemples, mais dans la plupart des cas, les règles de style peuvent également être écrites en XSL.

Feuilles de style externes

Astuce : Essayez-le dans votre navigateur

HTML a un élément link pour lier aux feuilles de style externes, mais tous les formats basés sur XML n'auront pas un tel élément. S'il n'y a pas d'élément approprié, vous pouvez toujours attacher des feuilles de style externes avec les instructions de traitement de xml-stylesheet comme ceci :

<?xml-stylesheet href="my-style.css"?>
... reste du document ici...

Cette instruction de traitement (PI) doit précéder la première balise du document. Le type="text/css" n'est pas nécessaire, mais il aide le navigateur : s'il ne supporte pas CSS, il sait qu'il n'aura pas à télécharger ce fichier.

Tout comme avec l'élément link de HTML, il peut y avoir plusieurs xml-stylesheet PI et ils peuvent avoir des attributs pour définir le type, le support et le titre.

Exemple

Voici un exemple plus complet. Supposons que nous ayons trois feuilles de style. Les deux dernières sont l'alternative l'une de l'autre, et le lecteur du document peut choisir laquelle des deux il veut utiliser. Sauf lorsque le document est imprimé, auquel cas nous ne voulons utiliser que le dernier style. Voici la feuille de style commun :

/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR,
PARA { display: block }

C'est l'un des styles alternatifs, dans un fichier appelé "modern.css" :

ARTICLE { font-family: sans-serif;
  background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right;
  margin-bottom: 2em }
PARA { line-height: 1.5;
  margin-left: 15% }
INSTRUMENT { color: blue }

Et voici l'autre, appelé "classic.css" :

ARTICLE { font-family: serif;
  background: white; color: #003 }
AUTHOR { font-size: large;
  margin: 1em 0 }
HEADLINE { font-size: x-large;
  margin-bottom: 1em }
PARA { text-indent: 1em;
  text-align: justify }
INSTRUMENT { font-style: italic }

Le document XML avec ces trois feuilles de style qui lui sont liées ressemble à ça :

<?xml-stylesheet href="common.css"?>
<?xml-stylesheet href="modern.css"
  title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css"
  alternate="yes" title="Classic"
  media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets
    Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was
    getting his
    <INSTRUMENT>flute</INSTRUMENT>
    ready and his musicians were
    assembled, an officer brought him a
    list of the strangers who had arrived.
  </PARA>
</ARTICLE>

Pour plus de détails, voir la recommandation du W3C “Associer des feuilles de style avec des documents XML ”

Feuilles de style intégrées

Astuce Essayez-le dans votre navigateur

HTML a un élément style qui permet d'intégrer la ou les feuilles de style directement dans le fichier HTML, sans avoir besoin d'un fichier externe. Dans certains cas, c'est plus facile, surtout lorsque la feuille de style est très spécifique à ce document.

La plupart des formats basés sur XML n'auront pas un tel élément, mais le même PI qui fait le lien vers les feuilles de style externes peut également être utilisé pour pointer vers les feuilles de style qui sont incorporées dans le document lui-même. En février 2006, il y avait encore des problèmes techniques à ce sujet et il n'existe aucune spécification officielle. Par exemple :

<?xml-stylesheet href="#style"
   type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA {
      display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Fredrick the Great meets
    Bach</HEADLINE>
  ...
</ARTICLE>

Dans ce cas, l'attribut type="text/css" doit être présent, sinon le navigateur (ou autre programme) doit deviner le langage de la feuille de style. Le PI du xml-stylesheet pointe maintenant non pas vers une feuille de style externe, mais vers un élément du document lui-même. Cet élément est identifié par un attribut id qui sert de cible au lien. (Selon le format XML particulier, l'attribut id peut avoir un autre nom ; dans certains formats, il se peut qu'il n'y ait pas du tout d'attribut approprié.)

Problèmes non résolus

La Recommandation W3C "Associer des feuilles de style à des documents XML" ne définit pas le cas des feuilles de style incorporées, bien qu'il semble raisonnable d'extrapoler pour permettre des fragments d'URL (en commençant par un "#"). A l'heure actuelle, début 2006, il y a encore des problèmes non résolus et il n'y a pas de spécification publiée. Les problèmes sont les suivants :

  1. Comme la feuille de style intégrée n'est pas téléchargée séparément depuis le serveur, le serveur ne peut pas indiquer au navigateur quel est le format de la feuille de style. En conséquence, dans ce cas l'attribut type est nécessaire. Ce qui se passe si l'attribut est omis n'est pas défini : la feuille de style est-elle ignorée ? Est-ce que l'on présuppose que c'est du CSS ? Y a-t-il un algorithme pour déterminer le langage ?
  2. Dans la plupart des formats XML, un identificateur de fragment identifie un élément complet et non le contenu d'un élément. Mais une feuille de style qui commence par <ARTICLE> n'est pas du CSS correct, il semble donc qu'il faille une règle supplémentaire selon laquelle un identificateur de fragment utilisé dans le PI d'une feuille de style pointe vers le contenu d'un élément, et non vers l'élément lui-même.
  3. De même, ce qui se passe s'il y a des éléments enfants à l'intérieur de l'élément désigné n'est pas défini. La feuille de style est-elle constituée de tous les contenus de tous les éléments concaténés ? Seulement des contenus du premier élément ? Ou s'agit-il d'une erreur et l'élément entier est-il ignoré ?
  4. Dans l'exemple ci-dessus, l'URL pointe vers le document lui-même. Le fait que le navigateur soit capable de regarder cette URL indique qu'il sait comment analyser XML et qu'il est probablement capable de trouver l'élément de style indiqué. Mais considérez maintenant une URL qui pointe vers un fragment d'un document externe . Afin de récupérer avec succès la feuille de style, le navigateur doit d'abord télécharger et analyser le document externe, puis extraire et parser la feuille de style. Mais l'attribut type ne donne que le type de l'un des deux et le navigateur ne peut donc pas savoir s'il est capable d'utiliser la feuille de style. On ne sait pas précisément si les attributs type donnent le type du document externe ou celui de la feuille de style qui y est intégrée.

Autres problèmes

  1. Le PI de style est plus utile avec "XML générique", c'est-à-dire avec XML dans un format que le navigateur ne connaît pas. Grâce à la feuille de style, il pourra au moins afficher quelque chose. Les formats bien connus, tels que SVG, SMIL ou XHTML, ont leurs propres règles de rendu qui vont au-delà de ce qu'une feuille de style peut spécifier. Mais il y a d'autres choses qu'un navigateur ne sait pas quand le document est traité en tant que XML générique : en particulier, il ne sait pas quels attributs sont des attributs ID. Il existe une Recommandation W3C pour un attribut appelé xml:id et si le document contient des attributs de ce nom, c'est qu'il est très probable que le fragment d'URL pointe vers l'un d'entre eux. Mais s'il n'y a pas de tels attributs, le navigateur doit essayer de déterminer quels attributs sont des ID par d'autres moyens. Si le document a un DOCTYPE en haut et que le navigateur est capable de récupérer la DTD vers laquelle il pointe, cette DTD spécifie l'attribut. Mais il se peut que les navigateurs ne puissent pas lire les DTD ou qu'il n'y ait pas de DOCTYPE.
  2. Un fragment ID n'est qu'un des moyens de pointer vers un élément dans un document. Une autre Recommandation W3C définit XPointers pour identifier les éléments d'un document sans avoir besoin d'attributs ID. Mais la compréhension des XPointers n'est actuellement pas une exigence pour les navigateurs utilisant le PI style et il n'est donc pas précisé si les navigateurs interprètent les XPointers s'ils le peuvent ou s'ils doivent les ignorer.

Styles en ligne

HTML permet également d'attacher les styles directement aux éléments individuels au moyen de l'attribut style. La plupart documents au format XML n'auront pas un tel attribut, bien que certains puissent permettre l'utilisation de fonctionnalités (modules) HTML à l'intérieur du document.

Attributs de classe

Astuce : Essayez-le dans votre navigateur

L'attribut class qui vous permet de créer des sous-classes d'éléments en HTML n'est pas non plus susceptible d'être disponible dans la majorité des formats de documents XML. Bien sûr, CSS vous permet de sélectionner des éléments basés sur n'importe quel attribut, pas seulement la classe, mais alors la syntaxe est moins commode.

Voici un exemple. S'il y a un attribut de classe et que le format du document définit qu'il fonctionne comme en HTML, on peut utiliser la notation avec le point. (Par conséquent, cet exemple particulier ne fonctionnera pas, car <doc>n'est pas un format que les navigateurs reconnaissent comme quelque chose ayant une classe)

<?xml-stylesheet href="#s1"
   type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

Si le format du document ne spécifie pas que classe crée une sous-classe, alors vous devrez utiliser les sélecteurs plus longs avec "[ ]" :

<?xml-stylesheet href="#s1"
  type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

S'il n'y a pas d'attribut classe , mais si quelque chose d'autre peut être utilisé, les sélecteurs d'attributs "[ ]" peuvent toujours s'appliquer :

Essayez-le dans votre navigateur

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Some text... </p>
  <p warning="yes">A note... </p>
</doc>
Bert Bos, coordinateur de l'activité style
Copyright © 1994–2018 W3C®

Créé le 29 février 2000 ;
Dernière mise à jour jeu. 10 mai 2018 03:41:04 UTC

Langues

À propos des traductions