Il y a quelques jours, je me demandais si la notion de « styles utilisateur » faisait encore sens aujourd’hui ; le niveau de connaissances nécessaires pour écrire ses propres styles (via userContent.css ou autre Stylish) rendant l’affaire hors de portée pour la majorité des internautes.
Toutefois, les styles utilisateurs sont aujourd’hui bien présents dans le paysage, par le biais des extensions navigateurs, qui permettent de modifier l’affichage des pages pour les rendre plus lisibles, masquer les encarts publicitaires ou les ribambelles d’icônes de réseaux sociaux. Firefox embarque même un mode lecture désormais.
Romy me précède en le disant chez Stéphane, chez qui je découvre au passage la fort intéressante extension Orange Confort+. Cette extension permet de modifier fortement l’aspect d’une page afin de la rendre lisible aux personnes ayant des difficultés visuelles plus importantes (police de caractères, taille, couleurs).
En attendant, sur Firefox, dans userContent.css, je cherche une façon de restreindre des styles utilisateur seulement à certains sites. La règle @document, mise en œuvre par Mozilla, permet de cibler finement un domaine, une URL, un fichier CSS.
Cette règle était initialement prévue pour CSS 3 mais a été reportée à CSS 4. En attendant, pour l’utiliser, il faut y ajouter le préfixe éditeur, ce qui donne @-moz-document.
Après quelques essais, j’échoue à appliquer les règles aux sites qui me servent d’exemples (en l’occurrence ceux de Karl et Vincent sur lesquels je veux modifier la police de caractère, trop petite sur Ubuntu. Voir à ce sujet mon précédent billet sur les font-stack sur Linux). Un détail pourtant bien en évidence m’avait échappé :
This file can be used to apply a style to all web pages you view Rules without
!importantare overruled by author rules if the author sets any. Rules with!importantoverrule author rules.
Également dit dans cet excellent article de Laurent Denis (10 ans déjà !) sur OpenWeb :
Les styles de l'auteur l'emportent sur ceux de l'utilisateur… sauf lorsque celui-ci, par le biais de la propriété
!important, décide de les outrepasser, ou que ses préférences sont exprimées par le biais des options offertes par le navigateur.
Mes règles utilisateur ne sont donc pas prioritaires. Si je veux qu’elles le deviennent, je dois leur donner du !important. Et là, évidemment, ça fonctionne (sauf si l’auteur décide lui aussi d’utiliser !important, mais pourquoi le ferait-il n’est-ce pas ? Personne ne le fait de nos jours… si ?)
Seul point un peu gênant : pour que les règles soient prises en compte, il me faut redémarrer Firefox.
Pressentant que Stylish s’appuie sur cette fameuse règle @-moz-document, je décide de ré-installer l’extension pour le vérifier. Bingo ! C’est exactement ainsi que l’extension procède. Toutefois, elle ne requiert pas de donner du !important à chaque règle CSS, ni de spécifier les règles des différents sites dans une CSS unique (comme dans userContent.css), ni encore de redémarrer Firefox. La méthode pour appliquer les styles doit être plus sophistiquée (et plus lourde peut-être ?).
Quoiqu’il en soit, Stylish facilite l’écriture de ses propres CSS utilisateur,… si l’on connaît le langage CSS.
Le meilleur pour la fin, si vous souhaitez jouer avec ces styles utilisateurs (dans userContent.css ou avec Stylish), un très bon tutoriel chez le Hollandais Volant.