Bert Bos, coordinateur de l'activité styleCopyright © 1994–2025 W3C® Privacy policy
Créé le 29 février 2000 ;
Dernière mise à jour dim. 16 févr. 2025
05:41:09
Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi
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.
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.
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 ”
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é.)
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 :
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 ?
<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.
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.
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.
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.
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é styleCréé le 29 février 2000 ;
Dernière mise à jour dim. 16 févr. 2025
05:41:09