CSS1, des implémentations difficiles pendant la guerre des navigateurs

La spécification CSS1^[13] finale est publiée le 17 décembre 1996, et définit une cinquantaine de propriétés. CSS1 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 »^[14]. 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 d'analyse syntaxique, est donc définitivement écarté^{[n. 4]}.

CSS1 ne décrit pas uniquement sa propre grammaire : ce premier niveau décrit en effet une grammaire destinée à permettre aux niveaux ultérieurs d'ajouter de nouvelles fonctionnalités, tout en autorisant la lecture de ces futures feuilles de styles par les navigateurs plus anciens. Ainsi, un ancien navigateur lisant un nouveau style ne le comprend pas, mais peut l'identifier en tant que tel, et l'ignorer. CSS garantit ainsi sa compatibilité descendante.

CSS1 définit essentiellement les propriétés de rendu typographique du texte :

• pour les fontes : la couleur, la taille, la graisse, l'espacement, etc.
• pour les blocs (de texte), leurs bordures, leurs marges, leur fond, les marqueurs de liste, etc.

Les possibilité de mise en page restent plus limitées que celle offertes par HTML, en particulier avec les tables. En outre, la mise en œuvre est sévèrement boguée dans tous les navigateurs jusqu'à Internet Explorer 5 pour Macintosh. 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^[15]. Compte tenu des implémentations problématiques de CSS1, 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^[16] 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'à Internet Explorer 7 inclus^{[n. 5]}.

Netscape Navigator 4.0 suit le mouvement en 1997, malgré ses réticences historiques vis-à-vis de CSS^{[n. 6]} : 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 finalement limitée et très peu fiable. Netscape Navigator 4.0 apporte également une implémentation JSSS, qui restera sans lendemain^{[n. 7]}. Il faudra attendre le nouveau moteur de rendu Gecko du projet Mozilla pour parvenir à une véritable implémentation de CSS1.

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, 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^[17]. 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 et à réussir le test Acid1. Pour assurer la compatibilité avec les précédentes pratiques de codage propre à chaque implémentation (la « soupe de balises »), et permettre un affichage correct des documents web qu'ils soient respectueux ou non des standards CSS et HTML, il est également le premier à mettre en œuvre la technique du doctype switching. Adoptée par la suite par tous les navigateurs, celle-ci devient par la suite l'une des clés de l'implémentation progressive de CSS : elle permet en effet au navigateur de conserver d'anciennes implémentations propriétaires pour des raisons de compatibilité, tout en ayant la possibilité d'opter, en fonction de la syntaxe de la déclaration de type de document de la page, pour un mode de rendu conforme à de nouvelles implémentations standards^[18].

Durant cette période de la fin des années 1990, 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'ensuit 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 fondé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, cofondateur du Web Standards Project et fondateur d’A List Apart (en) en 1998, apparaît alors comme la figure emblématique de ce mouvement de promotion des standards^{[n. 8]}. 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 fondée sur les tableaux de présentation.

CSS2, des ambitions précipitées

Pour répondre aux besoins que la première spécification CSS1 ne couvrait pas encore, CSS est attribué en 1997 à un nouveau groupe de travail au sein du W3C, présidé par Chris Lilley. En 2007, ce groupe comporte notamment des représentants d'Apple, Google, IBM, Microsoft, Adobe, de la Fondation Mozilla et d'Opera.

Publié comme une recommandation en mai 1998, le second niveau de CSS étend considérablement les possibilités théoriques des feuilles de styles en cascade, avec en particulier environ 70 propriétés supplémentaires. À la mise en forme typographique du texte initiée avec CSS1 s'ajoutent en effet notamment :

• la déclinaison en styles propres aux différents média dans lesquels une page web peut être restituée (impression, rendu par une synthèse vocale, par un dispositif braille, par un dispositif de projection, un mobile, etc.) ;
• de nouvelles propriétés de positionnement à l'écran pour permettre la réalisation de mise en pages avancées, issues d'un document élaboré conjointement par Microsoft et Netscape^[19] ;
• un jeu de propriétés autorisant le téléchargement de polices de caractères spécifiques ;
• de nouvelles propriétés permettant de faire intervenir les préférences de l'utilisateur dans la mise en forme d'un site.

Cependant, cette richesse fonctionnelle ne rencontre qu'un écho limité dans ses implémentations :

• la déclinaison par média est en partie un échec : les styles de rendus vocaux restent théoriques faute de prise en compte par les navigateurs vocaux et lecteurs d'écran. Ils s'avèrent par ailleurs incompatibles avec le standard d'interaction vocale SSML. Il en est de même de l'affichage et de l'impression braille. Les styles d'impression ne sont que très partiellement adoptés par les navigateurs graphiques, tandis qu'une partie des navigateurs pour mobiles ignorent encore au début des années 2000 le type de média CSS qui leur est dédié ;
• seules quelques propriétés avancées de positionnement sont reconnues par l'ensemble des navigateurs graphiques, consolidant ainsi les pratiques de mise en page qui reposent sur des détournements de fonctionnalités CSS (système des blocs flottants ou positionnés) et HTML (tableaux de mises en page) ;
• le téléchargement de polices de caractères suscite des implémentations non conformes et divergentes entre Netscape et Internet Explorer, et rencontre l'opposition des éditeurs de fontes, soucieux de préserver leurs intérêts commerciaux^{[n. 9]}.

Plusieurs causes sont évoquées pour expliquer ces difficultés et la lenteur des implémentations CSS2 :

• la « sous-spécification ou quasi-inimplémentabilité de certaines sections »^[20]. Håkon Lie souligne lui-même dans sa thèse sur les feuilles de style en cascade, en 2005, les risques de non implémentation ou de perte d'interopérabilité liés à des « fonctionnalités excessives », telles que les marqueurs de liste, les repères de coupe pour l'impression ou le téléchargement de polices de caractères. De même, la complexité des sélecteurs avancés est difficilement conciliable avec la gestion de la cascade ;
• l'absence d'intérêt de la part des fabricants de navigateurs pour des fonctionnalités qui ne répondaient pas nécessairement à leurs objectifs stratégiques ou commerciaux ;
• l'interruption du développement d'Internet Explorer, navigateur dominant du marché, de 2001 à 2006. Håkon Lie écrivait en effet en 2005 : « 2001 est un tournant pour CSS. C'est l'année où Microsoft produit Internet Explorer 6.0 qui offre une prise en charge fonctionnelle, bien qu'incomplète et buggée, de CSS […]. Aucun autre navigateur n'a été capable de concurrencer WinIE en ce qui concerne le nombre d'utilisateurs. WinIE a, de ce fait, déterminé le sous-ensemble de CSS utilisable par les auteurs. La prise en charge limitée de CSS par WinIE, combinée à un monopole de fait en matière de navigateur web, est actuellement le plus grave problème du déploiement de CSS^[21]. »

CSS 2.1, retour aux implémentations

Les retours d'implémentation de CSS2 conduisent le groupe de travail CSS du W3C à rédiger à partir de 2001 une version révisée CSS 2.1 (« CSS Level 2, Revision 1 »), sur la base de ce qui était effectivement adopté par les différents navigateurs. Les objectifs de cette révision sont^[22] :

• de maintenir la compatibilité avec les parties de CSS2 qui sont largement acceptées et mises en application ;
• d'incorporer dans la norme tous les errata CSS2 déjà publiés ;
• Lorsque les implémentations diffèrent profondément de la spécification CSS2, de modifier la spécification pour qu'elle soit en accord avec les pratiques généralement admises ;
• de supprimer les dispositifs CSS2 qui ont été refusés par la communauté CSS, vu leur manque d'implémentation. CSS 2.1 vise à refléter les mécanismes CSS qui ont été raisonnablement et largement implémentés pour les langages HTML et XML en général (plutôt que pour un langage XML en particulier, ou pour HTML seul) ;
• de supprimer les mécanismes CSS2 qui seront rendus obsolètes par CSS3, et encourager ainsi l'adoption de mécanismes CSS3 à leur place ;
• d'ajouter un (très) petit nombre de nouvelles valeurs de propriétés, lorsque l'expérience d'implémentation a montré qu'elles répondaient à un besoin pour la mise en application de CSS2.

CSS 2.1 corrige CSS2 sur de nombreux points de détail, en supprime certaines sections en tout ou partie (les styles vocaux définis sous le type de media « aural », les styles d'impression, les polices téléchargeables, dont les définitions plus probantes sont repoussées à la future CSS3), et l'explicite à partir des constats mis à jour lors des implémentations (la gestion avancée des blocs flottants via les « contextes de formatage »^[23]).

Après avoir connu 8 versions successives, CSS 2.1 est en juillet 2007 une recommandation candidate, c'est-à-dire le standard que doivent suivre les implémentations^[24].

En 2007, aucun navigateur n'a en effet achevé l'intégration de CSS 2.1 : celle-ci serait implémentée à 56 % par Internet Explorer 7, 91 % par Firefox 2 et 94 % par Opera 9^[25]. Par ailleurs, seule une partie des navigateurs graphiques ont passé avec succès ou retenu comme objectif le test Acid2, lancé en 2005 par le Web Standards Project, à l'initiative d'Håkon Lie, pour favoriser notamment l'implémentation d'un choix de fonctionnalités CSS 2.1 considérées comme les principales avancées nécessaires : positionnement d'éléments lors de l'affichage, généralisation du modèle de rendu en tableau à tous les éléments, contenu généré via CSS. L'utilisation professionnelle de CSS reste donc limitée à un sous-ensemble arbitraire de celle-ci, déterminé par les implémentations communes.

Séparation entre la structure et la présentation

L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de présentation, et de réduire la complexité de l'architecture d'un document.

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 web, la présentation est uniformisée : les documents (pages HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel ;
• un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran. Certains navigateurs web permettent au visiteur de choisir un style parmi plusieurs ;
• le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises ni d'attributs de présentation.

Présentation selon le média

CSS permet de définir le rendu d'un document en fonction du média de restitution et de ses capacités (type de moniteur ou de dispositif vocal), de celles du navigateur (texte ou graphique), ainsi que des préférences de son utilisateur.

Les feuilles de styles peuvent être différenciées pour les médias suivants, selon CSS2.1^[32] :

• all : quel que soit le média ;
• screen : écrans d'ordinateur de bureau ;
• print : pour l'impression papier ;
• handheld : écrans de très petite taille et clients aux capacités limitées ;
• projection : quand le document est projeté ;
• tv : quand le document est affiché sur un appareil de type télévision ;
• speech : pour le rendu via une synthèse vocale (remplaçant aural, initialement prévu par CSS2.0 puis déprécié par CSS2.1).

D'autres types de media sont théoriquement prévus par la spécification CSS2.1, mais ne sont pas implémentés par les agents utilisateurs : braille et embossed pour les tablettes brailles et les embosseuses, ainsi que tty pour les téléscripteurs.

Dans chaque média, les styles de présentation déterminés par l'auteur du document se combinent avec ceux par défaut de l'agent utilisateur et ceux issus des préférences de l'utilisateur et de sa configuration personnelle.

Les capacités du récepteur peuvent être prises en compte par les auteurs, à destination des agents utilisateurs implémentant le module CSS3 « media queries »^[33] : celui-ci permet de conditionner la prise en compte d'une feuille de style à des contraintes concernant notamment la résolution ou la capacité de restitution des couleurs.

Cascade des styles

La « cascade » est la combinaison de différentes sources de styles appliqués à un même document, selon leur degré respectif de priorité. Différents modes de cascade peuvent se combiner :

• par origine des styles, issus de l'agent utilisateur, de l'auteur et de l'utilisateur. La priorité supérieure accordée aux styles de l'utilisateur est un des facteurs principaux de l'accessibilité des documents présentés à l'aide de CSS ;
• par média : une feuille de style générique peut s'appliquer à plusieurs média de restitution (affichage à l'écran, impression, projection) et être combinée avec des feuilles propres à chaque média ;
• selon l'architecture d'un ensemble de documents web : une feuille de style générique peut s'appliquer à la totalité des pages d'un site web, être combinée avec des feuilles propres à chaque rubrique de celui-ci, ainsi qu'avec des styles propres à telle ou telle page spécifique ;
• selon l'architecture des feuilles elles-mêmes : une feuille de style externe au document peut être combinée à une feuille de style interne et à des styles appliqués directement à chaque élément qui le compose (styles « en ligne »). Une feuille de style peut également importer une ou plusieurs autres feuilles externes.

Concepts fondamentaux : boîtes et flux CSS

Le rendu d'un document stylé est déterminé par les concepts de boîte et de flux. Le moteur de rendu CSS établit une « structure de formatage » reflétant l'arbre logique du document. Chaque élément de cette structure génère une ou plusieurs zones dotées de propriétés d'affichage ou de rendu vocal paramétrables. L'affichage ou la lecture s'effectuent à partir du flux des boîtes successivement générées pour chaque élément tel qu'il apparaît dans l'ordre linéaire de la structure de formatage.

Selon les cas de figures, ces différents types de boîtes :

• peuvent avoir des propriétés de marges, de bordure, d'arrière-plan, de largeur ou de hauteur, etc. Dans un rendu vocal, des propriétés équivalentes permettent de déterminer des pauses dans la lecture avant ou après le contenu, de choisir une voix, de régler son débit ou son niveau sonore ;
• peuvent être déplacées par rapport à leur position par défaut dans le flux, ou avoir un comportement particulier dans celui-ci (permettre un rendu en colonnes adjacentes, se superposer aux boîtes voisines, ou être masquées par exemple).

Propriétés et valeurs

Les caractéristiques applicables aux boîtes CSS sont exprimées sous forme de couples propriété: valeur;.

La propriété et la valeur sont séparés par un double point ':', et un point virgule ';' marque la fin de la boîte.

Les propriétés sont libellées à l'aide de mots-outils anglais tels que « width » (largeur), « font-size » (taille de la police de caractères) ou « voice-volume » (volume sonore du rendu vocal).

Les valeurs peuvent être selon les cas exprimées à l'aide d'unités normalisées par ailleurs, ou de mots-clés propres à CSS. Par exemple, une couleur de fond ou de texte peut être exprimée à l'aide du modèle RGB ou des mots clés black, blue, fuchsia, etc.

Les propriétés CSS ont été établies selon un compromis entre deux contraintes opposées : faciliter la lecture des feuilles de styles par les agents utilisateurs en multipliant les propriétés individuelles, ou faciliter leur écriture par les auteurs en recourant à un nombre plus réduit de propriétés combinées. Par exemple, la position d'une image d'arrière-plan est déterminée par une propriété unique (background-position), combinant les deux valeurs d'abscisse et d'ordonnée, et non par deux propriétés distinctes. De même, il existe des propriétés raccourcies permettant aux auteurs de simplifier l'écriture d'une série de propriétés : le raccourci font permet, par exemple, de résumer en une seule règle l'ensemble des propriétés de police de caractères, de taille, de hauteur de ligne, de casse, de graisse et d'italique. Mais l'utilisation du caractère « / » rend beaucoup plus complexe l'analyse syntaxique des feuilles de styles par les agents utilisateurs^[34].

Sélecteurs et blocs de règles

Les propriétés sont regroupées par blocs de règles, délimités par les accolades {}. Chaque bloc est précédé d'un sélecteur désignant les éléments structurels auxquels les propriétés concernées doivent être appliquées :

/*Je suis un commentaire qui commente le code et qui ne fait rien*/
body
{
    /*Couleur de fond : */
    background-color: green;
}
p
{
    /*Couleur du texte : */
    color: red;
    /*Taille du texte en px (pixel) : */
    font-size: 20px;
}
button
{
    /*Contour : */
    outline: none;
    /*Bordure*/
    border: none;
    /*Couleur de fond : */
    background-color: black;
    /*Couleur de texte : */
    color: white;
}
/*Hover veut dire au survol d'un bouton*/
button:hover
{
    /*Couleur de fond : */
    background-color: green;
}
/*Selection veut dire à la selection du texte*/
*::selection
{
    /*Couleur de fond : */
    background-color: black;
    /*Couleur du texte : */
    color: white;
}

Classes

Les classes HTML peuvent êtres modifiés individuellement. Et le style de la classe est, en CSS déclarée de cette façon: .nomDeLaClasse.

Le code suivant aligne le titre HTML de la classe "Titre-HTML" au centre de la page:

Contenu du fichier index.html:

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="Titre-HTML">Ce titre est maintenant centré.</h1>
    </body>
</html>

Contenu du fichier style.css:

.Titre-HTML
{
    text-align: center;  
}

CSSOO

Le CSS orienté-objet (en anglais OOCSS), est une méthode créée en 2009^[35] sur le modèle de la programmation orientée objet, permettant de réutiliser ses styles dans plusieurs contextes^[36].

BEM

Le BEM (Block, element, modifier) est une technique d'écriture du CSS inventée en 2010^[37], consistant à déclarer les styles sous forme d'arborescence pour en améliorer la performance. Exemple :

.product 
{
    &-productLabel 
    {
        ...
    }
    &-productPicture 
    {
        ...
    }
}

NB : l'esperluette (&) représente l'objet parent en Sass et en LESS.