Introduction à XML: Le langage XSL (Xml Style-sheet Language)

Les feuilles de style (CSS, XSL (Xml Style-sheet Language))

pour faire référence à une feuille de style, un document XML doit contenir l'élément suivant:

<?xml-stylesheet href="URLFichierStyle.xsl" type="text/xsl"?>

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

CSS

L'utilisation de feuilles de style CSS se fait de manière très similaire à HTML, si ce n'est qu'il faut systématiquement spécifier la propriété "display" pour qu'un élément soit affiché et que la référence à des balises HTML doit tenir compte du préfixe utilisé dans la référence à l'espace de nom HTML. Exemple:

html\:body { background-color: rgb(255, 230, 230) }
article { display: block; font-family:helvetica,sans-serif; background-color: rgb(230, 230, 255) }
titre { display: block; font-size: 200%; text-align: center; border-width: medium; border-style: groove }
auteur { display: block; font-size: 80%; font-weight: bold }
date { display: inline; font-size: 80%; font-style: italic }
lieu { display: inline; font-size: 80%; font-weight: bold }
texte { display: block }
grand { display: inline; font-variant: small-caps; font-size: 120%; font-weight: bold }
image { display: block; border-width: thin; text-align: center; border-style: solid; }
legende { display: block; text-align: center; padding-right: 2mm; padding-top: 2mm; padding-bottom: 2mm; padding-left: 2mm }

document XML (code XML correspondant) - code de la feuille de style - code de la DTD

Il faut toutefois noter que l'affichage des éléments va se faire dans l'ordre exact dans lequel ils apparaissent dans le document XML. C'est malgré tout une solution qui est actuellement supportées par beaucoup de butineurs de version récente.

Autre exemple, impliquant une mise en page de données répétitives dans un tableau: supposons que nous devions afficher un document du genre:

<listeCD>
<cd>
<nom>100 Masterpieces, vol. 5</nom>
<piste>
<num>1</num>
<titre>Fidelio, ouverture</titre>
<interprete>Budapest Symphony Orchestra</interprete>
<compositeur>Beethoven</compositeur>
<duree>6:20</duree>
</piste>
...
</cd>
<cd>
...
</cd>
</listeCD>

La feuille de style CSS2 correspondante pourrait être:

listeCD { display: block; }
cd { display: table; border-style: solid; padding: 3px; border-color: rgb(255,0,0); }
nom { display: table-caption; background-color: rgb(0,0,255); color: rgb(255,255,0); }
piste { display: table-row; }
num { display: table-cell; }
titre { display: table-cell; }
interprete { display: table-cell; }
compositeur { display: table-cell; }
duree { display: table-cell; }

document XML (code XML correspondant) - code de la feuille de style (ne marche pas avec IE5, assez bien avec Opera et parfaitement avec Mozilla).

XSL

XSL, comporte deux parties: XSLT, qui permet de stipuler des transformations à appliquer au contenu du document pour en faire quelque chose d'affichable (par exemple pour transformer le code XML en code HTML ou Postscript) et XSL-fo, qui permet de stipuler la mise en page de ce qui aura été produit par XSLT.

XSLT

Un document XML peut être vu comme une structure arborescente. Par exemple la structure de l'élément article que nous avons déjà pris pour exemple pourrait être représenté ainsi:

titrecaractères

auteurcaractères

datecaractères

lieucaractères

article texte caractères

grandcaractères

caractères

image img == @srccaractères

legendecaractères

caractères

XSLT permet d'appliquer des transformations à cette structure pour obtenir une nouvelle structure dont le contenu serait basé sur la première mais qui reflêterait, par exemple, la syntaxe d'un document HTML.

Pour utiliser XSLT, un document XML doit faire référence à l'espace de noms correspondant:

xmlns:xslt="http://www.w3.org/1999/XSL/Transform"

Pour produire du HTML à partir d'un document XML, deux approches sont possibles:

si les données XML sont très répétitives, comme dans notre exemple de liste de disques CD, on peut fournir une "armature" HTML dans laquelle certaines parties seront remplacées par des informations provenant des données XML. Conceptuellement cela donne quelque chose du genre:
<html xslt:version="1.0"
xmlns:xslt="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/TR/xhtml1/strict" >
<head>
<title>Ma liste de CD</title>
</head>
<body>
<h1>Ma liste de CD</h1>
<xslt:for-each select="listeCD/cd">
<h2><xslt:value-of select="nom" /></h2>
<table border="1">
<tr><th>piste</th> <th>titre</th> <th>interprète</th> <th>compositeur</th> <th>durée</th></tr>
<xslt:for-each select="piste">
<tr>
<td><xslt:value-of select="num" /></td>
    <td><xslt:value-of select="titre" /></td>
<td><xslt:value-of select="interprete" /></td>
    <td><xslt:value-of select="compositeur" /></td>
    <td><xslt:value-of select="duree" /></td>
</tr>
  </xslt:for-each>
</table>
</xslt:for-each>
</body>
</html>
document XML (code XML correspondant) - code de la feuille de style XSL
si les données XML sont peu répétitives, comme dans notre exemple de l'article, on va plutôt donner un ensemble de règles ponctuelles (fragment d'armature) traitant une partie du document XML. Chaque partie indiquera comment cette partie devra être remplacée par un fragment HTML. Conceptuellement cela donne quelque chose du genre:
<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/TR/xhtml1/strict" >
<xsl:template match="/">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Ex8.css" />
<title><xsl:value-of select="article/titre" /></title>
</head>
<body>
<h1><xsl:value-of select="article/titre" /></h1>
<p><strong><xsl:value-of select="article/auteur" /></strong><br />
<em><xsl:value-of select="article/date" /></em>
<strong><xsl:value-of select="article/lieu" /></strong>
</p>
<xsl:apply-templates select="article/texte" />
</body>
</html>
</xsl:template>

<xsl:template match="texte">
<p>
<xsl:apply-templates />
</xsl:template>

<xsl:template match="img">
<xsl:element name="img">
<xsl:attribute name="src"><xsl:value-of select="@src" />
</xsl:attribute>
</xsl:element>
</xsl:template>

<xsl:template match="image">
</p>
<p class="cadre">
<xsl:apply-templates />
</p>
<p>
</xsl:template>

<xsl:template match="legende">
<br /><xsl:value-of />
</xsl:template>

<xsl:template match="grand">
<span class="grand"><xsl:value-of /></span>
</xsl:template>

<xsl:template match="lien">
<a href="{@xlink:href}"><xsl:value-of /></a>
</xsl:template>

<xsl:template match="text()">
<xsl:value-of />
</xsl:template>
document XML (code XML correspondant) - code de la feuille de style XSL- code de la feuille de style CSS

Récapitulation des éléments de base de la syntaxe XSLT

site feuilles de style du W3C
eXtensible Stylesheet Language
XSL Transformations (XSLT) - copie locale de la version 1.1 du 12.12.2000
XML Path Language (XPath) - copie locale du 16.11.1999
Understanding XSL, par Norman Walsh
XSL Considered Harmful partie 1 et partie 2, par Michael Leventhal
Formatting Objects considered harmful, par Håkon W Lie
site Microsoft: XSL Developer's Guide
Liste de ressources de xml.about.com sur l'utilisation de CSS avec XML
Liste de ressources de xml.about.com sur l'utilisation de XSL avec XML
Tableau récapitulatif du support CSS2 dans les principaux butineurs
Rescuing XSLT from Niche Status, par David Jacobs
XSLT tutorial, par Roger L. Costello

	titrecaractères
	auteurcaractères
	datecaractères
	lieucaractères

article	texte	caractères
		grandcaractères
		caractères
		image	img == @srccaractères
			legendecaractères
		caractères

Introduction à XML - Université de Genève, CUI ©

Les feuilles de style (CSS, XSL (Xml Style-sheet Language))

CSS

XSL

XSLT