Posté sur
Il est temps de me familiariser avec le CSS moderne. Il y a tellement de nouveautés en CSS que je connais trop peu. Pour changer cela, j’ai lancé #100DaysOfMoreOrLessModernCSS. Pourquoi un CSS plus ou moins moderne ? Parce que certains sujets porteront sur des fonctionnalités de pointe, tandis que d’autres existent depuis un certain temps déjà, mais j’ai juste peu ou pas d’expérience avec cela.
Afin de comprendre comment fonctionne en couches en cascade, vous devez comprendre comment fonctionne généralement. La conclusion de cet article n’est peut-être pas ce à quoi vous vous attendiez.
Les bases
Commençons agréablement et facilement. Nous avons deux déclarations avec la même spécificité. Le second l’emporte car il vient plus tard dans le document.
h1 {
color: green;
}h1 {
color: red;
}
Ajouter à la première déclaration augmente sa spécificité, virant au vert.
h1 {
color: green ;
}h1 {
color: red;
}
Jusqu’ici, tout va bien. Je suppose que la plupart d’entre vous le savaient déjà. Voyons maintenant les couches en cascade et ce qui se passe si nous utilisons en couches.
Couches
Nous avons deux couches, chacune avec une déclaration avec la même spécificité. La deuxième déclaration l’emporte car elle se trouve dans une couche définie ultérieurement dans le document.
@layer base {
h1 {
color: green;
}
}@layer components {
h1 {
color: red;
}
}
Si nous ajoutons des styles sans calque, la couleur devient bleue car les styles sans calque ont priorité sur les styles en calque.
h1 {
color: blue;
}@layer base {
h1 {
color: green;
}
}
@layer components {
h1 {
color: red;
}
}
Si nous ajoutons à la déclaration dans la couche de base, la couleur devient verte.
h1 {
color: blue;
}@layer base {
h1 {
color: green ;
}
}
@layer components {
h1 {
color: red;
}
}
Bon, je dois m’arrêter ici un instant. Tout cela fait sens pour moi. Voici ce que je pensais qu’il se passait avant d’écrire ce billet de blog :
Par défaut, notre ordre de priorité est le suivant :
- Styles non superposés (les plus importants)
- couche de composants
- couche de base (la moins importante)
Les démos 3 et 4 le confirment.
Si nous ajoutons à la déclaration dans la couche de base, notre commande ressemble à ceci :
- e couche de base (la plus importante)
- Styles non superposés
- couche de composants
- couche de base (la moins importante)
La démo 5 le confirme.
Si je continue à étendre ma logique, cela signifierait que si nous ajoutons à la couche des composants, l’ordre ressemble à ceci :
- !couche des composants importants (la plus importante)
- ! couche de base importante
- Styles non superposés
- couche de composants
- couche de base (la moins importante)
Essayons!
h1 {
color: blue;
}@layer base {
h1 {
color: green ;
}
}
@layer components {
h1 {
color: red ;
}
}
Nooope, pas rouge, toujours vert. Pour expliquer pourquoi, regardons les spécifications.
«CSS tente de créer un équilibre des pouvoirs entre les feuilles de style de l’auteur et de l’utilisateur. Par défaut, les règles de la feuille de style d’un auteur remplacent celles de la feuille de style de l’utilisateur, qui remplacent celles de la feuille de style par défaut de l’agent utilisateur. Pour équilibrer cela, une déclaration peut être marquée comme importante, ce qui augmente son poids dans la cascade et inverse l’ordre de priorité” (c’est moi qui souligne).
CSS en cascade et héritage niveau 3
Cela signifie que n’augmente pas seulement le poids d’une déclaration dans la cascade, mais inverse l’ordre de priorité. Ainsi, dans notre premier exemple de base ne fait pas que rendre la première déclaration plus importante, non, cela inverse l’ordre de préséance !
h1 {
color: green ;
}h1 {
color: red;
}
Si nous rendons la première déclaration importante, cela…
- h1 couleur rouge (le plus important)
- h1 couleur verte (le moins important)
… devient ceci :
- h1 couleur verte (la plus importante)
- h1 couleur rouge (le moins important)
Avant les couches en cascade, cela n’avait pas vraiment d’importance, mais maintenant, avec plusieurs couches au niveau de l’auteur, il est essentiel de comprendre ce concept. Si nous appliquons cette logique à notre dernier exemple de couche, nous obtenons ceci :
- e couche de base (la plus importante)
- !Couche des composants importants
- s styles non superposés
- Styles non superposés
- couche de composants
- couche de base (la moins importante)
Donc, même si on ajoute aux styles non superposés, la déclaration dans la couche de base l’emporte toujours.
h1 {
color: blue ;
}@layer base {
h1 {
color: green ;
}
}
@layer components {
h1 {
color: red ;
}
}
J’ai compris? Non? Ne t’inquiète pas. Il m’a fallu plus d’une heure pour le comprendre. Cette vidéo d’Una Kravets a beaucoup aidé :
Voir sur CodePen.