Cascade

La cascade, ou « cascading », est une fonctionnalité fondamentale du CSS (Cascading Style Sheets) qui joue un rôle clé dans la détermination des styles qui s'appliquent aux éléments d'une page web. La cascade définit comment les différents styles et règles sont combinés, résout les conflits entre eux, et détermine quels styles seront finalement appliqués.

La cascade en CSS repose sur trois grands principes :

1. Source - Les styles peuvent provenir de différentes sources, comme les styles en ligne, les feuilles de style internes, les feuilles de style externes, ainsi que les styles de l'utilisateur et du navigateur. La cascade détermine la hiérarchie de ces sources.

2. Spécificité - Chaque règle de style a une spécificité précise basée sur les sélecteurs utilisés. La spécificité aide à résoudre les conflits lorsque différentes règles tentent d'appliquer des styles au même élément.

3. Ordre - Lorsque deux règles ou plus ont la même spécificité, la cascade tient compte de l'ordre dans lequel les règles sont définies. Un style placé plus loin dans le code prend le dessus.

Les styles agissant sur un élément donné peuvent provenir de différents endroits :

• Styles par défaut du navigateur

• Feuille de style externe

1<head>
2  <link rel="stylesheet" href="styles.css">
3</head>

• Feuille de style interne dans le HTML

1<head>
2  <style>
3    .my-paragraph {
4      color: blue;
5    }
6  </style>
7</head>

• Styles en ligne dans le HTML

1<p style="color: red;">Contenu du paragraphe</p>

On peut donc styliser un même élément depuis différents endroits. Quand plusieurs sources définissent la même propriété, le navigateur tranche le conflit ainsi :

1. Les styles par défaut du navigateur sont les plus faibles.
2. Une feuille de style externe (<link>) et une feuille interne (<style>) ont la même force : la règle la plus spécifique l'emporte, et à spécificité égale, celle qui se trouve plus loin dans le document - si <style> est placé sous <link>, il écrase les règles du fichier.
3. Un style en ligne (l'attribut style) l'emporte sur tous les sélecteurs normaux.
4. Une déclaration avec !important l'emporte même sur un style en ligne - c'est un dernier recours (un anti-modèle).

En plus des styles de l'auteur de la page, il existe les styles par défaut du navigateur (en anglais user agent) et les styles de l'utilisateur, par exemple ses réglages de lisibilité. Les déclarations normales se départagent dans cet ordre : navigateur < utilisateur < auteur. !important inverse cet ordre : le !important de l'auteur perd face au !important de l'utilisateur, pour que l'utilisateur puisse toujours imposer, par exemple, une police plus grande.

Tu ajoutes la directive !important à la fin d'une valeur. Elle place cette déclaration au-dessus de toutes les règles normales, quelle que soit la spécificité du sélecteur :

1p {
2  background-color: red !important;
3}

Cet exemple donne un fond rouge à tous les paragraphes, même si une règle plus spécifique ou un style en ligne leur donne une autre couleur de fond. Utilise-le rarement : c'est un anti-modèle.

Et si on utilise le même emplacement mais un sélecteur différent ?

• Groupe un - priorité la plus haute - sélecteur d'ID (#element)
• Groupe deux - priorité moyenne - sélecteur de classe, pseudo-classe, attribut (.element)
• Groupe trois - priorité la plus basse - sélecteur d'élément, pseudo-élément (element)

La spécificité se compare groupe par groupe, en commençant par le plus important : d'abord le nombre d'ID, puis de classes, et enfin d'éléments. C'est pourquoi un seul sélecteur d'ID l'emporte sur n'importe quel nombre de classes, et .menu .lien (deux classes) l'emporte sur .lien (une classe).

Les sélecteurs *, ,, >, +, ~ ne sont pas pris en compte pour déterminer quel style est prioritaire.