XML : Utilisation des CSS

Les CSS (Cascading Style Sheet - Feuilles de style en cascade) vont permettre de déterminer la manière d'afficher des documents XML.

Voir également ma page CSS avec HTML.

Affichage d'un document XML par défaut

Le simple fait de préciser une feuille de style dans l'en-tête suffit à modifier l'affichage dans Internet Explorer. Soit le fichier meslogiciels.xml :

<LOGITHEQUE>
  <Logiciel>
    <Nom>Outlook</Nom>
    <Version>XP</Version>
    <Editeur>Microsoft</Editeur>
  </Logiciel>
  <Logiciel>
    <Nom>Word</Nom>
    <Version>2003</Version>
    <Editeur>Microsoft</Editeur>
  </Logiciel>
</LOGITHEQUE>

Va s'afficher de cette façon dans Internet Explorer :

Ajout d'une ligne d'en-tête simple

Le simple fait de rajouter cette ligne en haut du fichier meslogiciels.xml:

<?xml-stylesheet type="text/css" href="truc.css"?>
<LOGITHEQUE>
  <Logiciel>
    <Nom>Outlook</Nom>
    <Version>XP</Version>
    <Editeur>Microsoft</Editeur>
  </Logiciel>
  <Logiciel>
    <Nom>Word</Nom>
    <Version>2003</Version>
    <Editeur>Microsoft</Editeur>
  </Logiciel>
</LOGITHEQUE>

suffit à radicalement modifier l'affichage dans Internet Explorer. Le fait que truc.css existe ou pas n'a aucune importance. D'ailleurs la ligne suivante provoquerait le même effet :

<?xml-stylesheet type="text/css"?>

Voici l'affichage dans Internet Explorer :

Outlook XP Microsoft Word 2003 Microsoft

Soit l'affichage de tous les éléments du fichier XML l'un à côté de l'autre, séparés par un simple espace.

Paramètres invisibles

Les paramètres ne sont tout à coup plus affichés. Par exemple :

<?xml-stylesheet type="text/css"?>
<LOGITHEQUE>
  <Logiciel Nom="Outlook">
    <Version>XP</Version>
    <Editeur>Microsoft</Editeur>
  </Logiciel>
</LOGITHEQUE>

Affichera :

XP Microsoft

Utilisation d'un réel fichier CSS

Sauter une ligne à la fin de chaque élément

L'idée est donc de ne pas simplement afficher les éléments tels quels, mais de préciser comment les données vont être affichées. Aussi, nous allons vraiment créer un document CSS. créons le document modele.css avec le contenu suivant :

Logiciel {display:block}

Ca veut dire que pour l'élément Logiciel, il faudra l'afficher comme un bloc, c'est à dire simplement placer un saut de ligne à la fin.

Chaque sous-balise définie en display:block apparaîtra sur une ligne a part : il y a un saut de ligne avant et après en quelque sorte :

<?xml-stylesheet type="text/css" href="clientmodele.css"?>
  <Client>
    <Coordonnee>
      <Nom>Muller</Nom>
      <Prenom>Michel</Prenom>
      <Adresse>Route du Cacatoes 18</Adresse>
      <CodePostal>75000</CodePostal>
      <Ville>Paris</Ville>
      <Pays>France</Pays>
    </Coordonnee>
    <Coordonnee>
      <Nom>Bonpied</Nom>
      <Prenom>Alexandre</Prenom>
      <Adresse>Place Vendôme 33</Adresse>
      <CodePostal>1234</CodePostal>
      <Ville>Bumplitz</Ville>
    <Pays>Suisse</Pays>
    </Coordonnee>
  </Client>

et clientmodele.css :

Coordonnee {display:block;}
Adresse {display:block;}

Tout l'ensemble Coordonnee sera dont encadre d'un saut de ligne avant et après (sauf pour le premier, il n'y a pas d'affichage de ligne vide avant), mais en plus, la ligne d'adresse sera sur une ligne a part, ce qui donnera le résultat suivant :

Muller Michel
Route du Cacatoes 18
75000 Paris France
Bonpied Alexandre
Place Vendôme 33
1234 Bumplitz Suisse

Revons à meslogiciels.xml. Corrigeons le fichier meslogiciels.xml comme ceci :

<?xml-stylesheet type="text/css" href="modele.css"?>
<LOGITHEQUE>
  <Logiciel>
    <Nom>Outlook</Nom>
    <Version>XP</Version>
    <Editeur>Microsoft</Editeur>
  </Logiciel>
  <Logiciel>
    <Nom>Word</Nom>
    <Version>2003</Version>
    <Editeur>Microsoft</Editeur>
  </Logiciel>
</LOGITHEQUE>

Maintenant, voici comment meslogiciels.xml va s'afficher dans Internet Explorer :

Outlook XP Microsoft
Word 2003 Microsoft

Affichage en plus gros

Admettons que nous voulions, en plus, afficher le résultat avec une police de caractères de taille 20 par exemple. Modifionc modele.css :

Logiciel {display:block; font-size:16pt}

Ou plutôt de manière plus structurée (le résultat sera le même) :

Logiciel {
        display   : block;
         font-size : 16pt
         }

Voici le résultat dans Internet Explorer :

Outlook XP Microsoft
Word 2003 Microsoft

Redéfinitions des propriétés

Il est possible de redéfinir les propriétés pour les éléments imbriqués. Par exemple :

Logiciel {
         display : block;
         font-size : 16pt
         }
Editeur {
         font-size : 8pt
         }

Va donner ce résultat :

Outlook XP Microsoft
Word 2003 Microsoft

Propriétés de l'élément racine

Pour créer une ou plusieurs propriétés globales à tout le document XML, on peut définir l'élément racine, ici LOGITHEQUE.

Soit le fichier XML :

<?xml-stylesheet type="text/css" href="modele.css"?>
<LOGITHEQUE>
  <Logiciel>
    <Nom>Outlook</Nom>
  </Logiciel>
  <Logiciel>
    <Nom>Word</Nom>
  </Logiciel>
</LOGITHEQUE>

Si nous désirons afficher la totalité en rouge, mais avec un saut de ligne entre chaque Logiciel, une solution élégante serait :

LOGITHEQUE {color:red}
Logiciel {display:block}

Résultat

Outlook
Word

Ajout de propriétés

Il est aussi possible d'ajouter un propriété. Dans l'exemple qui suit, la version va en plus de s'afficher en 16 points, s'afficher en italique :

Logiciel {
         display : block;
         font-size : 16pt
         }
Editeur {
         font-style : italic
         }

Va donner :

Outlook XP Microsoft
Word 2003 Microsoft

Attributs courants pour les CSS

color

Précise la couleur. Les valeurs possibles sont :

Les valeurs hexadécimales s'échelonnent entre #000000 (0) et #FFFFFF (255). On peut ainsi attribuer une valeur qui n'existe pas dans le tableau, comme dans l'exemple suivant :

Logiciel {
         color : Red
         }
Version {
         color:#1234F5
         }

font-family

Précise la police de caractère à afficher. Comme on ne sait pas forcément quelles sont les polices installées chez le visiteur, il est possible de préciser plusieurs polices de caractères les unes après les autres, la première disponible sera utilisée :

Dans ce cas : la police Zurglon n'existe chez personne, Impact n'existe pas chez le visiteur, la dernière sera utilisée. Si elle n'existe pas non plus, la police par défaut sera utilisée (dépend de la configuration du visiteur)

Logiciel {
font-family : impact, comic sans ms, courier new
}

font-size

Précise la taille de la police. Les tailles disponibles sont :

smaller
xx-small
x-small
small
medium (par défaut)
large
x-large
xx-large
larger
(ou taille spécifiée avec l'unité en pixel (px), cm (cm), mm (mm), point (pt), pourcentage (%))

Exemple :

Logiciel {
font-size : small
}

font-style

Veut-on de l'italique ? Les valeurs sont :

normal (par défaut)
italic
oblique

(je n'ai pas perçu la différence entre italic et oblique)

Exemple :

Logiciel {
font-style : italic
}

font-weight

Quelle épaisseur veut-on (Mince, gras, très gras...) ?

Les valeurs sont du plus mince au plus gras :

lighter
light
normal (par défaut)
bold
bolder
(ou valeur en points de 100 à 900 )

En fait, d'après mes tests, si on garde la police par défaut, il y a soit normal (Lighter, Light ou normal) OU Gras (Bold, bolder). Je pense que c'est seulement avec certaines polices de caractères prévues pour autant de nuances que ces paramètres s'appliquent correctement. A mon avis, la nuance entre Italic et Oblique est sujette au même commentaire.

Exemple

Logiciel {
font-weight : bolder
}

letter-spacing

Il s'agit de l'écartement entre les lettres. Ce paramètre accepte toutes les valeurs : une valeur négative va compresser les lettres, et une valeur positive va écarter les lettres. Comme on peut mettre n'importe quelle valeur, voici quelques exemples :

moins de -2 : trop étroit
-2 : les lettres sont très très compressées, c'est à mon avis la valeur la plus basse possible pour que le texte reste lisible
0 : C'est la valeur par défaut : inutile de le préciser
2 : Assez large, donne un aspect assez élégant
5 : Vraiment large, mais l'aspect est aussi assez élégant
10 : Encore lisible, toujours élégant
20 : Les utilisations sont limitées : peut être pour les titres
plus de 20 : trop large

Exemple

Logiciel {
letter-spacing : 7
}

margin-left

Précise la marge de gauche. Précisez la valeur en pixels ou en pourcentage. L'avantage de préciser en pourcentage est que les proportions sont respectées : en effet, une marge de 50 pixels n'aura pas le même impact visuel sur un écran de 1600 X 1200 pixels que sur un écran de 640 par 400...

Exemples :

Affichage à 50 pixels du bord gauche de l'écran :

Logiciel {
margin-left : 50
}

Affichage à partir du milieu de l'écran :

Logiciel {
margin-left : 50%
}

Il existe également :

margin-right | margin-top | margin-bottom

text-indent

Ce paramètre ressemble assez à margin-left, mais seulement pour la première ligne. En fait, cette propriété n'est intéressanter que dans le cas d'un texte qui se répand sur plusieurs lignes tellement il est long. Tout comme dans une lettre traditionnelle, il peut être aasez joli de mettre en retrait la première ligne de chaque paragraphe. En fait, on peut soit mettre cette première ligne en retrait plus à gauche ou plus à droite par rapport aux autres lignes de ce paragraphe : ça dépend des goûts.

On peut indiquer la valeur en pourcentage ou en pixels.

Quelques exemples :

-20 : la première ligne est tout à gauche, et les autres lignes 20 pixels plus à droite
0 : par défaut : toutes les lignes seront à gauche
+ 20 % : La première ligne sera décalée de 20% plus à droite sur votre écran que les autres lignes du paragraphe qui resteront collées à gauche

Exemple :

Logiciel {
text-indent : -12%
}

text-align

Alignement du texte : gauche, centré ou droite

Valeurs :

left
center
right

Exemple :

Logiciel {
text-align : center
}

Attention : bien que ce soit logique, il est bien de le préciser : on ne peut PAS redéfinir cette valeur pour un sous ensemble, comme ceci :

Logiciel {
         display:block;
         text-align:center;
         }
Version {
         text-align:right;
         }

Il n'y aura pas d'erreur, mais tout sera centré.

text-decoration

Il s'agit du soulignement. on peut souligner/surligner/barrer, comme ceci :

line-through (barré)
none (rien : par défaut)
overline (surligné)
underline (souligné)

Exemple :

Logiciel {
         display:block;
         text-decoration:line-through;
         }

Attention : le soulignement est normalement le standard defacto pour les liens hypertexte. Aussi, si vous soulignez du texte non-clicable, vous risquez de troubler vos visiteurs.

text-transform

Permet de changer la casse du texte. Voici les valeurs possible :

capitalize (met la 1ère lettre de chaque mot en majuscule)
lowercase (transforme tout le texte en minuscule)
none (ne change rien : par défaut)
uppercase (transforme tout le texte en majuscule)

Exemple :

Logiciel {
         display:block;
         text-transform:uppercase;
         }

Propriétés de tableau

Il reste encore quelques proporiuétés de tableau:

background-image
border-color
line-height

Utilisation de caractères spéciaux avec CDATA

Comme il est interdit d'utiliser les catactères &, <, > notamment, il est possible de les utiliser quand même grâce à CDATA. Ce fichier va donner une erreur dans Internet Explorer :

<?xml-stylesheet type="text/css"?>
  <Client>
    <Coordonnee>
    <Nom>Dupont</Nom>
    <LivrePrefere>
      Je suis un <papillon> rouge & bleu
    </LivrePrefere>
    <Prenom>Michel</Prenom>
    </Coordonnee>
  </Client>

Résultat :

Dupont Je suis un La page XML ne peut pas être affichée
Impossible d'afficher l'entrée XML en utilisant la feuille de style CSS. Corrigez l'erreur, puis cliquez sur le bouton Actualiser ou réessayez ultérieurement.
--------------------------------------------------------------------------------
Aucun espace blanc n'est autorisé à cet emplacement. Erreur de traitement de la ressource file:///D:/Atelier/XML/client2.xml. Ligne 6, Position 36
Je suis un <papillon> rouge & bleu
-----------------------------^

Tandis que celui ci va fonctionner sans erreur :

<?xml-stylesheet type="text/css"?>
  <Client>
    <Coordonnee>
    <Nom>Dupont</Nom>
    <LivrePrefere>
      <![CDATA[
              Je suis un <papillon> rouge & bleu
              ]]>
    </LivrePrefere>
    <Prenom>Michel</Prenom>
    </Coordonnee>
  </Client>

Résultat :

Dupont Je suis un <papillon> rouge & bleu Michel

Voilà... Avec l'extrême exception : dans un CDATA, on ne peut pas avoir la chaîne ]]> mais évidemment, c'est un peu tordu :-)

Cette astuce est intéressante pour carrément afficher des balises HTML, comme ceci par exemple :

<?xml-stylesheet type="text/css"?>
  <Client>
    <Entete>
      <![CDATA[<HTML><body>]]>
    </Entete>
    <Coordonnee>
      <Nom>Dupont</Nom>
      <Prenom>Michel</Prenom>
    </Coordonnee>
    <Fin>
      <![CDATA[</body></HTML>]]>
    </Fin>
  </Client>

Va afficher :

<HTML><body> Dupont Michel </body></HTML>

Donc il va carrément afficher les Tags HTML et BODY au lieu de les interpréter simplement parce que c'est un fichier XML je suppose.

...