DEVENIR-WEBMASTER.COM Log In
 28
Faire le quizz close

Comprendre les mécanismes de la cascade en CSS

Visiter ma chaine Youtube

# Le principe de la cascade close

La cascade des déclaration et leurs traitements
La cascade des déclarations et le traitement des conflits

# Qu'est ce qu'un conflit ? close

Il y a conflit lorsque pour le même élément et la même propriété deux valeurs sont proposées par deux règles CSS différentes.

Dans cet exemple la couleur rouge est demandée par la règle dont le sélecteur est une classe alors que la couleur verte est demandée par la règle dont le sélecteur est un identificateur.

Un exemple de conflit CSS

Bien entendu le navigateur doit faire un choix. Un choix que le programmeur puisse comprendre et anticiper. C'est le but de ce que j'appelle l'algorithme de résolution des conflits.

# L'algorithme de résolution des conflits close

L'algorithme de résolution des conflits

Le critère de provenance et d'importance

La première phase de l'algorithme de résolution des conflits consiste à répartir les déclarations en catégories. Une déclaration sera rangée dans une catégorie selon sa provenance et selon son importance.

Par provenance on entend l'endroit ou la déclaration a été écrite à savoir la feuille de style du développeur, celle de l'utilisateur ou celle du navigateur.

Précisons qu'en termes de provenance il n'y a pas de différence entre une règle écrite par un développeur dans un fichier HTML au moyen de la balise style et une règle écrite dans un fichier séparé.

Par importance on entend les déclarations qui sont suivies du mot clé !important.

Exemple de déclaration CSS avec le mot clé important
Un exemple de déclaration importante

Les déclarations CSS sont réparties dans la hiérarchie de catégories suivantes :

Répartition des déclarations dans des catégories
Répartition des déclarations dans des catégories

Lorsqu'il y a conflit entre deux déclarations qui sont dans deux catégories différentes c'est la déclaration qui se trouve dans la catégorie la plus haute qui sera choisie et appliquée.

Si les deux déclarations sont dans la même catégorie il n'est pas possible de faire un choix. A ce moment là l'algorithme de résolution doit se poursuivre avec un autre critère.

Le critère de spécificité

La spécificité est la deuxième phase de l'algorithme de résolution des conflits. La spécificité est évaluée au niveau du sélecteur de la règle qui contient la déclaration.

La spécificité d'un sélecteur se calcule manuellement mais c'est plus simple avec un calculateur.

Un sélecteur a une spécificité élevée lorsqu'il est très précis, très spécifique. Dans ce cas il sélectionne peu d'éléments dans l'arborescence du document. Par exemple un sélecteur composé d'un identificateur #id qui sélectionne un seul élément aura une spécificité de 0100.

Un sélecteur a une spécificité faible lorsqu'il est peu précis, peu spécifique. Dans ce cas il sélectionne beaucoup d'éléments dans l'arborescence du document. Par exemple un sélecteur de type qui sélectionne tous les éléments d'un certain type ici tous les paragraphes aura une spécificité de 0001.

Ci dessous on compare sur le calculateur ces deux cas de figures.

Exemple de calcul de spécificité
Exemple de calcul de spécificité

En cas de conflit c'est la déclaration accompagnée du sélecteur avec la plus grande spécificité qui sera choisie et appliquée.

Dans notre exemple c'est la déclaration accompagnée du sélecteur #id qui sera choisie car il a une spécificité de 0100 alors que le sélecteur de type p a une spécificité de 0001.

Supposons maintenant que nos deux sélecteurs aient la même spécificité. Dans ce cas il n'est pas possible de faire un choix. A ce moment là l'algorithme de résolution doit se poursuivre avec un autre critère.

Le critère de position

Les règles sont écrites dans un certain ordre. C'est la règle qui est écrite en dernier qui sera choisie. Il y en a forcément une. Donc à ce dernier stade l'algorithme de résolution des conflits a obligatoirement une déclaration à proposer. L'algo est terminé.

# Précision concernant le calcul de spécificité close

Si on regarde précisément les choses la spécificité est en fait un quadruplet de 4 valeurs (x,x,x,x). Les quatre valeurs sont concaténées et assimilées à un chiffre décimal xxxx.

Donc pour comparer (1,0,0,0) avec (0,1,0,0) on compare 1000 à 0100.

Ce procédé de calcul est un peu empirique et il faut le prendre comme il est.

Ce que dit la spec CSS3 et la spec CSS2-1. La spec CSS2-1 apporte des précisions concernant le calcul de la spécificité lorsque l'on utilise l'attribut style dans une balise HTML.

Ci dessous des valeurs de spécificité à connaître pour les sélecteurs les plus simples.

SélecteurSpécificité
un sélecteur de type(0,0,0,1)
un sélecteur de classe(0,0,1,0)
un sélecteur de d'id(0,1,0,0)
attribut style(1,0,0,0)

# Exemple 1 close

Résolution par critère de provenance et importance

Dans cet exemple la première règle qui demande le rouge est notée importante et appartient à la catégorie 2 alors que la deuxième règle qui demande le vert appartient à la catégorie 3. C'est la catégorie 2 qui est choisie et le texte sera en rouge.

Ici le critère de provenance et d'importance suffit pour faire un choix.

# Exemple 2 close

Résolution par critère de specificité

Dans cet exemple les deux règles appartiennent à la catégorie 3. Le critère de provenance et d'importance ne suffit pas pour faire un choix. Il faut passer au critère de spécificité. Le sélecteur de la première règle qui demande du rouge est un sélecteur de classe avec une spécificité de 0010 alors que le sélecteur de la deuxième règle qui demande du vert est un sélecteur d'identificateur avec une spécificité de 0100. Le texte sera donc en vert.

Ici le critère de spécificité a permis de faire un choix.

# Exemple 3 close

Résolution par critère de position

Dans cet exemple les deux règles appartiennent à la catégorie 3. Le critère de provenance et d'importance ne suffit pas pour faire un choix. Les deux sélecteurs sont des sélecteurs de classe avec la même spécificité. Le critère de spécificité ne suffit pas à son tour pour faire un choix. Il faut passer au critère de position. La dernière règle dans l'ordre d'écriture des règles CSS demande un texte en vert. C'est celle ci qui sera choisie. Le texte sera donc en vert.

Ici le critère de position a permis de faire un choix.

Noter bien au passage que l'ordre dans lequel est donnée la liste des classes au niveau de l'attribut class n'a aucune importance.