Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilisé pour décrire la présentation d’un document structuré écrit en HTML ou en XML, et c’est le World Wide Web Consortium (W3C) qui en a la direction.
Vue d’ensemble
CSS est utilisé pour définir les couleurs, les polices, le rendu, et d’autres caractéristiques liées à la présentation d’un document. L’objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d’améliorer l’accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l’architecture d’un document. Enfin, CSS permet de s’adapter aux caractéristiques du récepteur.
HTML ne décrit que l’architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, position, mais aussi le formatage non visuel, comme la vitesse à laquelle le document doit être lu par des lecteurs de texte.
Ainsi, les avantages des feuilles de style sont multiples :
- La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
- La conception d’un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d’être plus efficace.
- Dans le cas d’un site Internet, la présentation est uniformisée : Les documents (pages « html ») font référence à la (aux) même(s) feuille(s) de styles. Cette caractéristique permet de plus un “relookage” rapide.
- Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l’écran par exemple). Certains navigateurs web permettent d’accéder facilement à un choix de feuilles de style.
- Le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne contient plus de balises de présentation.
CSS utilise une pléthore de mots-outils anglais destinés à caractériser les éléments HTML. Voici l’exemple d’une portion de feuille de style :
p { font-size: 110%; font-family: Helvetica, sans-serif; }h1 { color: white; background: red; } Ce code CSS fixe pour les éléments p (paragraphe), le paramètre de taille à la valeur 110% et le paramètre de police à la valeur Helvetica, ou, si Helvetica est indisponible, police générique. Quant aux titres (éléments h1) ils seront en blanc, sur fond rouge.
Le CSS permet aussi de définir plus précisément la manière de représenter un élément grâce aux id et aux class. Les identificateurs (id) sont utilisés pour caractériser un élément unique (un menu, un mot…), mais les classes (class) sont utilisées pour caractériser un ensemble d’éléments (comme des menus organisés de manière similaire).
Par exemple : l’on place dans le fichier de contenu (fichier HTML, ou similaires), comme ceci :
<p class=”beauParagraphe”>Je suis né en Alsace. […]</p>
et dans le fichier de contenant :
.beauParagraphe { text-indent: 1em; }
Ceci donnera un alinéa à la classe .beauParagraphe, soit ici la phrase « Je suis né en Alsace. »
La présentation est donc bien séparée du contenu. (C’est suite à la prise en compte des avantages de CSS que le W3C déconseille maintenant les éléments et les attributs de présentation en HTML, comme align=”" ou <font face=”">.)
Les descriptions CSS peuvent être données à l’intérieur d’un document HTML, ou importées séparément dans le lecteur. Cette possibilité donne une certaine flexibilité à CSS. De plus, CSS peut être utilisé avec XHTML, XML, ou avec n’importe quel format de document structuré correctement implanté dans un logiciel ou dans un navigateur.
Les feuilles de style peuvent contenir des commentaires. La syntaxe est la suivante : /* commentaire */
Histoire de CSS
Un concept parmi d’autres, présent dès l’origine du Web
Découlant de la séparation de la structure et de la présentation voulue par Tim Berners-Lee, le concept de feuilles de styles est présent dès l’origine du Web : le premier navigateur Web (« WorldWideWeb », renommé par la suite « Nexus »), permet de mettre en forme les documents à l’aide de ce qui serait aujourd’hui considéré comme une « feuille de style utilisateur ». De même, les navigateurs Viola en 1992 et Harmony en 1993 recourent à un mécanisme similaire permettant de déterminer le rendu des polices de caractères, des couleurs ou de l’alignement du texte.
Il ne s’agit cependant pas de styles déterminés par l’auteur du document. Les premières implémentations HTML ne comportant pas non plus d’éléments de présentation, une pression croissante s’exerce alors pour que les navigateurs permettent aux auteurs de déterminer eux-mêmes la mise en forme des pages web, dans un démarche issue de la publication imprimée électronique. C’est dans ce contexte, en 1993-1994, que le tout nouveau Netscape Navigator introduit les premiers éléments HTML de présentation à l’intiative de Marc Andreessen, tandis qu’apparaissent concurremment les premières proposition de formats de styles externes: le « stylesheet proposal » de Pei Wei (créateur de Viola), les « Stylesheets for HTML » de Robert Raisch (O’Reilly), et enfin les « Cascading HTML Style Sheets » (CHSS) d’Håkon Wium Lie : l’apparition de CSS répond à une volonté de « proposer une alternative à l’évolution du HTML d’un langage de structuration vers un langage de présentation »
Une troisième voie de développement est également ouverte à la même époque : le langage de transformation DSSSL des documents SGML, élaboré par James Clark, suggère la possibilité d’un format de styles qui ne soit pas seulement descriptif, et se rapproche d’un véritable langage de programmation. Cette voie est suivie par Netscape, qui propose en 1996 au W3C les « JavaScript-Based Style Sheets » (JSSS), implémentée par Netscape Navigator 4 en 1997.
Les origines des CSS sont donc liées à trois alternatives majeures :
- HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?
- Les choix de présentation de l’auteur doivent-ils avoir la primauté sur ceux de l’utilisateur ?
- La réponse aux besoins est-elle un format de description de la mise en forme, ou un langage de transformation ?
Les premiers développements de CSS
La première proposition de « Cascading HTML Style Sheets » formulée par Håkon Wium Lie retient l’attention de Dave Raggett, qui est alors le principal éditeur du projet de spécification HTML3.0. Partisan d’un HTML purement structurel, il encourage la publication d’un document de travail CHSS, afin que celui-ci puisse être présenté et discuté à la seconde conférence internationale sur le WWW (« Mosaic and the Web », Chicago, 1994). Il modifie également avec Håkon Lie le navigateur Arena, afin de permettre de tester ce format, et en fait la démonstration lors de la troisième conférence WWW en 1995.
Parallèlement, Bert Bos, qui travaillait alors sur le navigateur Argo, et qui avait soumis au W3C son propre projet « Stream-based Style Sheet Proposal » (SSP), décide de joindre ses effets à ceux d’Håkon Lie. SSP ayant été développé avec l’idée d’être applicable non seulement à HTML, mais aussi à d’autres langages de balisage, Bert Bos et Håkon Lie reprennent cet objectif, et en font une des caractéristiques clés de ce qui devient alors CSS proprement dit.
Un autre aspect de CSS s’avère alors déterminant face aux alternatives existantes: CSS est le premier format à inclure l’idée de « cascade » (feuille de style en cascade), c’est à dire la possibilité pour le style d’un document d’être hérité à partir de plus d’une « feuille de style ». Cela permet d’arbitrer entre plusieurs sources concurrentes de mise en forme d’un élément, et répond donc à la nécessité de composer entre les préférences stylistiques des auteurs et des utilisateurs.
Le World Wide Web Consortium (W3C) devient opérationnel en 1995, et la liste de discussion www-style est alors créée. La même année se tient à Paris un « W3C style sheet workshop » décisif pour l’avenir des CSS. Y est notamment affirmée la volonté de conserver les feuilles de style sous une forme simple, ce qui exclue l’hypothèse JSSS de Netscape. Par ailleurs, Thomas Reardon (Microsoft) y annonce le support à venir de CSS dans les futures versions d’Internet Explorer : dès lors, lorsque le W3C crée à la fin de l’année l’« HTML Editorial Review Board » (HTML ERB) pour ratifier les futures spécifications HTML, DOM et CSS, Netscape, représenté par Lou Montulli, se rallie finalement au projet CSS mené par Bert Bos et Håkon Lie.
Vers une maturation difficile
CSS1.0, des implémentations difficiles pendant la guerre des navigateurs
La spécification CSS1.0 finale est publiée le 17 décembre 1996. CSS1.0 se définit comme un « mécanisme de feuille de style simple, permettant aux auteurs et aux lecteurs d’attacher des styles (…) au document HTML ». Cette simplicité se traduit par le choix d’un langage qui peut être aisément lu et écrit directement par ses utilisateurs humains, et d’une terminologie conforme aux usages courants dans la publication informatique. Le choix éventuel d’exprimer CSS dans une syntaxe XML ou SGML, régulièrement évoquée pour éviter l’implémentation d’un nouveau mode de parsing, est donc définitivement écartée.
CSS1.0 définit essentiellement les propriétés de rendu typographique du texte: fontes, couleur, taille des caractères, graisse, espacements, bordures et gestion des marqueurs de liste. Il n’est donc pas encore question de « mise en page »: la propriété float, qui sera par la suite massivement utilisée pour la mise en page CSS globale des designs web, n’est alors conçue que comme un moyen de placer localement, côte à côte, une portion réduite du contenu, tel qu’une image, et le reste du texte. Compte-tenu des implémentations problématiques de CSS1.0, le détournement de l’élément HTML table pour gérer la mise en page globale reste dans l’immédiat la solution la plus couramment retenue par les auteurs de contenu Web.
En 1996, Internet Explorer 3.0 est le premier navigateur commercial à implémenter partiellement CSS alors que celle-ci est encore en cours de formulation. Cette implémentation anticipée, menée par Chris Wilson ne correspond pas à la spécification finale. En 1997, Internet Explorer 4.0 voit la naissance d’un nouveau moteur de rendu, Trident, à l’origine du support croissant mais problématique de CSS dans les différentes versions de ce navigateur sous Windows, jusqu’à IE7 inclus.
Netscape Navigator 4.0 suit le mouvement en 1997, malgré ses réticences historiques vis à vis de CSS: dans le contexte de la guerre des navigateurs, il s’agit alors principalement d’éviter que Microsoft ne puisse s’affirmer comme le navigateur le plus conforme. Cependant, cette implémentation précipitée, basée sur des méthodes javascript internes, se révèle peu finalement exploitable par les producteurs de contenus. Netscape Navigator 4.0 apporte également une implémentation JSSS, qui restera sans lendemain. Il faudra attendre le nouveau moteur de rendu Gecko et son intégration dans Netscape 6 en pour parvenir à une véritable implémentation de CSS1.0.
En 1998, alors que s’achève la guerre des navigateurs opposant Netscape et Microsoft, Opera 3.5, dont Håkon Lie est entre-temps devenu le directeur technique, parvient à une implémentation plus complète de CSS1.0, facilitée par la publication de la première « Test suite for Cascading Style Sheets (CSS) Level 1 » créée principalement par Eric Meyer pour le W3C[20]. La présence de ces suites de test se révèle un atout majeur à la fois pour les implémentations dans les navigateurs et pour l’appropriation des techniques CSS par les auteurs (en fournissant des exemples détaillés des propriétés et de leurs valeurs).
Enfin, sous l’impulsion de Tantek Çelik, Internet Explorer 5.0 pour Macintosh lancé en mars 2000, basé sur Tasman, un moteur de rendu spécifique sans rapport avec Trident, est le premier navigateur à supporter complètement (à plus de 99 %) CSS1.
Durant cette période de la fin des années 90, la conception Web est avant tout dépendante de l’utilisation d’HTML en tant que format de présentation. La défaite de Netscape à l’issue de la guerre des navigateurs, le renouveau qui s’en suit via le projet Mozilla, l’apparition d’IE5 Mac, et à un moindre titre l’évolution d’Internet Explorer Windows 5.x, amorcent cependant au début des années 2000 une nouvelle étape dans l’évolution des pratiques de conception des sites Web par les auteurs : ces navigateurs permettent en effet de montrer que les pratiques historiques datant de l’époque de la guerre des navigateurs, mêlant structure et présentation, peuvent réellement être abandonnées au profit d’une démarche basée sur les feuilles de styles et le respect plus général des standards du Web (au sens d’HTML et CSS). Jeffrey Zeldman, co-fondateur du Web Standards Project et fondateur d’A List apart en 1998, apparaît alors comme la figure emblématique de ce mouvement de promotion des standards[21]. Il est également l’inspirateur d’une démarche de conception « hybride », tirant profit des techniques CSS tout en demeurant temporairement dans le cadre d’une mise en forme des documents basée sur les tableaux de présentation.
CSS2.0, des ambitions précipitées
Pour répondre aux besoins que la première spécification CSS1.0 ne couvrait pas encore, CSS est attribué en 1997 à un nouveau groupe de travail au sein du W3C, présidé par Chris Lilley. CSS2 est publié comme une recommandation officielle en mai 1998, tandis que CSS3 commence à être développée.
CSS2.1, retour aux implémentations
Cependant, CSS2.0 s’avère rapidement un standard trop riche, dont certaines sections sont sous-spécifiées, voire pratiquement impossibles à implémenter
Bien que CSS1 soit paru en 1996, trois ans ont été nécessaires pour qu’un navigateur achève l’intégration complète de cette spécification. . Les autres navigateurs suivirent peu après, et beaucoup développèrent des parties de CSS2.0.
Les retours d’implémentation de CSS2.0 conduisirent à rédiger une version CSS2.1, corrigée sur la base de ce qui avait avait été adopté par les différents navigateurs.
Perspectives
En 2007, aucun navigateur n’avait achevé l’intégration de CSS2.1: celle-ci serait implémentée à 56% par Internet Explorer 7, 91% par Firefox 2 et 94% par Opera 9