<C²: webløg />

Courriel - email address

Avatar Denis

lundi 28 avril 2003
par Denis Boudreau

Réflexions sur les feuilles de style

Quand on implémente une fonctionnalité de StyleSwitcher dans un site, ou simplement lorsque pour des navigateurs comme Mozilla, un développeur souhaite offrir plus d'une feuille de style à appliquer à ses documents, il importe d'avoir recours à la valeur alternate stylesheet, utilisée avec l'attribut rel dans l'élément <link>. C'est une des rares vérités absolues régissant notre univers, à considérer au même titre que :

  1. Pierre qui roule n'amasse pas mousse,
  2. Qui vole un œuf vole un bœuf, et
  3. Tout ce qui monte doit redescendre.

Toutefois, il arrive souvent que des questions d'implémentation émergent lors du traitement des feuilles de style, dû à une mauvaise utilisation de cet attribut. Afin d'offrir une référence complète et succinte à ce sujet, Eric A. Meyer a publié pour le compte de DevEdge dernièrement un article intitulé "Correctly Using Titles With External Stylesheets", qui vise justement à répondre à toutes ces interrogations une fois pour toutes. Une lecture rapide et efficace est tout ce qui vous sépare du Nirvana, surtout si vous ignorez tout de la valeur preferred stylesheet.

Puisque nous sommes en plein CSS, je vais en profiter pour vous partager une découverte extraordinaire qui a complètement révolutionné mon univers la semaine dernière. C'est un questionnement que j'avais depuis des mois et dont la réponse me pendait au bout du nez tout ce temps. Peut-être bien que certains d'entre vous en sont pleinement conscients, mais pour les autres qui, comme moi, n'avaient simplement jamais pensé à fouiller la question, voici un petit secret bien gardé sur l'aspect cascades des feuilles de style que vous ne retrouverez pas dans la très grande majorité des articles et références CSS.

Une des plus grandes insatisfactions que je vivais depuis maintenant quatre ans que je travailles avec les feuilles de style provenait du fait qu'à chaque fois que je créais une règle dans mon fichier CSS (sélecteur, identifiant unique ou élément propre), il finissait toujours par arriver un moment où l'utilisation de cette règle ne convenait pas parfaitement aux circonstances qui m'occupaient. Par exemple, je pouvais développer une règle pour traiter mon verdana en gris et en caractère gras...

.textegris {font-family: verdana, sans-serif; font-weight: bold; color: #ccc;}

Mais il arrivait invariablement un moment où j'allais aussi avoir besoin d'appliquer à l'élément en question une présentation supplémentaire correspondant à une autre règle existante dans mon CSS externe...

.petitebordure {border: 1px solid #000; padding: 2em;}

... Je me voyais donc contraint à créer une troisième règle, combinant les éléments des deux premières afin de répondre à ma problématique. Puisque je savais par expérience qu'il était impossible de mettre dans le même élément à la fois class="textegris" et class="petitebordure", j'entreprenais donc de créer cette troisième règle — appelons-là pour les besoins de la cause textegrisavecpetitebordure — ce qui avait pour effet de rapidement faire gonfler mon fichier CSS qui devenait monstrueux en quelques semaines seulement de développement. Puisque la situation ne se prêtait pas à l'utilisation d'un ID dans un tel cas, la solution facile consistait souvent à intégrer cette troisième règle, ou pire encore, un honteux style de type inline, directement après la classe dans l'élément traité dans le genre style="toute sorte de vilains trucs CSS". Pas très joli et surtout, quand on y pense bien, pas bien différent des affreuses balises de présentation HTML dont on essaie tant de se défaire!

Dernièrement, j'ai lu quelque part qu'il était possible d'utiliser plus d'une règle dans un attribut class. Curieux et plein d'espoir, je me suis remis à mes tests pour m'apercevoir que non, il était impossible d'utiliser deux tels attributs dans le même élément; en effet, le navigateur n'en interprétait qu'un seul, généralement le premier, en ignorant complètement le second. Déçu, je retournai lire la référence à nouveau et c'est à ce moment que la pomme m'est tombé sur la tête.

... un seul attribut class...

Allez hop!, je retourne à mon fichier et j'essaie d'insérer deux règles différentes sous le même attribut class. Premier essai, je lances à tout hasard la commande :

class="textegris, petitebordure"

Pas de résultat. En dépit de ma profonde déception, je lances la première chose qui me vient à l'esprit :

class="textegris petitebordure"

Eureka! Les deux règles s'épousent parfaitement et les propriétés de cascades des feuilles de style entrent en œuvre pour composer cette troisième règle composée, issue des deux premières. J'obtiens mon texte gris, mon caractère gras, mes bordures, etc. Tout! Heureux j'essaie d'appliquer deux, trois, quatre autres règles à ce même attribut class et à chaque fois, le principe de cascades s'applique et je parviens à faire émerger des dizaines de règles à partir de quelques règles de bases déterminées d'avance dans ma feuille de style. Extraordinairement simple et évident quand on sait, mais il fallait y penser.

Conclusion : mes feuilles de style sont à recommencer! Et les vôtres ?

Denis Boudreau | 2003.04.28 @ 00:08

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

Ce carnet n'a pas encore été commenté. Avez-vous envie de briser la glace ?

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)