Html - Les feuilles de style - Concept et utilité des feuilles de style

Feuilles de style

Concept et utilité

Présentation

Le concept des feuilles de style n'est pas à proprement parler une nouveauté dans le domaine de la publication Html. Introduit en 1997 par Microsoft avec son Internet Explorer 3.0 (mais elles existaient déjà sous Unix avec Arena), ces feuilles de style n'ont connu qu'un intérêt limité du fait que celles-ci n'étaient pas reconnues par Netscape Navigator 3.0.

Depuis les choses ont bien changé. D'abord les browsers 4.0 de Microsoft et de Netscape reconnaissent tous deux les feuilles de style et surtout, la norme Html 4.0 en a repris le concept (CSS version 1) et le recommande d'ailleurs vivement aux "Web designers".

Concept

Dans un document d'une certaine importance, il arrive fréquemment que l'on attribue à certains éléments des caractéristiques de mise en forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en gras et en couleur bleue.

On peut imaginer que l'on puisse donner à cette définition de mise en forme un nom soit "titre" et qu'à chaque nouveau chapitre, plutôt que d'écrire chaque fois le nom du titre et puis de devoir le mettre en Arial, gras, bleu, l'on puisse dire à l'ordinateur, nom du chapitre mais dans la mise en forme que j'ai défini sous le nom de "titre". Cette définition de mise en forme particulière, on va l'appeler feuille de style.

Le concept de feuilles de style [Style Sheets] est né. Il existait déjà dans les traitements de texte comme dans Word de Microsoft (comme par hasard...). Allez dans le menu Format de Word, vous y trouvez Style ! Il ne restait plus qu'à coupler le concept au langage Html par des propriétés spécifiques.

<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1>
<H2><B><FONT COLOR="green">- A -</FONT></B></H2>
<H3><B><FONT COLOR="red">...a....</FONT></B></H3>
<H1><B><FONT COLOR=blue>Titre2</FONT></B></H1>
<H2><B><FONT COLOR="green">- B-</FONT></B></H2>
<H3><B><FONT COLOR="red">...b....</FONT></B></H3>

STYLE des titres
STYLE sous-titres
STYLE du texte
STYLE des titres
STYLE sous-titres
STYLE du texte

Vous remarquez que l'on parle de feuilles de style [ style sheets ] car le but du jeu est d'en définir plusieurs. On parle aussi de feuilles de style en cascade [ Cascading Style Sheets ou CSS ] car en cas de styles identiques, un ordre de priorité sera déterminé par le browser
(voir FAQ).

Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication de pages Web.

Utilité et avantages

	Séparation du contenu et de la mise en forme.
	Cohésion de la présentation tout au long du site avec les feuilles de style externes.
	Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela en quelques lignes plutôt que de devoir changer un grand nombre de balises.
	Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à ses différentes versions.
	Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.
	Réduire le temps de chargement des pages.
	Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes, contrôle des marges et des indentations (sans devoir utiliser de tableaux ou de balise <DD>...) et ainsi augmenter la créativité des écrivains du Web.
	Permettre le positionnement au pixel près du texte et/ou des images sans passer par les "layers" exclusifs à Netscape.

Compatibilité

Les feuilles de style fonctionnent sous :

Explorer 3.0 mais de façon très incomplète.
Explorer 4.0 et plus de façon correcte.

Netscape 3.0 pas de feuilles de style reconnues.
Netscape 4.0 de façon très partielle !!!
Netscape 6.0 en principe de façon correcte.