Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
dossier cerig.efpg.inpg.fr 
Vous êtes ici : Accueil > La technique > Internet et le Web > Les feuilles de style > L'intérêt des feuilles de style           Révision : 24 août 2004
Page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(14 janvier 2004)

II - L'intérêt des feuilles de style

II-1- Les nouveautés dans la présentation

Les feuilles de style ont rendu possible des détails de présentation que le seul HTML ne permettait pas de réaliser. Cela ne révolutionne pas le Web, mais ce peut être agréable à utiliser quand le besoin s'en fait sentir. Nous pouvons citer :

 

II-2- L'allègement du code

Supposons que, dans une page Web, de nombreux paragraphes (ou de nombreuses cellules de tableau) possèdent le même style. Une feuille de style permet de définir ce dernier une seule fois dans la page, et de le réutiliser chaque fois que cela est nécessaire.

A titre d'exemple, considérons une liste de liens hypertextes structurée grâce à un tableau non visible, comme représenté ci-dessous :

ABC Draguignan 83 Prépresse, Impression jpsastrel@imprimerie-abc.com 04/06/01
ABC Compo Suresnes 92 Compogravure contact@digiserv.com 27/06/00
Abribat Toulouse 31 Offset feuilles et continu, Façonnage abribat.imprimerie@wanadoo.fr 01/09/00
Absolu Fresnes 94 Prépresse, Offset, Impression Numérique info@absolu.net 01/09/01
Acaps Clamart 92 Impression numérique, Offset, Sérigraphie webmaster@acaps.com 18/02/03
Accent Imprimerie Cagnes sur Mer 06 Offset, Finition Façonnage - 18/02/03
etc.          

Nous pouvons définir la table en HTML pur et dur, sans utiliser de style, en écrivant le code suivant :

<table cellspacing="0" cellpadding="3" bgcolor="#FAFADC" border="0">
<tr>
<td valign="top"><font face="Arial" size="2"><a href="http://www.imprimerie-abc.com">ABC</a></td>
<td align="center" valign="top"><font face="Arial" size="1" color="#E12805">Draguignan</td>
<td align="center" valign="top"><font face="Arial" size="2" color="#008000">83</td>
<td align="center" valign="top"><font face="Arial" size="1">Prépresse, Impression</td>
<td align="center" valign="top"><font face="Arial" size="1"><a href="mailto:jpsastrel@imprimerie-abc.com">jpsastrel@imprimerie-abc.com</a></td>
<td valign="top"><font face="Arial" size="1">04/06/01</td>
<tr>
etc...

Pour alléger le poids de la page, nous pouvons utiliser une feuille de style, que nous plaçons dans l'en-tête de la page Web :

<style>
td.A { font-family: arial; font-size: 10pt; vertical-align: top }
td.B { font-family: arial; font-size: 8pt; color: #E12805; text-align: center; vertical-align: top }
td.C { font-family: arial; font-size: 10pt; color: #008000; text-align: center; vertical-align: top }
td.D { font-family: arial; font-size: 8pt; text-align: center; vertical-align: top }
td.E { font-family: arial; font-size: 8pt; vertical-align: top }
</style>

Cette feuille exprime le fait que, dans toutes les cellules (td) repérées par le code A (code appelé "classe"), le texte est disposé dans le haut de la cellule, et qu'il utilise la police Arial de corps 10 -- et ainsi de suite pour les autres codes B, C, D et E. Pour utiliser cette feuille, nous modifions comme suit le code HTML :

<table cellspacing="0" cellpadding="3" bgcolor="#FAFADC" border="0">
<tr>
<td class="A"><a href="http://www.imprimerie-abc.com" target="_blank">ABC</a></td>
<td class="B">Draguignan</td>
<td class="C">83</td>
<td class="D">Prépresse, Impression</td>
<td class="D"><a href="mailto:jpsastrel@imprimerie-abc.com">jpsastrel@imprimerie-abc.com</a></td>
<td class="E">04/06/01</td>
</tr>
etc...

Pour une ligne de la liste de liens qui nous sert d'exemple, la feuille de style nous fait économiser 265 caractères. Si notre liste comporte 58 lignes, notre fichier se trouve allégé de 14,6 Ko (poids du style inclus pour 439 octets). Pour un internaute relié à Internet via un modem, le temps de téléchargement se trouve réduit de plusieurs secondes, ce qui n'est pas négligeable. Cet exemple correspond à un cas réel, qui peut être consulté sur ce site.

 

II-3- La maintenance facilitée

Nous voyons sur cet exemple que nous avons été amenés à séparer :

Supposons que nous estimions que la couleur rouge utilisée pour écrire le nom des villes n'est pas esthétique, ou qu'elle ne fournit pas un contraste suffisant pour faciliter la lecture ; il nous est très facile d'en changer. Pour obtenir un rouge plus foncé, nous modifions la feuille de style de la manière suivante :

<style>
.....................
td.B { font-family: arial; font-size: 8pt; color: #771402; text-align: center; vertical-align: top }
.....................
</style>

Nous obtenons ainsi une couleur de texte tirant plus sur le marron que sur le rouge (le marron est du rouge additionné de noir), comme le montre cette portion de phrase. En l'absence de feuille de style, nous aurions dû corriger l'indication de couleur ligne par ligne, c'est à dire 58 fois. Si la même feuille de style est utilisée par plusieurs pages Web (elle est alors placée dans un fichier séparé), la modification d'une seule de ses lignes peut remplacer des centaines ou des milliers de corrections individuelles.

Ceci dit, on a beaucoup exagéré l'intérêt d'une telle possibilité. Quand la maquette d'une page Web est acceptée par le client, on ne la modifie généralement plus. Sauf pour des clients particulièrement difficiles... ou versatiles.

 

II-4- Le remplacement des tableaux invisibles ("Tableless")

Les tableaux invisibles (ceux dont la bordure possède une largeur nulle) sont très utilisés pour organiser la structure des pages Web. Dans le courant de l'année 2002, le W3C a conseillé aux concepteurs d'abandonner cette technique au profit du positionnement par feuilles de style, au motif que l'usage des tableaux invisibles "... va à l'encontre de la sémantique du HTML". Cette façon de procéder a été baptisée "tableless", et ses avantages et inconvénients font l'objet de discussions passionnées sur le Web.

Notre point de vue personnel sur le remplacement des tableaux invisibles est beaucoup plus terre à terre que celui du W3C. Nous pouvons le résumer ainsi :

Dans les cas simples, comme le réglage des marges et des distances entre paragraphes dans une page de texte, nous donnons sans hésiter une réponse positive aux deux questions précédentes. Nous avons utilisé le troisième paragraphe de l'introduction du présent dossier pour créer deux pages Web : la première est structurée via les feuilles de style, la seconde via les tableaux invisibles (ces pages s'ouvrent dans une nouvelle fenêtre). Leurs fichiers pèsent respectivement 2056 et 2642 octets. L'usage des feuilles de style fait donc gagner 586 octets, ce qui représente plus de 2Ko pour une page Web comportant quatre paragraphes d'une taille similaire. C'est bon à prendre, étant donné que dans ce cas simple, le positionnement via les feuilles de style ne pose pas de problème particulier (hormis le centrage horizontal dans le navigateur de Netscape).

Ce cas simple mis à part, le positionnement via les feuilles de style est difficile à pratiquer. La complexité augmente quand on passe d'une mise en page fixe à une mise en page proportionnelle, et pire encore à un mélange des deux. En pratique, les exemples de positionnement CSS que l'on trouve sur le Web atteignent péniblement le stade des trois colonnes, et faire en sorte que tout s'affiche normalement dans les deux navigateurs et sur les deux plates-formes est possible, mais difficile (il existe un très bel exemple). Il est clair que les feuilles de style sont plus orientées vers la présentation que vers la mise en page, et qu'il faut laisser cette dernière aux bons soins du HTML -- d'autant plus que les deux navigateurs n'implémentent pas toujours les feuilles de style de la même façon.

Les avantages des tableaux peuvent se résumer ainsi :

Il en résulte que les webmestres ont fait leur choix. Il suffit d'éditer le source des pages que l'on trouve sur le Web pour s'apercevoir que l'usage des tableaux invisibles reste quasi universel, alors même que l'usage des feuilles de style se banalise. Le point de vue de la grande majorité des concepteurs de sites peut se résumer ainsi :

En bref : le contenu est roi / la technique doit se faire oublier / les conseils des gourous sont bons pour la poubelle / on ne le répétera jamais assez.

 

II-5- Des effets sans code JavaScript ?

JavaScript est un langage de script (c'est à dire un langage utilisé pour écrire de petits programmes) fonctionnant côté client. Son code est incorporé à la page HTML, et il est interprété puis exécuté par le navigateur. Ce langage est utilisé pour :

Pour des raisons historiques, il existe plusieurs dialectes du langage JavaScript : celui de son créateur (Netscape), celui de Microsoft (bien sûr !), et une version normalisée. De plus, le langage a évolué au cours du temps. Enfin, un nombre croissant d'internautes, désireux d'éviter les popups, désactivent l'interpréteur JavaScript avant de naviguer. Il en résulte qu'on n'est jamais sûr que le script incorporé à une page Web soit effectivement exécuté sur la machine de l'internaute.

Au code de leur script proprement dit, les concepteurs les plus consciencieux rajoutent (ou font rajouter par leur éditeur de page HTML) du code supplémentaire destiné à déterminer le type de navigateur utilisé par l'internaute (NS ou IE), et la version dudit navigateur. A chacun des cas envisagés correspond une version appropriée du script. Il en résulte que, pour obtenir un modeste effet de rollover, on surcharge la page Web de plusieurs Ko de code, sinon plus. Certains concepteurs de sites Web ont donc cherché une solution de remplacement. Leur idée était que, si les feuilles de style ne peuvent pas se substituer à un langage de script dans le cas général, elles peuvent peut-être rendre un service comparable dans quelques cas particuliers.

Un premier type d'exemple que l'on rencontre sur le Web concerne l'effet de rollover obtenu quand on survole un lien hypertexte. Nous l'utilisons nous-mêmes pour les barres de navigation qui se trouvent en haut et en bas de cette page ; le survol du lien par le curseur change la casse du texte, qui s'écrit alors en petites majuscules -- c'est juste un amusement. Le style correspondant s'écrit :

a { text-decoration: none }
a.AA:hover { font-weight: bold; font-variant: small-caps }

La première ligne de ce style indique que les liens hypertexte ne doivent pas être soulignés. La seconde ligne indique que, si un lien de classe AA est survolé par le curseur (hover), le texte doit être récrit en caractères gras (bold) et en petites majuscules (small-caps). Seuls les liens des bandeaux de haut et de bas de page ont été déclarés comme étant de classe AA.

On trouve sur le Web des effets un peu plus élaborés -- le bouton qui semble s'enfoncer au survol par exemple -- lesquels fonctionnent aussi bien dans les versions récentes de IE que de NS (dans ce dernier navigateur, cependant, on constate un défaut de centrage). Pour ce faire, il suffit de faire varier de OUTSET vers INSET la valeur de la propriété BORDER lors du survol. On peut en faire plus, bien sûr, en changeant la couleur du fond, la police et la couleur du texte, etc.

Il est possible de faire apparaître un texte déroulant (popup) quand on clique sur un lien, et l'exemple cité fonctionne dans les deux navigateurs. Le style correspondant est assez complexe, parce que là encore l'auteur a dû ruser pour que tout fonctionne bien dans IE et dans NS simultanément (on appelle cela un "hack"). Nous en avons extrait un exemple simplifié, dont voici le code :

<html>
 
<head>
<style>
div { width: 200px; height: 150px; font-size: 14pt; font-family: sans-serif; font-weight: bold; color: #000000 }
div a { text-decoration: none }
div a:hover { width: 200px}
div a span {display: none }
div a:hover span {display: block; position: absolute; top: 50px; left: 0pt; padding: 5px; margin: 10px ;color: #000000; font: 10pt sans-serif }
</style>
</head>
 
<body>
<div><a href="page02.htm#retour">Retour<span>Cliquez pour revenir en arrière</span></a></div>
</body>
 
</html>

Dans le même ordre d'idée, il est théoriquement possible de réaliser un menu déroulant ("popup menu") à l'aide d'une feuille de style, mais il ne fonctionnera que si le navigateur implémente la pseudo-classe "hover" (objet survolé) sur les balises HTML autres que l'ancre. C'est le cas de NS6 et 7, ainsi que de Mozilla, mais pas celui de IE5 ou 6. On peut en faire l'expérience en visitant un site ad hoc via les deux navigateurs successivement. Dans les spécifications CSS1, la pseudo-classe "hover"est réservée aux liens hypertextes, mais cette restriction a été levée dans les spécifications CSS2. Pour réaliser des menus déroulants, les concepteurs continuent donc à utiliser JavaScript, ou un mélange de code JavaScript (pour simuler "hover") et CSS, ou les techniques du DHTML. L'important est que les liens correspondants apparaissent en clair quelque part dans le code HTML, de telle sorte qu'ils soient suivis par les robots des moteurs de recherche, et que la totalité du site soit indexée.

En bref, il ne faut pas compter pour l'instant sur les feuilles de style pour remplacer les effets classiquement obtenus avec JavaScript. Il faut attendre que la nouvelle version d'Internet Explorer soit publiée, que la majorité des internautes l'ait téléchargée, et qu'elle implémente complètement la pseudo-classe "hover". Patience !

 

II-6- La gestion de contenu

Les feuilles de style permettent de séparer la présentation de l'information de sa mise en page (structure) et de son contenu,  comme le montre le schéma ci-dessous. On peut ainsi réutiliser la même mise en page pour des pages HTML différant par leur contenu seul.

PRÉSENTATION FEUILLES
DE STYLE

 

EDITION
HTML
INFORMATION
(texte + images)
PAGE AFFICHÉE

On peut faire un pas de plus, et tenter de réutiliser aussi la structure de la page, comme le montre le schéma ci-dessous.

STRUCTURE
PRÉSENTATION FEUILLES
DE STYLE

 

GESTION
CONTENU
INFORMATION
(texte + images)
PAGE AFFICHÉE

Pour ce faire, il faut utiliser un logiciel de gestion de contenu (en anglais : CMS, Content Management System). La plupart des logiciels de ce type utilisent :

Les pages requises par les internautes sont soit générées à la volée par le serveur Web (site dynamique), soit créées en différé et installées ensuite sur le serveur (site statique).

 

II-7- Conclusion

Les feuilles de style sont mal implémentées dans les navigateurs, et les bugs foisonnent (nous en avons fait la pénible expérience dans la présente page). Cela limite pratiquement l'utilisation des feuilles de style à la gestion de la présentation des pages Web. Dans ce rôle, les feuilles de style rendent un triple service :

On peut gérer la structure d'une page Web simple via les feuilles de style, et cela permet de réduire le poids de la page. Mais plus la structure d'une page est complexe, plus il est difficile de la gérer via les feuilles de style. La bonne vieille méthode des tableaux invisibles reprend alors tous ses droits.

En théorie, les feuilles de style peuvent remplacer la programmation en JavaScript pour des applications telles que les menus déroulants et les effets de survol. En pratique, il faut renoncer aux menus déroulants parce que certains navigateurs n'implémentent pas complètement les recommandations CSS2 du W3C. Néanmoins, en se donnant un peu de mal, on peut réaliser des effets de survol, et nous reviendrons sur ce point dans un chapitre ultérieur.

Enfin, les feuilles de style constituent un auxiliaire précieux de la gestion informatisée du contenu.

Page précédente Retour au sommaire Page suivante
Page précédente Retour au sommaire Page suivante
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base  
Copyright © CERIG/EFPG 1996-2004
Mise en page : J.C. Sohm