Feuilles de style en cascade - Définition

Introduction

CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Enjeux et principes

Les enjeux

Séparer la structure d'un document de ses styles de présentation

L'un des objectifs majeurs de 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.

Décliner les styles de présentation selon le récepteur

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 :

• 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 » : 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.

Permettre la 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 media de restitution (affichage à l'écran, impression, projection) et être combinée avec des feuilles propres à chaque media.
• 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.

Principes techniques et syntaxe de CSS

Les 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.

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.

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 auxquelles les propriétés concernées doivent être appliquées :

      p { font-size: 110%; font-family: Helvetica, sans-serif; }      

Bien que ce code CSS ne décrive pas la totalité de la présentation d'un document, il constitue à lui seul une feuille de style à part entière. Il 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, une police générique sans serifs.

p est un exemple de sélecteur simple. D'autres sélecteurs simples peuvent cibler plus spécifiquement un ou plusieurs éléments en recourant aux identifiants et aux classes attribués aux éléments structurels : les identificateurs (attribut id) sont utilisés pour caractériser un élément unique (un menu, un mot...), tandis que les classes (attribut class) sont utilisées pour caractériser un ensemble d'éléments (comme des menus organisés de manière similaire).

Des sélecteurs contextuels, formés par combinaisons de sélecteurs simples, permettent de viser des éléments selon leur position dans le document : a img ne désignera par exemple que les images présentes dans des liens.

Pour permettre la cascade des styles, des règles de calcul de spécificité permettent au moteur de rendu CSS de déterminer le degré de priorité à appliquer à différents sélecteurs visant concurremment un même élément, et de trier ainsi les règles à lui appliquer. Ce calcul repose sur la somme des valeurs données aux différents sélecteurs simples formant le sélecteur contextuel :

• chaque type de sélecteur simple a sa valeur de priorité : 0,0,0,1 pour un élément, 0,0,1,0 pour une classe, 0,1,0,0 pour un identifiant unique id.
• la mention !important ajoutée dans la règle donne une spécificité de 1,0,0,0.
• l'origine du style est déterminante en dernier ressort : un attribut style présent dans le document HTML a la priorité sur les autres sources de styles auteur, afin de permettre les surcharges locales des styles communs à une série de pages web. D'autre part, à priorités égales, un style utilisateur l'emporte sur un style auteur, qui l'emporte sur le style par défaut de l'agent utilisateur.

Les feuilles de styles sont donc des documents textuels, dont la syntaxe se veut simple et intuitive, pour permettre leur lecture et leur écriture aussi bien directement par l'auteur qu'à l'aide d'un logiciel.