Le Hollandais VolantDu CSS qui s'adapte à l'environnement du visiteur
Qui n'a jamais voulu faire une page web dont les couleurs s'adaptent automatiquement aux couleurs du thème de bureau du visiteur ?
Ne rêvez plus, c'est possible.
ÉDIT juillet 2013 : cette astuce est obsolète en CSS3. Ce dernier vient avec d'autres outils bien plus puissants, comme l'utilisation d'icônes système, en pkus des couleurs http://www.w3.org/TR/css3-ui/
Il existe des couleurs en CSS, ça tout le monde le sait. Il en existe 16 officielles en HTML (et plus de 100 autres pour les SVG, qui marchent parfois en HTML aussi, bien que non valides).
En revanche, ce que je ne savais pas, c'est qu'il existe aussi des couleurs défini par l'environnement du bureau, en gros : des variables environnement définissant les couleurs de l'interface : fenêtres, texte, menus, boutons…
Ces couleurs sont utilisables en CSS.
Pour les voir à l'œuvre, c'est très simple : ci dessous, vous voyez les couleurs tels qu'ils sont définis sur votre ordinateur. Il vous suffit de changer le thème de bureau pour voir tout ça s'adapter en conséquence :
Il en existe plein d'autres (voir ici, par exemple), et on peut tout colorier (arrière plan + texte) pour chaque élément.
Ça permet d'avoir une page web qui s'adapte au thème du visiteur. Ainsi, si toutes les fenêtres de programmes sont en rouge, le site sera en rouge aussi !
Certes, la page n'aura pas un aspect original, mais si le visiteur a activé un thème "Contraste élevé" pour palier un problème de vue, votre page conservera un affichage contrasté pour lui permettre de lire aussi facilement.
Il est presque impossible (humainement, je veux dire) de penser à tout quand on fait un design d'une page web : parfois le navigateur utilise des CSS par défaut, il peut y avoir des problèmes : un thème de bureau sombre aura une police d'écriture claire ; or, dans une page web avec un arrière plan clair mais sans couleur de police définie, le texte sera claire (pour correspondre à celui du thème de bureau) autrement dit : texte clair sur fond clair = totalement illisible.
C'est par exemple le cas sur un thème comme DarkRoom dans Ubuntu, où, si l'on ne fait rien, certains champs de saisis sont illisibles.
Très simple : il suffit de voir les différents noms des variables d'environnement en bas de cette page, et d'utiliser la valeur comme n'importe quel valeur CSS.
Exemple :
code CSS :
(testé et validé sous Firefox / Chromium et Opera)
Ne rêvez plus, c'est possible.
ÉDIT juillet 2013 : cette astuce est obsolète en CSS3. Ce dernier vient avec d'autres outils bien plus puissants, comme l'utilisation d'icônes système, en pkus des couleurs http://www.w3.org/TR/css3-ui/
Comment ?
Il existe des couleurs en CSS, ça tout le monde le sait. Il en existe 16 officielles en HTML (et plus de 100 autres pour les SVG, qui marchent parfois en HTML aussi, bien que non valides).
En revanche, ce que je ne savais pas, c'est qu'il existe aussi des couleurs défini par l'environnement du bureau, en gros : des variables environnement définissant les couleurs de l'interface : fenêtres, texte, menus, boutons…
Ces couleurs sont utilisables en CSS.
Pour les voir à l'œuvre, c'est très simple : ci dessous, vous voyez les couleurs tels qu'ils sont définis sur votre ordinateur. Il vous suffit de changer le thème de bureau pour voir tout ça s'adapter en conséquence :
| Sélection | info bulle | Arrière plan | Barre défilement | Bouton | Menu | Fenêtre active | Fenêtre inactive |
Il en existe plein d'autres (voir ici, par exemple), et on peut tout colorier (arrière plan + texte) pour chaque élément.
Pourquoi ?
Ça permet d'avoir une page web qui s'adapte au thème du visiteur. Ainsi, si toutes les fenêtres de programmes sont en rouge, le site sera en rouge aussi !
Certes, la page n'aura pas un aspect original, mais si le visiteur a activé un thème "Contraste élevé" pour palier un problème de vue, votre page conservera un affichage contrasté pour lui permettre de lire aussi facilement.
Il est presque impossible (humainement, je veux dire) de penser à tout quand on fait un design d'une page web : parfois le navigateur utilise des CSS par défaut, il peut y avoir des problèmes : un thème de bureau sombre aura une police d'écriture claire ; or, dans une page web avec un arrière plan clair mais sans couleur de police définie, le texte sera claire (pour correspondre à celui du thème de bureau) autrement dit : texte clair sur fond clair = totalement illisible.
C'est par exemple le cas sur un thème comme DarkRoom dans Ubuntu, où, si l'on ne fait rien, certains champs de saisis sont illisibles.
Le code
Très simple : il suffit de voir les différents noms des variables d'environnement en bas de cette page, et d'utiliser la valeur comme n'importe quel valeur CSS.
Exemple :
Ce texte possède la couleur et le fond de celui de la barre active d'une fenêtres, quelque soit le système d'exploitation, le thème ou le navigateur du visiteur.
code CSS :
div {
color: CaptionText;
background-color: ActiveCaption;
}
color: CaptionText;
background-color: ActiveCaption;
}
(testé et validé sous Firefox / Chromium et Opera)