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'origine des feuilles de style           Révision : 11 avril 2004
Pas de page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(14 janvier 2004)

I - L'origine des feuilles de style

I-1- Rappel : le langage HTM

Le HTML est un langage de description de page Web dont les mérites principaux sont la légèreté et la simplicité. Ces deux qualités sont à l'origine du formidable succès qu'a connu le Web au cours de la précédente décennie. En effet, au début des années 1990, Internet était un petit tuyau, si bien qu'il était presque impossible de télécharger des fichiers de grande taille. De plus, les personnes qui se lançaient dans la création d'un site Web n'avaient aucune expérience, et seul un langage simple pouvait leur convenir. Aujourd'hui, le débit ("bandwith") du réseau Internet est nettement plus élevé ; les concepteurs de sites sont devenus plus expérimentés, et de ce fait plus exigeants. Sous la pression du besoin sont nées les feuilles de style, qui constituent l'une des améliorations apportées au HTML, et dont l'usage est aujourd'hui en plein développement.

Le langage HTML fonctionne à l'aide de balises. Par exemple, pour définir un paragraphe, on utilise les balises <p> et </p>. Si nous écrivons le code suivant :

<body>
<p>Premier paragraphe</p>
<p>Un second paragraphe</p>
</body>

le navigateur le traduit ainsi :

 
Premier paragraphe

Un second paragraphe  
 
 

Notre code ne contient aucune indication de présentation. Le navigateur applique donc des valeurs par défaut :

Dans sa version 4 actuelle, le langage HTML permet de faire mieux. Nous pouvons préciser la couleur du fond de page, la police (à condition qu'elle soit présente sur la machine de l'internaute), la taille des caractères (sept possibilités) et leur couleur, la décoration (trois possibilités) ainsi que l'alignement du texte (quatre possibilités). Exemple :

<body bgcolor="#FFFFCC">
<p><b><font face="Arial" size="2" color="#FF0000">Le premier paragraphe</font></b></p>
<p align="right"><u>Second paragraphe</u></p>
</body>

Le navigateur affiche ce code sous la forme :

 
  Le premier paragraphe  

Second paragraphe  

 
 

Comme on peut le constater, en matière de présentation, le langage HTML (version 4) reste relativement limité. Et pour cause : il est difficile d'être à la fois simple et léger dans son résultat, et complexe et exhaustif dans ses possibilités. Aussi les concepteurs de sites ont-ils pris l'habitude de se débrouiller. Ils réalisent le retrait de première ligne à l'aide d'espaces insécables, ils calent les marges et les distances entre paragraphes via les tableaux invisibles et l'image monopixel transparente, ils affichent sous forme d'image les titres utilisant une police exotique, etc. Il est clair qu'ils ont besoin d'un outil comparable à celui qu'offrent les traitements de texte (en moins complet, cependant, parce que la résolution de l'affiché est très inférieure à celle de l'imprimé). Ainsi sont nées les "feuilles de style", appelées CSS en anglais (Cascading Style Sheets).

Une feuille de style est formée de l'ensemble des règles de présentation s'appliquant aux différentes parties constituant une page Web.

 

I-2- L'histoire des feuilles de style

Le langage HTML est né au CERN, du désir de Tim Berneers-Lee de faciliter les échanges de documents numériques entre chercheurs travaillant sur les deux rives de l'Atlantique. Il semble que les feuilles de style soient également nées au CERN, lorsque Håkon W. Lie imagina en 1994 de doter le HTML de styles comparables à ceux des logiciels de traitements de texte. L'idée était dans l'air depuis quelque temps, d'une part chez les spécialistes des navigateurs, et d'autre part chez les concepteurs de site frustrés par les possibilités réduites du HTML (de l'époque) en matière de présentation.

Le premier document relatif aux feuilles de style, rédigé par H. Lie, est publié en octobre 1994, et présenté à la conférence "Mosaic and the Web" de novembre 1994 à Chicago. Il attire l'attention de Bert Bos, qui s'intéresse lui aussi au sujet. Les deux hommes se rencontrent à la WWW Conference d'avril 1995 ; ils vont désormais travailler ensemble.

Début 1995, le W3C (WWW Consortium) devient opérationnel. Au mois de mai 1995, pour développer les  feuilles de style, il crée une petite équipe, initialement constitué de H.W. Lie et B. Bos, et installe les deux hommes dans son antenne européenne, à Sophia Antipolis. Au mois de novembre 1995 est publié un premier projet ("draft"). En décembre 1996, ce projet devient une "recommandation" du W3C sous le nom CSS1.

Au début de 1997, le W3C crée un groupe de travail dédié aux feuilles de style, présidé par Chris Lilley de l'université de Manchester. Un complément (appelé CSS2) est mis en chantier, et une première proposition est publiée par le W3C en novembre 1997. La recommandation définitive apparaît en mai 1998. Des corrections et des extensions sont proposées dès la fin de 1998 ; elles font l'objet d'une première publication (CSS2.1) en août 2002, et les travaux se poursuivent actuellement à propos de CSS3.

Une recommandation du W3C est un bien beau document, mais si les principaux navigateurs du marché ne l'implémentent pas, il ne sert strictement à rien. De ce point de vue, le navigateur de Microsoft a longtemps possédé une longueur d'avance sur son principal concurrent, le navigateur de Netscape. En effet, dès 1995, les feuilles de style ont de chauds partisans chez l'éditeur de Redmond, alors que chez Netscape, le père du navigateur (Marc Andreessen) penche plutôt vers la solution qui consiste à enrichir le HTML. Les deux éditeurs rivaux étant représentés dans le groupe de travail du W3C, certaines séances sont fort animées.

Internet Explorer 3, mis sur le marché en août 1996, est le premier navigateur utilisant les feuilles de style. L'implémentation, très incomplète, concerne principalement la couleur (de fond et de premier plan), ainsi que la présentation du texte. Il faut dire qu'à cette date, le W3C n'a pas encore publié sa recommandation CSS1.

En ce même mois d'août 1996, l'éditeur Netscape propose au W3C un système de feuilles de style appelé JSSS (JavaScript Style Sheets), qui permet à un script côté client de modifier dynamiquement la présentation d'une page Web (le projet concurrent de Microsoft s'appellera DHTML). Comme l'éditeur a déjà incorporé JSSS dans la future version 4 de son navigateur, le refus du W3C d'abandonner CSS au profit de JSSS le met dans une position difficile. Pour ne pas retarder la publication de NS4 (prévue pour le début de 1997), Netscape imagine de laisser JSSS dans le code du navigateur, et de lui adjoindre un système de traduction en CSS utilisant JavaScript. Tout ceci est réalisé à la hâte, en quelques mois, avec le résultat que l'on imagine : la plupart des propriétés de CSS1 ne fonctionnent pas dans NS4. Comme c'est la navigateur le plus utilisé du marché, aucun concepteur de site Web ne se risque à utiliser à fond les feuilles de style. On dote l'en-tête des pages Web de quelques règles, mais c'est principalement pour montrer son savoir-faire aux clients. Quand on tient à une présentation, on recourt toujours au bon vieux HTML. Un peu plus tard, Netscape abandonne officiellement JSSS, et les partisans de CSS respirent ; leur projet peut se développer sans craindre de concurrent.

En septembre 1997, Microsoft publie la version 4 de son navigateur. Le moteur d'Internet Explorer a été complètement récrit, mais en ce qui concerne les feuilles de style, les bugs sont encore nombreux. Puis la société Netscape disparaît, absorbée par AOL, et la version 5 de son navigateur ne verra jamais le jour. Les adeptes de Netscape continuent à utiliser les dernières sous-versions de la version 4 (la 4.75 par exemple), et de ce fait les concepteurs de sites restent extrêmement prudents quant à l'usage des feuilles de style. En mars 1999, Microsoft publie la version 5 d'Internet Explorer, et l'implémentation des feuilles de style s'améliore. La part de marché du navigateur de Netscape s'effrite. Au mois de septembre 1999, nous publions une note technique qui fait le point de cette situation, et tente d'en déterminer l'évolution. Cette note peut être considérée aujourd'hui comme totalement obsolète

Il faut attendre 3 ans après la publication de la recommandation CSS1, pour que soit mis sur le marché un navigateur implémentant raisonnablement les spécifications correspondantes. La version 5 d'Internet Explorer pour le Mac, publiée en mars 2000, est en effet réputée compatible à 99 % avec CSS1 (l'auteur de ces lignes est sceptique devant un jugement aussi flatteur, lequel ne correspond pas à son expérience personnelle). Mais au milieu des années 1990, la société Apple a beaucoup souffert, et depuis sa part du marché des micro-ordinateurs est tombée à quelques pourcents. De plus, les utilisateurs du Mac ont une dent contre Microsoft, si bien qu'ils affectent d'utiliser plutôt le navigateur de Netscape. L'apparition de la version 5 de IE pour le Mac ne bouleverse donc pas la situation.

Enfin apparaissent sur le marché  la version 6 d'Internet Explorer pour PC (octobre 2001), ainsi que la version 6 (novembre 2000) et la version 7 (août 2002) du navigateur de Netscape. Comme la version 6 de NS et très boguée, elle est emplacée par la version 6.01 dès février 2001. Cette fois, les spécifications CSS1 sont implémentées presque complètement, mais avec beaucoup de bugs. Il faut attendre encore un peu pour que la majorité des internautes s'équipe, et l'usage des feuilles de style peut enfin se développer. Pour l'instant, aucun navigateur n'implémente CSS2 autrement que très partiellement -- ce n'est pas un drame mais, comme nous le verrons au chapitre suivant, cela limite l'usage des feuilles de style.

A l'heure où nous écrivons ce texte (début 2004), Internet Explorer (versions 5 et 6) domine de très haut le marché des navigateurs pour PC, ne laissant qu'une petite place (environ 3 %) à Netscape (versions 6 et 7). Les navigateurs Opera et Mozilla n'ont pas réussi à se créer autre chose qu'une niche. Aujourd'hui, les feuilles de style commencent à être largement utilisées -- uniquement celles de leurs propriétés qui sont implémentées par IE5 et 6. Le W3C a beau dire que c'est le moteur Gecko (utilisé par Netscape et Mozilla) qui respecte le mieux les spécifications CSS -- affirmation qui nous paraît quelque peu contestable -- c'est IE6 le navigateur le plus répandu, et c'est donc en tenant compte de ses possibilités que les concepteurs travaillent. Pour l'instant, la prudence impose que, chaque fois que l'on utilise les styles, on vérifie dans la dernière version des deux principaux navigateurs (IE et NS), et sur les deux plates-formes (PC et Mac), que tout s'affiche à peu près comme prévu -- ce qui est loin d'être toujours le cas. Mais cette position ne pourra pas être tenue très longtemps ; beaucoup de webmestres pensent qu'ils peuvent se permettre d'indisposer 3 % de leur audience, et la tentation est forte pour le CERIG d'en faire autant.

La guerre des navigateurs s'est éteinte, et les versions ne se suivent plus à un rythme endiablé comme par le passé. Microsoft abandonne IE pour Mac, et Apple prend non sans mal le relais avec Safari (lié au système X). La prochaine version d'Internet Explorer pour PC sera publiée avec la prochaine version de Windows, c'est à dire en 2005 au plus tôt. Désormais, l'absence de véritable concurrence aura pour conséquence un ralentissement certain des progrès des navigateurs. En un sens, ce n'est pas un mal ; moins on passe de temps à se préoccuper de la technique, plus on peut se consacrer au contenu.

Au cours des années, les sites web qui ont connu le succès n'ont pas cessé de grossir. Gérer des centaines de pages Web, voire des milliers ou plus (le CERIG, par exemple, comporte presque un millier de pages), constitue une tâche écrasante pour les webmestres et leurs équipes. La solution consiste à utiliser un logiciel de gestion de contenu. Ces outils, relativement récents, font très largement appel aux feuilles de style pour gérer la présentation des pages, ce qui conforte le succès de ces dernières. Bref, pour employer un terme à la mode (et politiquement correct), les feuilles de style deviennent "incontournables" -- ou presque.

 

I-3- L'implémentation des feuilles de style

Sur le Web, les pages dédiées aux feuilles de style ne manquent pas (a commencer par celles du W3C qui a été traduite en français). Des livres sont publiés, des conférences ont lieu, des formations sont proposées... Conseils et informations contradictoires foisonnent dans ces différentes sources. Le présent dossier résulte d'une analyse critique de tous les documents que nous avons consultés, et nous avons tenté de le doter des trois propriétés suivantes.

Un document pratique. Ce dossier a initialement été conçu pour un usage interne, parce que le CERIG -- comme de nombreux sites Web -- utilise de plus en plus les feuilles de style, et que chaque membre de l'équipe doit pouvoir se débrouiller seul avec cette technologie. Nous avons donc tenté de rendre notre exposé aussi peu rébarbatif que possible (pitié pour les collègues), en multipliant les exemples pratiques, et en repoussant ce qui est le plus indigeste -- les définitions et la syntaxe -- en fin de dossier (ceux qui arrivent jusque-là doivent être capables d'avaler aussi définitions et syntaxe).

Un document allégé. Nous n'avons pas tenté d'être exhaustifs : nous avons omis ce que le principal navigateur du marché (IE versions 5 et 6) n'implémente pas, et tout ce qui nous a paru secondaire ou accessoire. Nous avons extrait des recommandations du W3C ce qui nous paraissait le plus utile. Nous avons soigneusement évité les "hacks" et autres tours de force techniques. Nous avons tenté de réaliser un document qui ne soit pas trop volumineux, et qui reste simple à appréhender.

Un document critique. En progressant dans la rédaction, nous avons été amenés à tester diverses techniques et à faire des choix. Nous avons soigneusement évité de prendre parti dans les querelles de religion (le "tableless" par exemple) et nous avons fui le dogmatisme ("le contenu doit être totalement séparé de sa présentation"). Nous n'avons retenu des feuilles de style que ce qui contribue à alléger les pages Web, à améliorer leur présentation et à faciliter leur maintenance.

En bref, nous nous sommes efforcés de rédiger le présent dossier en respectant la ligne de conduite du CERIG : le contenu est roi -- la technique doit se faire oublier.

Pas de 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