Cela faisait un moment que je cherchais à augmenter la lisibilité[1] des textes de ce blog sans modifier ni la couleur des caractères, ni la couleur de fond. Ce n'est pas très compliqué, finalement : il suffit d'ajouter une ombre. Solution simple trouvée ailleurs et à laquelle je n'avais encore jamais songé[2].

Après quelques tests plutôt concluants, les CSS du thème actuel[3] sont à présent truffées de ce genre de déclaration :

text-shadow: #xxyyzz 1px 1px;

Où j'ai opté pour une valeur de chaque octet xx, yy et zz de la couleur de l'ombre (codage RVB en hexadécimal) obtenue en diminuant de #20 (=32 en décimal) la valeur de l'octet correspondant de la couleur de fond. Exemple : pour une couleur de fond égale à #625F40, la couleur de l'ombre vaudra #423F20. Quelque soit la couleur des caractères.

Quant aux zones dans lesquelles le texte ne doit pas être ombré, il suffit de défaire l'héritage CSS par un retentissant :

text-shadow: 0 0;

Ça couine un peu du côté de l'outil de validation du W3 C qui considère, à juste titre, que cette syntaxe n'est pas conforme à la norme CSS 2.1. Sauf que les ombres sont plutôt bien affichées par les navigateurs Chrome, Firefox, Opera et Safari dans leurs versions récentes (testés sur mon ordi, ce que confirme cette page du site developer.mozilla.org).

Mais pas avec Internet Explorer 8[4] (ou antérieur) qui refuse catégoriquement de mettre la police à l'ombre...


[1]Je parle de la forme, pour le fond c'est une autre histoire...

[2]Oubli d'autant plus étrange que j'ai une propension quasi compulsive à mettre des ombres un peu partout.

[3]Évidemment, rien ne garantit que le thème en vigueur au moment où vous lirez ce billet soit identique à celui utilisé au moment où j'ai écrit ces lignes...

[4]Ce qui m'est tout à fait indifférent. Je sais qu'il existe des alternatives propres à Microsoft, mais non.