F EUILLES DE STYLE CSS POUR LA REPRESENTATION GRAPHIQUE DES ZONES ET SECTEURS

3. TECHNOLOGIES UTILISEES

3.5 F EUILLES DE STYLE CSS POUR LA REPRESENTATION GRAPHIQUE DES ZONES ET SECTEURS

3.5.1 Présentation de CSS

Les CSS (Cascading Style Sheets) ont été initialement conçues pour le langage HTML. Elles

s’appliquent toutefois aussi bien aux documents XML, surtout en ce qui concerne CSS-2 (datant de 1998). La

syntaxe de CSS n’a rien à voir avec XML, mais elle est simple à apprendre et à utiliser. Une feuille CSS se base

également sur un ensemble de règles, dont le principe est le suivant : on définit un sélecteur, et on applique des

valeurs à certaines de ses propriétés. Par exemple, on peut formater un titre de la manière suivante :

titre {

font-weight : bold ;

font-size : 14pt ;

font-family : Garamond ;

font-style : normal

}

En incluant cette feuille à un document XML ou HTML, tous les éléments « titre » seront affichés en

gras, avec une taille de police de 14 points, etc.

Le langage SVG permet d’utiliser des feuilles de style CSS ou XSL pour mettre en forme les différents

objets utilisés. Cela dit, Adobe SVG Viewer ne permet pas d’utiliser directement XSL. Nous préférerons donc

nous concentrer ici sur CSS.

Les objets graphiques de SVG possèdent un attribut « class » qui indique au visualisateur qu’il doit leur

appliquer le style correspondant à cette classe. Par exemple, si on attache une feuille de style CSS avec la règle

.UA {stroke:rgb(0,0,0);fill:rgb(166,0,0)}

et si le document contient l’objet suivant :

Ce rectangle sera affiché avec une couleur de remplissage rouge sombre et un contour noir. On peut

aisément concevoir l’avantage que ces feuilles de style procurent pour créer une légende au document SVG du

P.O.S.

3.5.2 Légende automatique avec CSS

Notre carte du P.O.S. est constituée d’un ensemble de zones et de secteurs d’un type donné. C’est ce

type qui va déterminer la couleur utilisée pour le remplissage de chaque objet graphique. On peut réaliser cela

automatiquement en donnant ce type comme valeur de l’attribut « class » de chaque objet. Ensuite, la feuille de

style suivante permet de l’afficher avec la bonne couleur :

.NB {fill:rgb(215,200,10)} .ND {fill:rgb(50,160,45)} .INA {fill:rgb(250,175,165)} .IINA {fill:rgb(250,175,165)}

.UY {fill:rgb(130,25,135)} .ZI {fill:rgb(130,25,135)} .UC {fill:rgb(255,125,40)} .UB {fill:rgb(255,25,0)} .NC {fill:rgb(155,210,85)} .NBa {fill:rgb(215,200,10)} .NBb {fill:rgb(215,200,10)} .NDa {fill:rgb(50,160,45)} .NDc {fill:rgb(50,160,45)} .NDi {fill:rgb(50,160,45)} .UDa {fill:rgb(255,190,120)} .UAa {fill:rgb(166,0,0)} .UIa {fill:rgb(130,25,135)} .UIb {fill:rgb(130,25,135)} .UIc {fill:rgb(130,25,135)} .UIi {fill:rgb(130,25,135)} .UCa {fill:rgb(255,125,40)} .UBa {fill:rgb(255,25,0)} .IINAa {fill:rgb(250,175,165)} .IINAb {fill:rgb(250,175,165)} .INAa {fill:rgb(250,175,165)} .INAb {fill:rgb(250,175,165)} .INAL {fill:rgb(250,175,165)}

L’avantage est double. D’une part, on sépare l’aspect sémantique (le type de la zone) de l’aspect visuel

(sa représentation). D’autre part, on peut réutiliser cette feuille de style en l’associant également à la légende de

la carte. Les couleurs utilisées seront alors les mêmes. Si on désire ensuite changer la couleur des zones UA par

exemple, il suffit de modifier la feuille de style, et les couleurs seront modifiées dans la carte et dans la légende.

L’association d’une feuille de style se fait grâce à l’instruction suivante :

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

La légende sera ensuite constituée de rectangles de la couleur d’une zone et du texte correspondant.

</g>

La classe du rectangle détermine la couleur de remplissage utilisée.

Le schéma suivant positionne l’utilisation simultanée de CSS et XSL pour la constitution de l’arborescence et de

la légende dans la maquette :

CSS

Sémiologie POS

SVG

Données cartographiques

XML

Données règlementaires

XSL

Mise en page légende

SVG

HTML

XSL

arborescence

Figure 24 : Utilisation de CSS et XSL dans la maquette

3.5.3 Comparaison entre XSL et CSS

Même si XSL et CSS permettent de créer et d’utiliser des feuilles de style, ces deux langages sont très

différents dans leur principe. Les feuilles XSL seront utilisées de préférence lorsqu’on souhaite modifier la

structure même du document pour en créer une vue différente. Les feuilles CSS seront utilisées quant à elles

lorsque l’on souhaite simplement appliquer un style aux différentes parties du document.

Pour les documents SVG, l’utilisation des CSS pour appliquer un style aux éléments graphiques est

recommandée car cette opération est particulièrement simple. Toutefois, il est possible d’effectuer une

transformation XSLT sur le serveur qui aboutit au même résultat dans la maquette « client léger ». Nous ne le

recommandons pas en général car cela complique inutilement la mise en place de l’application et augmente

sensiblement le volume des données à télécharger. Dans certains cas (inclusion d’un fragment de document SVG

dans un autre document), il n’est pas possible d’utiliser une feuille de style CSS externe. Il est alors nécessaire

d’effectuer une transformation avec XSLT pour appliquer le style désiré. Cela dit, il existe souvent des moyens