Le fonctionnement de CSS

CSS permet de créer de belles pages web. Mais qu'en est-il sous le capôt ? Dans cet artice, nous verrons comment CSS fonctionne dans le navigateur et comment il utilise le Document Object Model (DOM). Vous verrez également comment analyser votre document utilisé comme exemple.

Lorsqu'un navigateur affiche un document, il doit combiner le contenu du document avec les règles de mise en forme. Pour cela, il traite le document en deux étapes :

1. Le navigateur convertit le contenu HTML et le CSS dans le DOM (Document Object Model ou « Modèle objet du document »). Le DOM représente le document dans la mémoire de l'ordinateur. Pour cela il combine le contenu et la mise en forme (le style).
2. Le navigateur affiche le contenu du DOM.

À propos du DOM

Un DOM possède une structure semblable à celle d'un arbre. Tout élément, attribut ou fragment de texte décrit avec le langage de balises devient un nœud de la structure. Les nœuds sont définis par leurs relations avec d'autres nœuds DOM. Certains éléments sonr les parents de nœuds fils et les nœufs fils possèdent des nœuds frères.

Bien comprendre le DOM pourra vous aider à mieux concevoir, déboguer et maintenir votre code CSS. En effet, le DOM est l'endroit où le CSS est fusionné avec le contenu du document.

La représentation du DOM

Plutôt que d'employer une explication longue et soporifique, prenons un exemple pour voir comment le DOM et CSS fonctionnent ensemble.

Utilisons le code HTML suivant comme exemple :

<p>
  Utilisons :
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheet</span>
</p>

Dans le DOM, le nœud correspondant à notre élément <p> est un parent. Ses enfants sont : un nœud de texte puis des nœuds qui correspondent aux éléments <span>. Les nœuds SPAN sont eux-mêmes des nœuds parents dont les fils sont les textes qu'ils contiennent :

P
├─ "Utilisons :"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheet"

Voici comment un navigateur interprète le fragment de code HTML puis qu'il l'affiche comme un arbre DOM :

p {margin:0;}

Le lien avec CSS

Si transposer le code HTML en un arbre DOM s'avère plutôt simple, comment CSS procède-t-il pour fusionner avec cet arbre ? Pour appliquer une règle CSS à un nœud donné d'un arbre DOM, CSS fournit des outils très puissants qu'on appelle les sélecteurs. Les sélecteurs sont si riches et si puissants qu'un article entier leur sera consacré. Voyons ici les mécaniques de bases..

Utilisons le sélecteur de l'élément 'p' afin d'afficher le texte en rouge :

/* Le sélecteur p qui suit indique que tous les 
   nœuds p qui existent dans l'arbre du DOM
   doivent afficher leur texte en rouge */ 
p {
  color: red;
}

Il est également possible d'ajouter un sélecteur span pour utiliser un style différent sur les autres nœuds de l'élément <p> :

/* Le sélecteur suivant s'applique à 
   "tous les nœuds span qui sont les fils d'un nœud p".
   Tous ces nœuds (et seulement ceux-là) utiliseront
   cette règle : afficher le text en italique. */
p span {
  font-style: italic;
}

Malheureusement, CSS ne fournit pas de méthode pour sélectionner un nœud textuel donné. Cela dit, les sélecteurs CSS sont plus complexes que ces simples sélecteurs d'élément et il existe de nombreuses méthodes pour les combiner afin de créer des sélections spécifiques. Voici un rapide exemple illustrant un tel sélecteur :

/* Le sélecteur qui suit se comprend de la façon suivante :
   "Lorsque la souris survole un nœud span qui est le fils 
   d'un nœud p. Ce nœud span est affiché en bleu. */
p span:hover {
  color: blue;
}

Si on applique ces trois règles CSS à l'arbre DOM précédent, voici ce qu'on obtient :

N'hésitez pas à reproduire cette expérience avec vos propres fichiers HTML et CSS grâce à Thimble.

Inspecter le DOM et CSS

Si vous utilisez Thimble, vous remarquerez que lorsque vous cliquez sur un élément HTML ou un sélecteur CSS dans l'onglet d'édition, l'élément correspondant est mis en avant dans l'onglet de prévisualisation. Cette fonctionnalité est très utile mais comment faire pour inspecter un élément ou un sélecteur CSS uniquement avec un navigateur ? Plusieurs outils existent comme les lunettes à rayons X du Web par exemple.

Ces outils sont plutôt pratiques mais avoir un navigateur est amplement suffisant. En effet, aujourd'hui, les navigateurs web sont fournis avec une palette d'outils destinée aux développeurs web et qui permettent d'inspecter et de mieux comprendre les pagesweb. Parmi les différents outils disponibles dans les principaux navigateurs, deux nous intéresseront particulièrement ici : l'inspecteur de DOM et l'éditeur CSS. Comment fonctionnent-ils ?

1. Ouvrez votre navigateur web et chargez une page HTML (cette page par exemple)
2. Pour inspecter un élement, vous pourrez utiliser deux méthodes :
   1. Cliquez-droit sur l'élément et choisissez « Examiner l'élément »
      
   2. Ouvrez le menu principal sur la droite de la barre d'outils puis choisissez « Développement > Inspecteur »
      
3. Vous avez désormais accès à l'arbre DOM de votre document, affiché dans le panneau à gauche. Les règles CSS qui s'appliquent à l'élément sélectionné sont dans le panneau à droite.
   
4. N'hésitez pas à manipuler ces outils dans tous les sens : vous pouvez modifier le DOM et mettre à jour les règles CSS correspondantes. Par exemple, vous pouvez utiliser ces outils pour afficher le texte en rouge plutôt qu'en vert.

L'outil « Inspecteur » vous sera particulièrement utile pour comprendre ce qui se passe sur une page web, pour diagnostiquer un problème sur une page que vous auriez développée ou pour analyser les techniques utilisées par d'autres développeurs web.

La suite

Vous devriez désormais être capable de mieux comprendre comment les navigateurs utilisent CSS. Il est donc temps de se concentrer sur CSS. Le prochain article sera consacré à la syntaxe de CSS. Il vous aidera notamment à éviter des problèmes fréquents et à comprendre des règles qui peuvent, à première vue, sembler contre-intuitives.