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.
- Position et ordre d'apparence: ordre d'affichage de vos règles CSS.
- Spécificité: algorithme qui détermine le sélecteur CSS qui présente la correspondance la plus forte.
- 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éé.
- 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.
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.
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 ?
<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.
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:
- Styles de base du user-agent Il s'agit des styles que votre navigateur applique par défaut aux éléments HTML.
- 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.
- CSS créé : CSS que vous créez.
- Créé le
!important
. Tout!important
que vous ajoutez à vos déclarations créées. - Styles d'utilisateur locaux
!important
. Toutes les!important
provenant du CSS au niveau du système d'exploitation ou de l'extension du navigateur - User-agent
!important
: Tous les!important
définis dans le CSS par défaut, fournis par le navigateur.
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
?
!important
a l'origine la plus spécifique.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:
- type de règle normal, tel que
font-size
,background
oucolor
animation
type de règle!important
type de règle (dans le même ordre que l'origine)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.
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...