Les feuilles de style CSS côté utilisateur

Les feuilles de style CSS sont souvent louées pour la richesse des styles qu'elles permettent d’appliquer, leur légèreté et leur flexibilité, tous autant d’arguments qui contribuent à leur déploiement - certes tardif, mais néanmoins grandissant - comme méthode de stylisation du contenu par les auteurs de pages Web.

Un usage de ces feuilles de style est en revanche moins connu : en effet, certains navigateurs (tels Mozilla et ses dérivés, Opera, Konqueror) permettent d’appliquer des feuilles de style utilisateur, dont le principe est d’offrir aux visiteurs d’une page la possibilité d’adapter la présentation de celle-ci à ses goûts, ou - plus souvent - à ses besoins.

Les besoins qu'adressent ces feuilles de style sont souvent rapprochés des besoins d’accessibilité : polices de caractères plus larges, contraste de couleurs plus marqué, feuilles de style orales, etc. Mais outre ceux-ci, elles permettent aussi de rendre la vie plus facile à tout le monde, à très peu de frais. Quelques exemples de feuilles de style que j’utilise :

Feuille de style par défaut

Cette feuille de style est appliquée sur toutes les pages que je visite, et permet d’éliminer certaines des bannières de publicité au format le plus fréquent ; elle détermine aussi la taille d’impression par défaut des polices de caractères

iframe, embed[type="application/x-shockwave-flash"][width=750] {
  display: none !important;
  visibility: hidden !important;
} 

 *[width=468] {
  display: none !important;
  visibility: hidden !important;
} 


embed[type="application/x-shockwave-flash"][height=800], embed[type="application/x-shockwave-flash"][height=728] {
  display: none !important;
  visibility: hidden !important;
} 


@media print {
  font-size:10pt;
}

Feuille de style de lisibilité

J’applique cette feuille de style aux pages que je trouve difficile à lire, du fait de choix douteux d’images de fond ou de couleurs de police. Elle permet aussi de réduire la largeur de la page à un maximum déterminé

body, html, * {
color:black ! important;
font-family:sans-serif;
}

html {
background:#eef;
}

body {
  padding:2em;
  background:white ! important;
  max-width:40em;
  line-height:1.1em;
  margin-left:auto;
  margin-right:auto;
}

b, strong { 
            background-color:#eef;
            font-weight:normal;
 }

a:link {
color:blue ! important;
}

a:active {
color:red ! important;
}

a:visited {
color:navy blue ! important;
}

Feuille de style d’équarrissage

J’applique cette feuille de style au cas par cas, lorsque visitant une page contenant un grand nombre de liens, je souhaite repérer rapidement ceux auxquels j’ai accédé récemment ; elle a pour effet de cacher tous les textes sauf les liens visités

body * { visibility:hidden;font-size:0}

:visited { visibility:visible; font-size:16pt}

Ainsi, moyennant très peu d’effort, je puis adapter le Web à mon confort de lecture.