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.
- Position et ordre d'apparence: ordre d'affichage de vos règles CSS.
- Specificity (Spécificité) : algorithme qui détermine le sélecteur CSS qui présente la meilleure correspondance
- 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éé
- 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.
<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.
<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 ?
<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.
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:
- Styles de base user-agent Il s'agit des styles que votre navigateur applique par défaut aux éléments HTML.
- 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.
- CSS créé : Le code CSS dont vous êtes l'auteur.
- Créé le
!important
. Tous les!important
que vous ajoutez à vos déclarations créées. - Styles d'utilisateurs locaux
!important
. Tous les!important
provenant du système d'exploitation, ou CSS au niveau de l'extension de navigateur. - User-agent
!important
. Tous les!important
définis dans le CSS par défaut, fournis par le navigateur.
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
?
!important
a l'origine la plus spécifique.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:
- type de règle normal, tel que
font-size
,background
oucolor
animation
type de règle- Type de règle
!important
(dans le même ordre que l'origine) 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é](https://web.dev/static/learn/css/the-cascade/image/an-image-browser-devtool-8306b56aa8a21.png?authuser=19&hl=fr)
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...