Cette réponse est pour les débutants absolus. Si vous voulez un aperçu de cette réponse, veuillez lire ma deuxième réponse.
La cascade est le processus de combinaison de différentes feuilles de style et de résolution de conflits entre différentes règles et déclarations CSS lorsque plusieurs règles s'appliquent à un certain élément . Parce que comme vous le savez probablement déjà, une déclaration pour une certaine propriété de style telle que la taille de la police peut apparaître dans plusieurs feuilles de style et également plusieurs fois dans une seule feuille de style.
Pour comprendre la cascade, vous devez commencer par la phase d'analyse CSS car dans la phase d'analyse, la première étape consiste à résoudre les déclarations CSS conflictuelles et la deuxième étape consiste à traiter les valeurs CSS finales.
Désormais, le CSS peut également provenir de différentes sources. Le plus courant est le CSS que nous, les développeurs, écrivons. Ces déclarations que nous mettons dans nos feuilles de style sont appelées les déclarations d'auteur. Une autre source peut être les déclarations des utilisateurs, qui sont des CSS provenant de l'utilisateur. Par exemple, lorsque l'utilisateur modifie la taille de police par défaut dans le navigateur, il s'agit du CSS de l'utilisateur, et enfin, il y a les déclarations de navigateur par défaut.
Par exemple, si nous mettons une balise d'ancrage dans notre HTML pour un lien et que nous ne le stylisons pas du tout, il sera généralement rendu avec du texte bleu et souligné, à droite. C'est ce qu'on appelle le CSS de l'agent utilisateur car il est défini par le navigateur. La cascade combine donc les déclarations CSS provenant de toutes ces sources différentes, mais comment la cascade résout-elle réellement les conflits lorsque plus d'une règle s'applique?
Eh bien, ce qu'il fait, c'est regarder l'importance, la spécificité du sélecteur et l'ordre de source des déclarations contradictoires afin de déterminer laquelle a la priorité, et voici comment cela fonctionne. Tout d'abord, la cascade commence par donner les déclarations contradictoires d'importance différente en fonction de l'endroit où elles sont déclarées sur leur source. Les déclarations les plus importantes sont les déclarations d'utilisateur marquées du mot clé important.
Les deuxièmes déclarations les plus importantes sont les déclarations de l'auteur marquées d'importantes. Troisièmement, les déclarations normales de l'auteur, puis les déclarations normales des utilisateurs et enfin les moins importantes sont les déclarations par défaut du navigateur, ce qui est en fait très logique que nous puissions facilement écraser ces déclarations provenant par défaut du navigateur.
Maintenant, bien souvent, nous aurons juste un tas de règles contradictoires dans nos feuilles de style d'auteur sans aucun mot clé important. C'est en fait le scénario le plus courant et dans ce cas, toutes les déclarations ont exactement la même importance. Maintenant, que se passe-t-il dans ce cas? Ce que fait la cascade si tel est le cas est de calculer et de comparer les spécificités des sélecteurs de déclaration, et c'est ainsi que cela fonctionne.
Les styles en ligne ont la spécificité la plus élevée, suivis des ID, puis des classes, des pseudo-classes et des sélecteurs d'attributs, et enfin du sélecteur d'élément et de pseudo-élément le moins spécifique. Donc, lorsque nous avons des déclarations contradictoires avec la même importance que celle que nous avons vue dans la dernière diapositive, nous calculons leur spécificité de sélecteur en fonction des priorités que je viens de vous montrer, mais voyons comment nous calculons réellement les spécificités avec un petit exemple, c'est toujours mieux, non.
D'après l'exemple ci-dessus, toutes ces déclarations ont la même importance, car ce sont toutes des déclarations d'auteur. Calculons donc leurs spécificités de sélecteur afin de savoir si la couleur de fond sera soit bleu, vert, violet ou jaune, et c'est ainsi que nous le faisons. La spécificité n'est en fait pas qu'un seul chiffre, mais un chiffre pour chacune des quatre catégories que je vous ai montrées auparavant. Styles en ligne, ID, classes, pseudo-éléments et attributs, et enfin éléments et pour chacun d'entre eux, nous comptons le nombre d'occurrences dans le sélecteur.
Donc ici dans le sélecteur un, nous n'avons pas de styles en ligne bien sûr, car un style en ligne doit être écrit dans le HTML, ce qui n'est pas le cas ici, donc c'est un zéro. Nous n'avons pas non plus d'ID ici, donc c'est encore un zéro, mais nous avons une classe, la classe bouton. Donc pour la catégorie classes, nous en avons un, et enfin, il n'y a pas de sélecteur d'élément ici donc zéro pour celui-là également, et c'est tout. La spécificité du sélecteur est zéro, zéro, un, zéro.
Maintenant, comparons-le aux autres. Le suivant n'est pas non plus un style en ligne, donc zéro pour le premier. Maintenant, nous avons ici en fait un sélecteur d'ID pour l'ID de navigation, à droite, donc c'est un pour l'ID. Nous avons également deux classes tirant à droite et bouton, donc c'est un deux pour la catégorie classes, et enfin, il y a aussi deux sélecteurs d'éléments ici. L'élément nav et l'élément div, ce qui signifie qu'il est également deux pour la catégorie éléments. Donc finalement la spécificité du sélecteur est zéro, un, deux, deux, qui est en fait un sélecteur très spécifique.
Le sélecteur numéro trois est très simple. C'est juste un sélecteur d'élément et donc la spécificité est zéro, zéro, zéro, un.
Maintenant le dernier, le sélecteur numéro quatre. Tout d'abord, nous avons l'ID de navigation, donc c'est un pour l'ID. Ensuite, nous avons une classe, la classe bouton, et aussi une pseudo-classe, qui est survolée, ce qui en fait deux pour la catégorie classes au total. Puisqu'il y a aussi un sélecteur d'élément, la spécificité finale est zéro, un, deux, un.
Voyons maintenant comment utilisons-nous réellement ces nombres pour savoir lequel des sélecteurs s'applique. Nous commençons à regarder les nombres de gauche à droite en commençant par la catégorie la plus spécifique, les styles en ligne. S'il existe un sélecteur avec un pour les styles en ligne l'emporte sur tous les autres sélecteurs, car il s'agit de la catégorie la plus spécifique. Eh bien, ce n'est pas le cas ici, alors passons aux identifiants. Nous voyons que les sélecteurs deux et quatre en ont un ici tandis que les autres ont zéro, donc ceux avec zéro sont hors jeu car ils sont moins spécifiques que les sélecteurs deux et quatre ceux avec les ID.
Maintenant que les deux sélecteurs en ont un dans la catégorie ID, nous devons passer à autre chose et vérifier les classes. Ils ont tous les deux un deux dans cette catégorie, c'est toujours une égalité entre eux, et enfin, dans la catégorie des éléments, le sélecteur deux a un deux tandis que le sélecteur quatre n'en a qu'un et nous avons donc un gagnant ici. Le sélecteur numéro deux est le sélecteur le plus spécifique de tous et donc il donnera à notre bouton un arrière-plan vert.34 La valeur de la déclaration gagnante est appelée la valeur en cascade parce qu'elle est le résultat de la cascade.
Nous commençons donc avec un tas de valeurs déclarées dans ce cas bleu, vert, violet et jaune, l'une d'elles gagne et devient la valeur en cascade, qui est dans notre exemple verte.
Imaginez maintenant que le secteur quatre ait également deux éléments, alors les deux sélecteurs deux et quatre auraient exactement la même spécificité, à droite. Alors que se passe-t-il dans ce cas et je vous promets que c'est presque fini maintenant, d'accord. Eh bien, s'il y a encore une égalité à ce stade, la dernière déclaration CSS écrite dans le code est celle qui s'appliquera. Donc encore une fois si tout est égal, si tous les sélecteurs de déclarations ont la même spécificité alors c'est simplement la dernière déclaration qui sera utilisée pour styliser l'élément sélectionné.