La cascade

Comment lier les styles à la page et leurs priorités

Lorsque vous définissez un style à un document ou une balise vous pouvez le faire de différentes manières. Si vous le faites de deux (ou plus) manières différentes, il faut bien que le navigateur choisisse le style qu’il devra utiliser pour afficher correctement l’élément en cause. Il existe donc des priorités d’affichage. Voici les priorités d’affichage par ordre décroissant :

// Le style en ligne :
<p style="text-align:center">

// Le style dans le document :
<style type="text/css">p{text-align:center}</style>

// Le style importé :
<style type="text/css">@import url('mon-style.css');</style>

 // Le style externe :
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />

Il y a encore deux styles du côté client (front-end). Le premier modèle est défini par l’utilisateur et le deuxième par le navigateur. Cette liste représente la pile des priorité de styles dans l’ordre décroissant (du plus fort au plus faible).

  1. Style défini par l’utilisateur.
  2. Style dans le code de la page même.
  3. Feuille de style interne au document.
  4. Feuille de style importée.
  5. Feuille de style externe.
  6. Style par défaut du navigateur.

Les priorités de styles

Calculer la priorité des styles

  • a = compter le nombre de style en ligne dans le code directement (style= » »).
  • b = compter le nombre de ID (id= »monid », #monid).
  • c = compter le nombre de pseudo classe (class= »maclasse », .maclasse).
  • d = compter le nombre de balise HTML (a, p, ul, li etc…).
 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

Le principe reste de commencer par les styles les plus faibles en allant vers les priorités les plus fortes.

Ma méthode

L’ordre d’importation et de déclaration des styles ayant son importance, il est indispensable de bien ordonner ses feuilles en fonction des priorités. Faire un fichier CSS de base important d’autre feuilles de style spécifique (default, layout, module, font) aux différentes couches de la page :

  • Layout : les grandes parties de la pages (global, header, main, menu1, content, footer, etc.).
  • Module : les boites habitants les grandes divisions.
  • Font : la police et les styles décoratifs.
/* basic style sheet : default.css */
@import "layout.css";
@import "module.css";

@import "font.css";

Le choix de gérer les styles en passant par une feulle de base important d’autre feuilles permet de créer au besoin cette page en dynamique (PHP) de façon à gérer plusieurs pages de styles sur mesure en fonction des besoins.

La page default.css est intégrer dans la page HTML par un lien externe. Dans notre exemple la propriété media est utilisée faisant encore descendre la priorité et permettant aussi de mettre un CSS spécifique pour l’impression (media= »print »).

<link href="default.css" rel="stylesheet" type="text/css" media="screen" />

On part ainsi avec le niveau de priorité le plus bas, laissant la possibilité d’ajouter des styles sur un autre niveau pour traiter des exceptions ou des difficultés imprévues.

Liens :