La cascade

Podcast CSS – 004: La cascade

CSS est l'abréviation de "Cascading Stylesheets". La cascade est un algorithme permettant de résoudre les conflits dans lesquels plusieurs règles CSS s'appliquent à un élément HTML. C'est la raison pour laquelle le texte du bouton stylisé avec le CSS suivant sera bleu.

button {
  color: red;
}

button {
  color: blue;
}

Comprendre l'algorithme de cascade vous permet de comprendre comment le navigateur résout les conflits de ce type. L'algorithme de la cascade est divisé en quatre étapes distinctes.

  1. Position et ordre d'apparence: ordre d'affichage de vos règles CSS.
  2. Spécificité: algorithme qui détermine le sélecteur CSS qui présente la correspondance la plus forte.
  3. Origine: indique l'ordre d'affichage du CSS et sa provenance. Il peut s'agir d'un style de navigateur, du code CSS d'une extension de navigateur ou du CSS que vous avez créé.
  4. Importance: certaines règles CSS sont pondérées plus que d'autres, en particulier avec le type de règle !important.

Position et ordre d'apparition

L'ordre dans lequel vos règles CSS apparaissent et la façon dont elles apparaissent sont prises en compte par la cascade lors du calcul de la résolution des conflits.

La démonstration au début de cette leçon est l'exemple le plus simple de position. Deux règles ont des sélecteurs de spécificité identique. La dernière à déclarer l'emporte.

Les styles peuvent provenir de diverses sources sur une page HTML, telles qu'une balise <link>, une balise <style> intégrée et le code CSS intégré tel que défini dans l'attribut style d'un élément.

Si vous avez une <link> qui inclut du code CSS en haut de votre page HTML, une autre <link> incluant du code CSS en bas de votre page: l'<link> inférieure est la plus spécifique. Il en va de même avec les éléments <style> intégrés. Plus ils sont situés plus bas sur la page, plus ils sont précis.

Le bouton a un arrière-plan bleu, tel que défini par le CSS, qui est inclus dans un élément <link />. Une règle CSS qui la rend sombre se trouve dans une deuxième feuille de style associée et est appliquée en raison de sa position ultérieure.

Cet ordre s'applique également aux éléments <style> intégrés. S'ils sont déclarés avant un <link>, le CSS de la feuille de style associée sera le plus spécifique.

L'élément <style> est déclaré dans <head>, tandis que l'élément <link /> est déclaré dans <body>. Cela signifie qu'il est plus spécifique que l'élément <style>.

Un attribut style intégré dans lequel le code CSS est déclaré remplace tous les autres CSS, quelle que soit sa position, sauf si une déclaration est !important définie.

La position s'applique également dans l'ordre de votre règle CSS. Dans cet exemple, l'élément aura un arrière-plan violet, car background: purple a été déclaré en dernier. Comme le fond vert a été déclaré avant l'arrière-plan violet, il est désormais ignoré par le navigateur.

.my-element {
  background: green;
  background: purple;
}

Être capable de spécifier deux valeurs pour la même propriété peut être un moyen simple de créer des solutions de remplacement pour les navigateurs qui n'acceptent pas une valeur particulière. Dans l'exemple suivant, font-size est déclaré deux fois. Si clamp() est compatible avec le navigateur, la déclaration font-size précédente sera supprimée. Si clamp() n'est pas compatible avec le navigateur, la déclaration initiale sera respectée et la taille de la police sera de 1, 5 rem.

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

Testez vos connaissances

Testez vos connaissances sur la cascade

Si votre page comporte le code HTML suivant:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

Dans styles.css, se trouve la règle CSS suivante:

button {
  background: yellow;
}

De quelle couleur est l'arrière-plan du bouton ?

rose
L'origine <style> intégrée se trouve plus bas sur la page que la balise <link>. Ainsi, même si la spécificité de button est la même, la position de la règle de style l'emporte.
jaune
Dans le document HTML, l'arrière-plan du bouton jaune a peut-être été lu en premier, mais une nouvelle règle de même spécificité a été découverte par la suite, ce qui rend cette règle non applicable au bouton.

Spécificité

La spécificité est un algorithme qui détermine le sélecteur CSS le plus spécifique, en utilisant un système de pondération ou de notation pour effectuer ces calculs. En rendant une règle plus spécifique, vous pouvez l'appliquer même si un autre CSS correspondant au sélecteur apparaît plus tard dans le CSS.

Dans la leçon suivante, vous découvrirez le mode de calcul de la spécificité. Gardez toutefois quelques points à l'esprit pour éviter de trop nombreux problèmes de spécificité.

Le ciblage CSS d'une classe au niveau d'un élément rend cette règle plus spécifique, et donc considérée comme plus importante à appliquer que le CSS qui cible l'élément seul. Cela signifie qu'avec le CSS suivant, h1 sera coloré en rouge même si les deux règles correspondent, et que la règle du sélecteur h1 figure plus loin dans la feuille de style.

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

Un id rend le CSS encore plus spécifique. Les styles appliqués à un ID remplacent donc ceux appliqués de nombreuses autres manières. C'est l'une des raisons pour lesquelles il est généralement déconseillé d'associer des styles à un id. Il peut être difficile de remplacer ce style par autre chose.

La spécificité est cumulative

Comme vous le verrez dans la leçon suivante, des points sont attribués à chaque type de sélecteur pour indiquer sa spécificité. Les points de tous les sélecteurs que vous avez utilisés pour cibler un élément sont additionnés. Par conséquent, si vous ciblez un élément avec une liste de sélecteurs telle que a.my-class.another-class[href]:hover, vous obtenez un élément assez difficile à remplacer par un autre CSS. C'est pourquoi nous vous conseillons de simplifier au maximum vos sélecteurs afin de rendre votre CSS plus réutilisable. Utilisez la spécificité comme un outil pour accéder aux éléments lorsque vous en avez besoin, mais envisagez toujours de refactoriser des listes de sélection longues et spécifiques, si vous le pouvez.

Origine

Le code CSS que vous écrivez n'est pas le seul appliqué à une page. La cascade prend en compte l'origine du CSS. Cette origine inclut la feuille de style interne du navigateur, les styles ajoutés par les extensions du navigateur ou le système d'exploitation, ainsi que le CSS que vous avez créé. L'ordre de spécificité de ces origines, de la moins spécifique à la plus spécifique, est le suivant:

  1. Styles de base du user-agent Il s'agit des styles que votre navigateur applique par défaut aux éléments HTML.
  2. Styles d'utilisateur locaux : Ceux-ci peuvent provenir du niveau du système d'exploitation, comme une taille de police de base ou une préférence de réduction des mouvements. Elles peuvent également provenir d'extensions de navigateur, comme une extension de navigateur qui permet à un utilisateur de créer son propre CSS personnalisé pour une page Web.
  3. CSS créé : CSS que vous créez.
  4. Créé le !important. Tout !important que vous ajoutez à vos déclarations créées.
  5. Styles d'utilisateur locaux !important. Toutes les !important provenant du CSS au niveau du système d'exploitation ou de l'extension du navigateur
  6. User-agent !important : Tous les !important définis dans le CSS par défaut, fournis par le navigateur.
Démonstration visuelle de l&#39;ordre des origines, comme expliqué également dans la liste.

Si vous avez créé un type de règle !important dans le CSS et que l'utilisateur dispose d'un type de règle !important dans son code CSS personnalisé, quel CSS gagne ?

Testez vos connaissances

Tester vos connaissances sur les origines des cascades

Testez vos connaissances sur les origines de la cascade, en tenant compte des règles de style suivantes pour différentes origines:

Style user-agent

h1 { margin-block-start: 0.83em; }

Amorçage

h1 { margin-block-start: 20px; }

Styles de l'auteur de la page

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

Style personnalisé de l'utilisateur

h1 { margin-block-start: 2rem !important; }

Ensuite, à partir du code HTML suivant:

<h1>Lorem ipsum</h1>

Quelle est la dernière margin-block-start de h1 ?

20px
L'amorçage fait partie de l'origine créée, qui perd au profit du style d'utilisateur local important.
0,83 em
L'origine du style user-agent perd au profit du style utilisateur local important.
Brém
Ce style personnalisé de l'utilisateur !important a l'origine la plus spécifique.
2ch
Ce style d'auteur fait partie de l'origine créée, qui perd l'importance du style de l'utilisateur local.
1ch
Ce style d'auteur fait partie de l'origine créée, qui perd l'importance du style de l'utilisateur local.

Importance

Toutes les règles CSS ne sont pas calculées de la même manière ou ne sont pas toutes traitées de la même manière.

L'ordre d'importance (du moins important au plus important) est le suivant:

  1. type de règle normal, tel que font-size, background ou color
  2. animation type de règle
  3. !important type de règle (dans le même ordre que l'origine)
  4. transition type de règle

Les types d'animations et de règles de transition actifs sont plus importants que les règles normales. Dans le cas de transitions, l'importance est supérieure à celle des types de règles !important. En effet, lorsqu'une animation ou une transition devient active, son comportement attendu est de modifier l'état visuel.

Utiliser les outils de développement pour savoir pourquoi certains CSS ne sont pas appliqués

Les outils de développement du navigateur affichent généralement tous les CSS pouvant correspondre à un élément, ceux qui ne sont pas utilisés étant barrés.

Image des outils de développement du navigateur avec le code CSS écrasé et barré

Si le CSS que vous pensiez à appliquer ne s'affiche pas, cela signifie qu'il ne correspond pas à l'élément. Dans ce cas, vous devez chercher une autre erreur, par exemple une faute de frappe dans le nom de la classe ou de l'élément, ou un code CSS non valide.

Testez vos connaissances

Testez vos connaissances sur la cascade

La création Cascade peut être utilisée pour...

Résolution des conflits lorsque plusieurs styles s'appliquent à un élément.
C'est l'un de ses principaux objectifs, à savoir la résolution des conflits.
Assurez-vous qu'il n'y a qu'une seule valeur de style pour chaque propriété au moment du dessin.
Le texte ne peut avoir qu'une seule couleur et la cascade permet de déterminer la couleur à appliquer.
Règles de style de notation et de pondération.
La notation et la pondération font partie de la phase de tri de la Cascade.
Tri et filtrage des attributs de style
Le tri et le filtrage sont des phases de The Cascade visant à aider à comprendre les aspects de la résolution des conflits.

Ressources