La cascade est un concept fondamental de CSS. Après tout il forme l’initial du mot de l’Abréviation CSS.
Qu’est-ce que ça veut dire ce fameux mot ?
Et bien la cascade est un processus ou algorithme qui détermine les priorités appliquées à chaque élément de la page.
Il le fait en tenant compte de :
- Spécificité
- Importance
- Hérédité
- Et de l’ordre dans le fichier
Il s’occupe de résoudre des conflits.
Deux ou plusieurs règles concurrentes pour la même propriété appliquée à un élément doivent être élaborées conformément à la spécification CSS, afin de déterminer laquelle doit être appliquée.
Il tient de signaler que même si vous avez un seul fichier css, il y a d’autres CSS qui feront partie du processus, notamment le Css du navigateur. Les navigateurs sont livrés avec des règles de css différentes des autres. Sans oublier les Css de différentes extensions que vous avez dans votre navigateur.
Toutes ces règles entrent en jeu lors du rendu de votre css.
Parlons maintenant des notions de spécificité et d’héritage.
Spécificité
Que se passe-t-il lorsqu'un élément est ciblé par plusieurs règles, avec des sélecteurs différents, qui affectent la même propriété ?
Par example:
<p class="dog-name">Roger</p>
Nous pouvons voir:
p {
color : red ;
}
Une autre règle qui cible dog-name
.dog-name {
color: yellow;
}
Quelle règle va primer sur d'autres et pourquoi?
Entre la spécificité. La règle la plus spécifique l'emportera. Si deux règles ou plus ont la même spécificité, celle qui apparaît en dernier l'emporte.
Parfois, ce qui est plus spécifique dans la pratique est un peu déroutant pour les débutants.
Je dirais que c'est aussi déroutant pour les experts qui ne regardent pas ces règles
Fréquemment, ou qui les négligent simplement.
Calcul des spécificités
La spécificité est calculée selon une convention.
Nous avons 4 créneaux, et chacun d'eux commence à 0 : 0 0 0 0 0 . La fente à gauche est la
Plus importante, et la plus à droite est la moins importante.
Comme cela fonctionne pour les nombres dans le système décimal : 1 0 0 0 est supérieur à 0100.
Emplacement 1
La première case, la plus à droite, est la moins importante.
Nous augmentons cette valeur lorsque nous avons un sélecteur d'élément. Un élément est un nom de balise. Si vous avez plus d'un sélecteur d'élément dans la règle, vous incrémentez en
Conséquence la valeur stockée dans cet emplacement.
Example:
P {
} /* 0 0 0 1 */
Span {
} /* 0 0 0 1 */
P span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
Div p > span {
} /* 0 0 0 3 */
Emplacement 2
Le deuxième emplacement est incrémenté de 3 choses :
* sélecteurs de classe
* sélecteurs de pseudo-classes
* sélecteurs d'attributs
Chaque fois qu'une règle en rencontre une, nous incrémentons la valeur de la deuxième colonne à partir de la
Droite.
Exemple :
.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
: hover {
} /* 0 0 1 0 */
Bien sûr, les sélecteurs de l'emplacement 2 peuvent être combinés avec les sélecteurs du 1 :
Div .name {
} /* 0 0 1 1 */
a [href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */
Emplacement 3
L'emplacement 3 contient la chose la plus importante qui peut affecter votre spécificité CSS dans
Un fichier CSS : l’id.
Chaque élément peut avoir un attribut id attribué, et nous pouvons l'utiliser dans notre feuille de
Style pour cibler l'élément.
Exemple :
#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */
Emplacement 4
L'emplacement 4 est affecté par les styles en ligne. Tout style en ligne aura priorité sur toute règle
Définie dans un fichier CSS externe ou à l'intérieur de la balise de style dans l'en-tête de la page.
Example:
<p style="color: red">Test</p> /* 1 0 0 0 */
Même si une autre règle du CSS définit la couleur, cette règle de style en ligne sera appliquée.
Emplacement 5
La spécificité n'a pas d'importance si une règle se termine par !important : càd n'importe quelle style vous allez appliquer à un élément des
Emplacements dessus,
Exemple :
p {
font-size: 20px !important;
}
L'ajout de !important dans une règle CSS va rendre cette règle plus importante que toute autre
Règle, selon les règles de spécificité. La seule façon dont une autre règle peut prévaloir est d'avoir
Également !important et d'avoir une plus grande spécificité dans les autres emplacements moins Importants.
Héritage
Lorsque vous définissez certaines propriétés sur un sélecteur en CSS, elles sont héritées par tous les enfants de ce sélecteur.
Cela se produit parce que certaines propriétés ont du sens pour être héritées. Cela nous aide à
Écrire CSS de manière beaucoup plus concise, car nous n'avons pas à redéfinir explicitement cette
Propriété sur chaque enfant.
Certaines autres propriétés ont plus de sens pour ne pas être héritées.
Pensez aux polices : vous n'avez pas besoin d'appliquer la famille de polices à chaque balise de
Votre page. Vous définissez la police de la balise body et tous les enfants en héritent, ainsi que D’autres propriétés.
Propriétés qui héritent
Voici une liste des propriétés qui héritent. La liste n'est pas exhaustive, mais ces règles ne sont que les plus populaires
Que vous utiliserez probablement :
**border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
font
letter-spacing
line-height
Ceci est un simple survol sur le fameux Cascade, de fois nous maitrisons certain langage sans pour autant comprendre les
Taches et formules derrière, surtout son fonctionnement.
J'espère que vous avez appris quelque chose de cet article, n'oubliez pas de vous abonner à la newsletter, de commenter, et de partager si l'article vous a plu.
A plus!!!