Aller au contenu

Cascading Style Sheet/Cascade, héritage et spécificité

Ajouter des liens
Leçons de niveau 14
Une page de Wikiversité, la communauté pédagogique libre.
Début de la boite de navigation du chapitre
Cascade, héritage et spécificité
Icône de la faculté
Chapitre no 4
Leçon : Cascading Style Sheet
Chap. préc. :Appliquer un style à un élément
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Cascading Style Sheet : Cascade, héritage et spécificité
Cascading Style Sheet/Cascade, héritage et spécificité », n'a pu être restituée correctement ci-dessus.


Introduction

[modifier | modifier le wikicode]

On va s'attaquer dans ce chapitre au "Cascading" des CSS, un concept clé à connaître. Actuellement avec nos maigres connaissances, nous ne pouvons comprendre pourquoi les liens sont par défaut en bleu et soulignés, nous ne pouvons pas comprendre non plus pourquoi ce code ci-dessous : 

html p {color:blue;}
p {color:yellow;}
* p {color:red;}

donnera au final une couleur bleu au texte de notre paragraphe.

Arbre de document et propriétés

[modifier | modifier le wikicode]

Le parseur CSS construit un arbre de document avec tous les éléments et leur position (parent, enfant, descendant...). Il existe au moins une centaine de propriété CSS, il faut savoir que le parseur va assigner à chaque élément toutes les propriétés avec une certaine valeur. Certaines propriétés ne peuvent s'appliquer à un élément, par exemple la propriété "list-type" utile pour décorer nos listes ne peut être appliquée à l'élément body par exemple, mais le parseur va quand même l'assigner à l'élément body (on verra tout à l’heure pourquoi).

Imaginons un document comme celui-là : 

<html>
<body>
Populaire

</body>
</html>

Le parseur va faire un arbre :

  • html : propriété1:valeur; propriété2:valeur; ...
  • body : propriété1:valeur; propriété2:valeur; ...
  • p : propriété1:valeur; propriété2:valeur; ...

Maintenant quelle valeur va t-il associer à la propriété ? Premièrement il va regarder si cette valeur n’est pas directement spécifiée dans les feuilles de styles.

Feuilles de style à plusieurs niveaux

[modifier | modifier le wikicode]

Il n'y a pas que les auteurs de documents qui utilisent des feuilles mais aussi ceux qui conçoivent le programme interprétant le CSS tel un navigateur graphique ou encore éventuellement les utilisateurs (les "user styles"). 

<h1>Premier titre</h1>
<h2>Deuxième titre</h2>

Feuille navigateur

[modifier | modifier le wikicode]

Si vous testez le code ci-dessus, vous apercevez les deux titres l'un en dessous de l'autre. Ceci est causé non pas par le retour à la ligne dans notre code mais par la feuille de style navigateur : 

h1 {display:block;}

Les feuilles de style des navigateurs, bien que le W3C en recommande une, peuvent varier d'un navigateur à l'autre mais ce n’est pas le cas ici. Il est possible de lire voire modifier une feuille soit dans le programme d'installation du programme (c'est le cas pour Firefox), soit dans le code source (c'est le cas pour les programmes basés sur WebKit tel Safari ou Chrome).

Feuille auteur

[modifier | modifier le wikicode]

Nous voulons que ces titres soient côte à côte, donc nous faisons simplement 

h1 {display:inline;}

Feuille utilisateur

[modifier | modifier le wikicode]

Nous voulons remettre un titre par ligne, il nous faut ajouter le mot clé "!important" pour que notre déclaration prenne le dessus : 

h1 {display:block !important;}

Récapitulatif

[modifier | modifier le wikicode]

Il y a donc un certain ordre de priorité croissante[1] :

  1. CSS navigateur (!important ou non) ;
  2. CSS utilisateur ;
  3. CSS auteur ;
  4. CSS auteur !important ;
  5. CSS utilisateur !important.

De même, le poids de chaque sélecteur est différent[2], du moins au plus prioritaire :

  1. Balise ;
  2. Classe ;
  3. Identifiant ;
  4. Attribut style.
Début de l'exemple
Exemple

Et si tous les acteurs ne spécifient pas dans les feuilles quel doit être la valeur de display pour h1 ? Les h1 seront-il "inline" ou "block" ?

Fin de l'exemple


Héritage

[modifier | modifier le wikicode]

Le programme va déjà chercher si la propriété s'hérite, ce n’est pas le cas de display. On va prendre donc pour cette partie un autre exemple : la propriété list-style-type qui permet de définir le type de puce des items de liste (éléments li en (X)HTML). 

<ol>
<li>Item de liste</li>
</ol>

Le fait qu’il y ait un 1 devant notre item est du à la feuille de style navigateur qui spécifie : 

ol {
  list-style-type: decimal;
}

Or on a dit que cette propriété ne pouvait s'appliquer qu'aux éléments li, il y a donc un certain phénomène appelé héritage qui se produit. Comme le parseur CSS ne trouve pas cette propriété spécifiée sur la balise li, il va chercher si celle-ci est spécifiée dans les éléments parents de cette balise, c'est-à-dire ol, body et html dans notre cas simpliste. Il la trouve spécifiée sur la liste ol, on dit donc que l'item de liste li hérite de la valeur décimale.

Début de l'exemple
Exemple

Il nous reste encore une interrogation : si les parents ne donnent pas non plus une valeur spécifiée, comment va être notre puce ?

Fin de l'exemple


Valeur initiale et récapitulatif

[modifier | modifier le wikicode]

Il va associer en faite la valeur initiale de la propriété à l'élément. Dans notre cas de figure, il va donc associer la valeur "disc" ou rond plein. Toutes les propriétés ont des valeurs initiales qui sont définies dans la spécification.

Pour récapituler :

  1. Si le parseur trouve une valeur spécifiée dans les feuilles de style, il l'assigne à l'élément
  2. Sinon s'il trouve une valeur spécifiée associée aux ancêtres de l'élément, il va assigner cette valeur à l'élément.
  3. Sinon il assigne la valeur initiale à l'élément.

Références

[modifier | modifier le wikicode]
  1. ↑ http://openweb.eu.org/articles/cascade_css
  2. ↑ http://www.zonecss.fr/courscss/cours_feuille_css_34.html

Voir aussi

[modifier | modifier le wikicode]


bouton image vers le chapitre précédent Appliquer un style à un élément
Récupérée de « https://fr.wikiversity.org/w/index.php?title=Cascading_Style_Sheet/Cascade,_héritage_et_spécificité&oldid=912783 »