Waouh ! La scrollbar de Firefox est magique

2020-01-27 #livres

Il me semble. Je reviens de mon site Solitaire-Play et je viens de m’apercevoir que la barre de l’ascenseur vertical est “verte”, ce qui est la couleur dominante de tout jeux de solitaire qui se respecte :)

firefox-scrollbar-color
L'ascenseur est vert !

Je vérifie dans Chrome et là, la barre est “grise” comme à l’habitude. J’ai beau chercher, et je ne trouve rien qui explique ce comportement.

Selon MDN web docs, il est possible de définir la définir la couleur utilisée pour la barre de défilement avec la propriété expérimentale scrollbar-color :

scrollbar-color: auto | dark | light | <color> <color>;

Et pour définir quelle couleur utiliser, on dispose des valeurs suivantes :

  • auto => utilise le rendu par défaut du système pour la piste de la barre de défilement si aucune autre couleur n’est indiquée pour la mise en forme CSS de la barre de défilement (le “gris” dans mon cas)
  • dark => affiche une barre de défilement sombre. Ce peut être la variante sombre fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs sombres
  • light => affiche une barre de défilement claire. Ce peut être la variante claire fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs claires
  • <color> <color> => les deux couleurs à appliquer (“jaune” et magenta” par exemple…)

Donc pas de valeur magic pour demander au navigateur d’utiliser des couleurs qui s’harmonisent avec la couleur générale du site…

Surtout, je n’ai aucune propriété scrollbar ou scrollbar-color dans mon CSS et rien de redéfini dans le “normalize.css” que j’utilise.

Comme je n’ai pas encore mis en place de fichier “manifest.json”, je n’ai pas nom plus de propriété “theme_color” qui aurait pu lui mettre la puce à l’oreille.

Pour l’instant, je vais ranger ça dans la case des bénéfices qu’il y a à passer de Chrome à Firefox. Nous ne voyons pas d’autre explication…

English version: Hey! Firefox scrollbar-color is magical.