Bert Bos,
coordinateur de l'activité styleCopyright © 1994–2023 W3C® Privacy policy
Créé le 29 février 2000 ;
Dernière mise à jour lun. 11 sept. 2023
17:40:54
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 lun. 11 sept. 2023
17:40:54