La cascade

Podcast CSS – 004: The Cascade

CSS signifie Cascading Stylesheets (Feuilles de style en cascade). La cascade correspond à l'algorithme de résolution des conflits pour lesquels plusieurs règles CSS s'appliquent à un élément HTML. C'est pourquoi le texte du bouton stylisé avec le CSS suivant sera bleu.

button {
  color: red;
}

button {
  color: blue;
}

Comprendre l'algorithme de cascade vous aide à comprendre comment le navigateur résout ce type de conflit. L'algorithme en cascade est divisé en 4 étapes distinctes.

  1. Position et ordre d'apparence: ordre d'affichage de vos règles CSS.
  2. Specificity (Spécificité) : algorithme qui détermine le sélecteur CSS qui présente la meilleure correspondance
  3. Origine: ordre d'affichage du code CSS et d'où il provient (style de navigateur, etc.) Code CSS d'une extension de navigateur ou le CSS que vous avez créé
  4. Importance: certaines règles CSS sont plus pondérées 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 pris en compte par la cascade pendant qu'il calcule la résolution des conflits.

La démo présentée au début de cette leçon est l'exemple le plus simple de positionnement. Il existe deux règles qui ont des sélecteurs de spécificité identique, donc le dernier à déclarer l'a emporté.

Les styles peuvent provenir de différentes sources sur une page HTML, comme un tag <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 un <link> qui inclut du CSS en haut de votre page HTML, puis une autre <link> qui inclut le CSS en bas de votre page: la <link> du bas aura le plus de spécificité. Il en va de même avec les éléments <style> intégrés. Plus ils sont précis, plus ils apparaissent bas sur la page.

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

Cet ordre s'applique également aux éléments <style> intégrés. Si elles sont déclarées avant <link>, le code CSS de la feuille de style associée est celui qui est 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 CSS est déclaré remplace tous les autres CSS. quelle que soit sa position, sauf si !important est défini pour une déclaration.

La position s'applique également dans l'ordre de votre règle CSS. Dans cet exemple, l'arrière-plan de l'élément est 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;
}

Possibilité de spécifier deux valeurs pour la même propriété peut être un moyen simple de créer des créations de remplacement pour les navigateurs qui ne prennent pas en charge 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 est appliquée, et la taille de la police est de 1,5 rem

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

Testez vos connaissances

Tester vos connaissances sur la cascade

Si votre page contient 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 la balise <link>. Ainsi, bien que la spécificité de button soit identique, la La position de la règle de style la fait gagner.
jaune
Dans le document HTML, l'arrière-plan du bouton jaune a peut-être été lu d'abord, mais une nouvelle règle de même spécificité a été découverte ultérieurement, ce qui fait que cette règle ne s'applique pas 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 définissant une règle plus spécifique, vous pouvez l'appliquer même si un autre CSS correspondant au sélecteur apparaîtra plus tard dans le CSS.

Dans la prochaine leçon, vous découvrirez comment la spécificité est calculée, Toutefois, gardez quelques points à l'esprit pour éviter trop de problèmes de spécificité.

Le CSS ciblant une classe sur un élément permet de rendre cette règle plus spécifique. et donc considérés comme plus importants à appliquer, que le CSS ciblant uniquement l'élément. Cela signifie qu'avec le CSS suivant, le h1 sera coloré en rouge même si les deux règles correspondent et si 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;
}

id rend le CSS encore plus spécifique. Par conséquent, les styles appliqués à un ID remplaceront 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 un autre.

La spécificité est cumulative

Comme vous le découvrirez dans la prochaine leçon, Chaque type de sélecteur reçoit des points indiquant son degré de spécificité, les points de tous les sélecteurs que vous avez utilisés pour cibler un élément sont additionnés. Cela signifie que si vous ciblez un élément avec une liste de sélecteurs comme Avec a.my-class.another-class[href]:hover, vous obtenez quelque chose de assez difficile à remplacer avec d'autres CSS. Pour cette raison, et pour rendre votre CSS plus réutilisable, nous vous conseillons de choisir des sélecteurs aussi simples que possible. Utilisez la spécificité comme outil pour accéder aux éléments quand vous en avez besoin, mais envisagez toujours de refactoriser de longues listes de sélecteurs spécifiques, si vous le pouvez.

Origine

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

  1. Styles de base user-agent Il s'agit des styles que votre navigateur applique par défaut aux éléments HTML.
  2. Styles d'utilisateurs locaux : Ceux-ci peuvent provenir du système d'exploitation, comme une taille de police de base, ou une préférence de mouvement réduit. Elles peuvent aussi provenir d'extensions de navigateur, comme une extension de navigateur qui permet à un utilisateur d'écrire son propre CSS personnalisé pour une page Web.
  3. CSS créé : Le code CSS dont vous êtes l'auteur.
  4. Créé le !important. Tous les !important que vous ajoutez à vos déclarations créées.
  5. Styles d'utilisateurs locaux !important. Tous les !important provenant du système d'exploitation, ou CSS au niveau de l'extension de 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é dans la liste.

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

Testez vos connaissances

Tester vos connaissances sur les origines des cascades

Testez vos connaissances sur les origines des cascades, en considérant le style suivant des règles de différentes origines:

Style user-agent

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

Amorçage

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

Styles d'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, avec le code HTML suivant:

<h1>Lorem ipsum</h1>

Quel est le margin-block-start final de la h1 ?

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

Importance

Les règles CSS ne sont pas toutes calculées de la même manière, ou recevoir la même spécificité les uns que les autres.

L'ordre d'importance, de la moins importante, 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. Type de règle !important (dans le même ordre que l'origine)
  4. transition type de règle

Les types d'animations actives et de règles de transition ont une importance supérieure aux règles normales. Dans le cas des transitions, l'importance est plus élevée que les types de règles !important. En effet, lorsqu'une animation ou une transition devient active, son comportement attendu est de changer l'état visuel.

Utiliser les outils de développement pour savoir pourquoi certains CSS ne s'appliquent pas

Les outils de développement sur navigateur affichent généralement tous les CSS pouvant correspondre à un élément, par celles qui ne sont pas barrées.

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

Si le CSS que vous pensiez appliquer n'apparaît pas du tout, cela ne correspondait pas à l'élément. Dans ce cas, vous devez regarder ailleurs, par exemple à cause d'une faute de frappe dans le nom d'une classe ou d'un élément, ou d'un code CSS non valide.

Testez vos connaissances

Tester vos connaissances sur la cascade

Le format Cascade peut être utilisé pour...

Résoudre les conflits lorsque plusieurs styles s'appliquent à un élément
C’est l’un de ses principaux objectifs : 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 création Cascade permet de déterminer laquelle choisir.
Règles de style de notation et de pondération.
La notation et la pondération font partie de la phase de tri de The Cascade.
Tri et filtrage des attributs de style
Le tri et le filtrage sont des phases de la création Cascade pour aider à comprendre les aspects de la résolution des conflits.

Ressources