Steve Frécinaux

Des sites et des feuilles de styles utilisateurs

Avec le XHTML et le CSS viennent les bonnes habitudes. Non contents de fournir un site dont le contenu visualisable et utilisable avec à peu près n’importe quoi (le but ici n’est pas de faire une éloge des CSS), certains ont aussi pris le pli de définir un id à la balise <html> ou <body>, dérivé de l’adresse ou du titre du site. Par exemple, vous trouverez ceci, dans le code source de cette page :

<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="fr"
      id="tainted-words">

L’intérêt de la chose

À quoi peut bien servir cet id ? Et bien c’est assez simple : tous les navigateurs récents offrent la possibilité de définir des feuilles de style utilisateur. Ces feuilles, qui prennent le pas sur les feuilles associées aux sites visités, permettent de définir des règles personnalisées, d’ordre pratique ou esthétique, et rendant ainsi le « surf » plus agréable. On peut par exemple changer les polices par défaut, ou imposer l’une ou l’autre directive d’affichage en l’agrémentant de !important. L’ennui étant qu’une directive dans la feuille de style utilisateur (dans mozilla, userContent.css dans le répertoire de votre profil) s’applique sur tous les sites visités.

Avec cet id, en utilisant le principe de cascade des CSS, on peut alors définir une règle spécifique à un site. Ainsi, pour afficher la barre de titre de ce site (avec l’habillage « classic white ») en rouge, il suffirait d’ajouter dans votre feuille de style utilisateur : (Les directives !important font en sorte que ce style soit appliqué plutôt que celui du site)

#tainted-words #header {
   background: red !important;
   color: white !important;
}

Et pour peu que vous y ayez goûté, ce système devient vite incontournable. Il permet ainsi de visiter de façon agréable des sites que l’on trouve peu pratiques, ou même illisibles à première vue (caractères trop petits, contenu condensé, contraste trop faible entre le fond et le texte), permettant encore une fois d’accéder à un contenu intéressant, peu importe la mise en page de celui-ci. Regardons le cas du carnet example.org, présentant des informations très pertinentes sur un certain sujet, et mis à jour de façon régulière, mais dont les nuances peu contrastées de vert gènent la lecture de notre amis Alex Amplaire, daltonien de son état. Ces règles fictives abîmeront sans doute la belle mise en page que le webmestre aura réalisée, mais auront l’immense avantage de permettre à Alex de lire le contenu dans des conditions acceptables :

#www-example-org #content {
   background-image: none !important;
   background-color: white !important;
   color: black !important;
   font: 1em/1.6em "Bitstream Vera Sans", sans-serif !important;
   padding: 1.5em !important;
}

#www-example-org #content a {
   color: #0d0 !important;
   text-decoration: underline !important;
}

Le problème

Cependant, comme je l’ai dit plus haut, ces bonnes habitudes découlent du couple standard que vous connaissez tous, car pour penser aux CSS utilisateur, il faut déjà penser aux CSS du site… Et donc, les sites n’offrant pas d’id propre, soit sur <html> (pour XHTML 1.0), soit sur <body> (pour les autres), sont légion. Et ne sont pas plus lisible pour autant. Et, s’ils reposent, comme c’est trop souvent le cas, sur une présentation 100% à base de balises et d’attributs de présentation (souvenez-vous de <font> ou de bgcolor), il n’est même pas possible de lire la page en « mode brut ». C’est autant de contenu potentiellement intéressant qui ne sera pas lu… C’est domage, car, pour toute une série de raison, l’auteur n’a peut-être pas la possibilité de modifier son site…

Comment contourner ce problème ?

Une idée, peut-être une solution

Je n’ai pas trouvé de solution simple à ce problème dans Mozilla. Pourtant une idée serait de prendre, pour la feuille de style utilisateur, quelques libertés avec le standard CSS existant. Après tout, ceux-ci ont été conçus, je pense, pour être inclus dans un site et non dans un navigateur. L’idée, donc, serait d’implémenter un mécanisme permettant de styler uniquement les éléments apparaissant dans les pages situées sur un site précis, par exemple en se basant sur les URL plutôt que sur les éventuels ids laissés par quelque webmestre prévoyant. Je ne sais pas si une telle implémentation est réalisable ou pas, mais voici à quoi ça ressemblerait, toujours sur le même exemple que tout à l’heure :

@host http://www.example.org {
   #content {
      background-image: none !important;
      background-color: white !important;
      color: black !important;
      font: 1em/1.6em "Bitstream Vera Sans", sans-serif !important;
      padding: 1.5em !important;
   }

   #content a {
      color: #0d0 !important;
      text-decoration: underline !important;
   }
}

Ainsi, on pourrait rendre navigable n’importe quel site, fut-il basé sur une présentation à base de tableaux et d’attributs obsolètes, étant donné que les CSS permettent de styler lesdites tables et sont préférés par le navigateur aux attributs sus-cités…

Bien entendu ce ne sont que des mots, du vent, et comme je n’ai pas étudié le code source de mon navigateur, Mozilla (même si je pourrais le faire, grâce à la magie de l’open-source), je ne sais pas si l’idée est réaliste. À vrai dire je ne sais même pas si elle est bonne, je sais juste qu’elle serait utile à quelqu’un qui, comme moi, aimerait mieux contrôler la mise en page de certains sites, qui sont peut-être des références dans leur domaine, mais qui sont tout simplement illisibles dans leur état actuel… Qu’en pensez-vous ?