Faire une dégringolade avec CSS - mannequins

Que signifie le terme cascade pour les feuilles de style? Cela signifie qu'une règle CSS dégringole à travers le code, et se heurte parfois à une règle contradictoire.

La cascade concerne ce que les programmeurs appellent la précédence : qui gagne quand il y a un conflit? Plus d'un style peut s'appliquer à un tag donné. Par exemple, il y a toujours le style défini par le navigateur par défaut, par exemple le noir comme couleur de texte par défaut. Si vous spécifiez une autre couleur dans une règle CSS, la cascade permet à votre règle de dominer, d'avoir la priorité sur le style intégré.

Mais comment le navigateur décide-t-il du style qui l'emporte si deux règles CSS entrent en conflit les unes avec les autres? Les styles contradictoires doivent-ils être combinés? Que se passe-t-il si les styles sont complètement incompatibles - comme un style qui spécifie l'italique et l'autre non-italique?

Visualisation de la spécificité

Plusieurs facteurs déterminent le style qui l'emporte lorsque les styles s'entrechoquent: l'héritage, l'arborescence dans un document et la spécificité (ou proximité ) d'un style. Probablement la règle de collision la plus facile à comprendre implique où le style a été défini. Vos styles CSS peuvent être définis dans quatre emplacements principaux:

• Les styles par défaut du navigateur.
• Une feuille de style externe (un fichier.css contenant des définitions de style référencées depuis le document HTML avec un élément Link).
• Une feuille de style incorporée (styles définis dans le document HTML, à l'intérieur de sa balise.Ce type de style est parfois appelé interne ).
• Un style en ligne (un style défini comme un attribut dans un élément HTML lui-même et dont l'effet est limité à cet élément seulement ). Par exemple, c'est un style en ligne typique:

Cette liste illustre également l'ordre dans lequel les styles conflictuels "gagnent" dans n'importe quel conflit. Pensez à l'ordre comme le style le plus proche de l'élément gagne. Par exemple, le style en ligne - niché à l'intérieur de l'élément lui-même - est le plus proche. Donc, si plus d'un style est spécifié pour cet élément, un style en ligne est le style utilisé. Cette proximité du style à l'élément qui lui correspond est plus formellement connue sous le nom de spécificité .

L'emplacement du style avec la deuxième priorité la plus élevée est la feuille de style interne située dans l'en-tête du document HTML. La troisième priorité la plus élevée va à la feuille de style externe - le fichier séparé. Et la plus faible priorité, celle que tous les autres trump, est le style par défaut. Après tout, la valeur par défaut est l'apparence qu'une feuille de style est censée modifier.

Voici un exemple illustrant comment IE décide entre les couleurs bleues et rouges:

p {color: red;}

Je suppose que je suis bleu.

Pour tester ce document, tapez le code HTML dans le Bloc-notes, puis enregistrez-le à l'aide du nom de fichier EmTest. htm. Chargez cette page Web en double-cliquant sur son nom de fichier dans l'Explorateur Windows. Vous verrez la phrase Je suppose que je suis bleu apparaître en bleu. L'élément

a été défini de deux manières différentes. Dans le style incorporé, il est défini en rouge, mais cette définition est remplacée par la définition en ligne de la couleur bleue.

Essayez de supprimer le style en ligne pour voir ce qui se passe. Changez la ligne en

Je suppose que je suis bleu.

Testez à nouveau en réenregistrant le fichier du Bloc-notes que vous venez de modifier.

Pas besoin de double-cliquer à nouveau sur ce nom de fichier dans Windows Explorer pour charger la nouvelle version dans IE. Après avoir chargé un document, c'est l'adresse par défaut dans IE - dans ce cas, une adresse d'un. fichier htm sur votre disque dur. Si vous modifiez ce fichier comme vous venez de le faire dans cet exemple, tout ce que vous avez à faire pour voir la modification est d'appuyer sur F5. Cela "rafraîchit" IE.

Certaines personnes préfèrent utiliser la vue source intégrée du navigateur comme moyen rapide de modifier et de retester le code CSS. Choisissez Affichage -> Source. Vous pouvez apporter des modifications au code, puis enregistrez-le. Netscape et Firefox mettent en évidence la syntaxe, que certains programmeurs trouvent utile.

Après avoir chargé la nouvelle version de ce document dans IE, la ligne Je suppose que je suis bleu est maintenant affichée en rouge. Le conflit entre les définitions de style incorporé et en ligne a été résolu car vous avez supprimé le style en ligne.

Vous pouvez remplacer les règles de priorité normales en utilisant le! Commande importante pour spécifier que ce style doit être utilisé, quoi qu'il arrive. Un! La déclaration importante remplace toutes les autres définitions de style. Vous ajoutez la commande comme ceci:

p {color: blue! important;}

Dans CSS1, les styles déclarés importants par l'auteur de la page Web remplacent même les styles déclarés importants par le lecteur. Cependant, dans CSS2, les styles de lecteurs importants ont triomphé des styles d'auteurs importants, et en fait plus de styles d'auteurs , qu'ils soient marqués ou non.

Compréhension de la spécificité CSS

Le terme spécificité est également utilisé pour décrire la seconde manière qu'un navigateur calcule quel style gagne lorsque les styles entrent en conflit. Tout d'abord, le navigateur cherche la proximité - mais si la proximité est identique? C'est à ce moment que cette seconde technique est appliquée.

Imaginez, par exemple, que deux feuilles de style différentes soient référencées par le même document HTML (oui, vous pouvez attacher plus que sur un fichier CSS au code HTML d'une page Web donnée). Mais, dans l'une de ces feuilles, H1 est de style gras, et dans une autre feuille il est stylisé en italique. Quel est le mauvais navigateur à faire dans ce cas? Quelle spécification gagne?

Contrairement aux exemples de collision de style plus haut dans ce chapitre, où proximité pourrait être utilisé pour déclarer un gagnant, ici vous avez les deux styles situés au même degré de proximité (la même spécificité). Ces deux définitions de style sont situées dans des feuilles de style externes.

Dans ce cas, le navigateur fait un peu de calcul bizarre pour décider du style à utiliser.Comme auparavant, le style le plus "spécifique" gagne. Mais qu'est-ce qui compte comme spécificité dans ce concours? Ce n'est pas la même chose que le facteur de «proximité». Le navigateur doit faire un peu de calcul étrange, mais vous ne pouvez vraiment pas appeler thismath. C'est juste un genre étrange d'accumulation de valeurs où certains styles ont des ordres de grandeur plus de poids que d'autres. Ne dérange pas ta jolie tête à propos de ce genre de choses si tu ne trouves pas de calculs particuliers intéressants.

Que fait le navigateur pour calculer la spécificité de deux styles concurrents si leur facteur de «proximité» est identique? Trois choses:

• Regarde un style et compte le nombre d'attributs ID, le cas échéant
• Compte le nombre d'attributs de classe, le cas échéant
• Compte le nombre de sélecteurs (vous pouvez regrouper les sélecteurs dans un style comme ceci: h1, h2, h3)

Le navigateur ne ajoute pas ces nombres ensemble; il concatène simplement les chiffres . Peut-être s'agit-il d'une sorte d'arithmétique utilisée par les extraterrestres dans leur galaxie , mais je n'en ai jamais entendu parler. Imaginez si vous avez obtenu le numéro 130 par le processus de concaténation suivant: 1 pomme, 3 oranges, 0 banane = 130

Ce processus donne aux pommes dix fois le poids des oranges et 100 fois le poids des bananes. Voici quelques exemples montrant comment cela fonctionne lorsqu'il est utilisé pour déterminer la spécificité d'un CSS. Faites comme si vous étiez de retour en classe de mathématiques de troisième année.

Attention, classe! Quel est le numéro de spécificité pour ce sélecteur?

ul h1 li. red {color: yellow;}

Quelqu'un obtient la réponse 13?

La réponse correcte est 13. Vous avez

0 ID, 1 attribut de classe (rouge), et 3 sélecteurs (ul h1 li)

Cela "ajoute", pour ainsi dire, à 013. Maintenant, kiddies, qui peut expliquer comment vous obtenez une spécificité de 1 pour la définition de sélecteur suivante?

H1 {color: blue;}

Une fois la spécificité déterminée, le nombre le plus élevé l'emporte. Supposons que deux styles soient en conflit, car ils définissent tous deux la couleur de H1, mais la définissent différemment. Mais parce qu'une définition a une valeur de spécificité de 13 et que l'autre n'en a qu'une, le titre H1 est jaune et non bleu.

Et si deux règles s'avéraient avoir la même spécificité? Dans ce cas (en supposant que les deux sont dans une feuille de style, ou autrement sont la même "proximité" à la balise HTML), la règle qui a été spécifiée en dernier gagne.