Explique comment le navigateur détermine à quels éléments les styles CSS s'appliquent.

Le navigateur analyse l’arbre HTML et les règles CSS, puis construit l’arbre de rendu (arbre de rendu), qui relie les éléments DOM aux styles CSS correspondants.

Le processus de détermination des styles comprend plusieurs étapes :

1. Analyse du HTML et du CSS : Le navigateur analyse le document HTML, créant un arbre DOM. En même temps, il analyse les styles CSS (des balises <style>, <link> ou styles en ligne), créant un arbre CSSOM (Modèle d’Objets CSS).

2. Correspondance des sélecteurs : Le navigateur parcourt l’arbre DOM et recherche pour chaque nœud dans le DOM les règles correspondantes dans le CSSOM. La correspondance se fait de droite à gauche. Par exemple, pour le sélecteur .parent .child, le navigateur recherche d’abord les éléments avec la classe child, puis vérifie s’ils ont un parent avec la classe parent. Cette méthode permet de rejeter rapidement de grands sous-arbres qui ne correspondent pas au sélecteur.

3. Cascadage : Lorsqu’il trouve plusieurs règles pour un même élément, le navigateur applique la cascade. La cascade détermine l’ordre d’application des styles basé sur :

   • La source des styles (styles de l’auteur, de l’utilisateur, du navigateur).
   • La spécificité des sélecteurs.
   • L’ordre d’apparition des règles.
   • L’utilisation de !important.

   Exemple de spécificité :

   Type de sélecteur	Points
   Styles en ligne	1000
   Sélecteurs ID	100
   Classes, attributs	10
   Éléments, pseudo-éléments	1
   Universel (*)	0

   Les sélecteurs plus spécifiques ont priorité.

4. Héritage : Certaines propriétés CSS sont héritées des éléments parents vers les enfants (par exemple, font-size, color). Le navigateur en tient compte lors de l’application des styles.

5. Construction de l’arbre de rendu : Sur la base de l’arbre DOM et des styles CSS appliqués, l’arbre de rendu (ou arbre de layout) est construit. Il ne contient que les éléments visibles et leurs styles nécessaires pour la disposition et le rendu.

   // Exemple : élément avec plusieurs règles CSS
   // HTML : <p class="text">Hello !</p>
   
   /* CSS */
   p {  /* Spécificité : 1 */
     color: blue;
   }
   
   .text {  /* Spécificité : 10 */
     color: red; /* Cette couleur sera appliquée car elle est plus spécifique */
     font-size: 16px;
   }
   
   p.text { /* Spécificité : 11 */
      font-weight: bold; /* Cette propriété sera appliquée */
   }
   
   /* L’ordre est également important pour les sélecteurs avec la même spécificité */
   div { color: green; }
   div { color: yellow; } /* La couleur jaune sera appliquée */
   

Ainsi, le navigateur passe par les étapes d’analyse, de correspondance, de cascade et d’héritage pour déterminer l’ensemble final de styles pour chaque élément avant de construire l’arbre de rendu et de procéder au rendu.