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/

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électioninfo bulleArrière planBarre défilementBoutonMenuFenêtre activeFenê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;
}

(testé et validé sous Firefox / Chromium et Opera)

21 commentaires

gravatar
timo a dit :

Merci pour ton article!
Sauf que ça ne sert pas à grand chose...

gravatar
timo a dit :

oui c'est vrai ça sert pas a grand chose mais ça montre le pussance de cette tecno c'st le web 2.0 les coco

gravatar
Le Hollandais Volant a dit :

Ça sert pas à grand chose
Et pour ce qui est des "couleurs systèmes", ça permet de résoudre des problèmes.

Oui, en fait : vous avez raison.
Sans les CSS/HTML, le web n'existerais pas, à part ça ça sert à rien.

Faire des recherches sur la physique quantique ça sert à non plus d'ailleurs. Sans les travaux d'Einstein, y'aurait pas de centrales nucléaires donc pas d'électricité sans utiliser du pétrole qui serait alors totalement épuisé aujourd'hui et tout sous forme de CO2 dans une atmosphère étouffante. Y'aurait pas non plus toutes les matières plastiques ni les alliages métalliques que nous connaissons de nos jours.
C'est sûr que ça sert à rien non plus.

Si ça existe, c'est forcément que quelqu'un en a eu le besoin, et donc que ça sert à quelque chose. Vous pensez pas ?

gravatar
Anonyme a dit :

Salut !

Ton site fait ça désormais ? Parce que je vois qu'il a aussi changer de design :D

gravatar
Le Hollandais Volant a dit :

L'image de fond a changé :D

Mais j'ai rien changé sinon, j'ai pas mis les css dont je parle dans le billet^^

gravatar
Jom a dit :

C'est bien joli tout ça, merci pour le partage Timo ^^

Sinon pour ceux qui veulent juste définir des couleurs normales tout en les maintenant assortis, je vous propose ce site : http://kuler.adobe.com

gravatar
Le Hollandais Volant a dit :

Super ce lien ! Sur le site officiel d'Adobe en plus :D.
J'aime bien l'assortiment "Napoléon"^^

Je sens que je vais m'amuser :)

Sinon, totalement HS, une mini-question-énigme dont la réponse est évidente bien que plusieurs personnes se sont déjà trompés^^
- Le produits de deux nombres premiers est-il premier ?

Aussi, je me suis un peu amusé avec Gimp, à faire des sortes de cartes pokémon sur le style "Powered by Windows". J'ai Pikachu, Mewtwo, Lugia, Ho-oh, Kyogre, Groudon et Rayquaza. À part Mewtwo et Groudon, je suis un peu déçu du résultat :s
Ici, ce sont les images réduites, mais voici juste Mewtwo en grand.

gravatar
Anonyme a dit :

Waou ! Franchement Chapô. J'adore tes cartes ! :)

PS: joli le lien Jom :)

gravatar
0siris a dit :

Alalala... Pokémon... ça me rappelle bien des choses...

J'étais le Big Boss au collège avec ma version rouge et mes Spectrum niveau 245...
Sur 49 duels j'en avais perdu 2.
Je me rappelle de ma line-up lvl100:
Mewtwo / Ronflex / Lokhlass / Electhor / Arcanin / Florizarre, tous dopé des leur plus petit level trouvable de 10 protéines, 10 calcium, 10 fer, 10 carbone, PVplus , PPplus au max sur chaque attaque etc... montés soigneusement à la main, un par un... Et pas des lvl 172 trouvés sur la plage et redescendus au lvl 100...
Je me souviens toute la cour terrorisée par mon Ronflex increvable avec son combo "lazer glace/plaquage/repos/dévorève" avec 20 elixir en poche... Personne ne l'a jamais tué. Du coup, jamais perdu avec Ronron !

Souvenirs, souvenirs...

gravatar
Anonyme a dit :


Alalala... Pokémon... ça me rappelle bien des choses...

J'étais le Big Boss au collège avec ma version rouge et mes Spectrum niveau 245...
Sur 49 duels j'en avais perdu 2.
Je me rappelle de ma line-up lvl100:
Mewtwo / Ronflex / Lokhlass / Electhor / Arcanin / Florizarre, tous dopé des leur plus petit level trouvable de 10 protéines, 10 calcium, 10 fer, 10 carbone, PVplus , PPplus au max sur chaque attaque etc... montés soigneusement à la main, un par un... Et pas des lvl 172 trouvés sur la plage et redescendus au lvl 100...
Je me souviens toute la cour terrorisée par mon Ronflex increvable avec son combo "lazer glace/plaquage/repos/dévorève" avec 20 elixir en poche... Personne ne l'a jamais tué. Du coup, jamais perdu avec Ronron !

Souvenirs, souvenirs...



Voila ma team à l'époque de la version Crystal:

- Typhlosion (N100)
- Cisayox (N85)
- Raichu (N100)
- Entei (N100)
- Suicune (N100)

J'avais aussi des master Ball (plein plein !)

Arf ! Pokémon ! :)

gravatar
Jom a dit :

Joli joli les carte Pokémon je vois pas pourquoi tu est déçu de Mewtwo et surtout Groudon qui ma bien plu ^^

Sinon pour ta question je croix que c'est impossible puisque le plus grand nombre premier trouver est 243 112 609-1 selon wiki a savoir que c'est très difficile de les connaitre car il n'y a pas une formule exacte pour cela, et ça parait illogique qu'on addition ce numéro avec son précédent pour qu'on trouver un plus. (et je dit ça par logique, j'ai rien vérifier ^^)

Vous parlez de carte ! je connais pas vraiment les cartes Pokémon par contre j'avais des cartes Yu-Gi-Oh a l'époque, et ça ne fait que hier que j'ai télécharger le jeux yugioh forbiddan memorises jouable sur PS1 pour finir une revanche que j'ai pas fait il y a longtemps a cause d'un plantage x)

gravatar
Le Hollandais Volant a dit :

Pokemon, c'est toute ma vie :)

@jom : soit a et b deux nombres premiers. La question était : est ce que a*b est premier ?
Réponse : bien sur que non : si c=a*b alors c est divisible par a et b.

gravatar
Jom a dit :

Ah le produit, c'est plus grave et plus c*n x)

gravatar
Anonyme a dit :


Pokemon, c'est toute ma vie :)


Que c'est joli :)

PS: joli Favicon Timo, bien jouer ;)

gravatar
sebsauvage a dit :

Ça c'est carrément excellent !  :-D

Merci je ne connaissais pas du tout.

gravatar
Le Hollandais Volant a dit :

@Fayçal : ouaip, j'ai retiré l'autre, qui ne m'appartenais pas en fait :O. Là, c'est un truc fait maison, et je prépare un logo plus gros. Mais c'est pas facile de faire un truc homogène avec le thème… M'enfin, ça presse pas :-)

@Sebsauvage : merci à toi ! J'ai découvert ça par hasard en regardant dans les fichiers css internes de Firefox (/usr/lib/firefox-3.6.3/res/forms.css, ici) :)

Je suis sûr que ça pourrait servir pas mal, par exemple dans les grosse web app, si on veut pas déstabiliser l'utilisateur.

gravatar
G... a dit :

Hey !
Intéressant Timo !

Encore une fois tu nous ouvre des portes sans que quelqu'un ne t'aie donner de clé... ^^

gravatar
JeromeJ a dit :

Salut,

Moi je trouve ça très chouette ^^ donc merci pour l'info ;)

Maintenant je dis pas que je vais forcément utiliser le truc mais pour répondre à ceux qui sont sceptiques à propos de son utilité: ça pourrait par exemple permettre d'éviter les sites qui arrachent les yeux car justement ne correspondent pas du tout avec votre thème (exemple pourri: vous allez sur un site tout bleu alors que votre thème est tout rouge) en adaptant le site à l'utilisateur :)

gravatar
Le Hollandais Volant a dit :

Je pense que ça peut être un truc super du côté des userCss, les feuilles de style côté internaute qui forcent tel ou tel rendu, par exemple, tous les liens de toutes les pages du web en vert.

J'ai pas encore de page qui utilise ça ici, mais si j'ai le temps, j'essayerais de pousser le concept (comme je fais toujours, avec les css^^). Appliquer ces styles dans une page web directement, demande, je pense une grande maitrise, car il faut voir non seulement les navigateurs mais aussi le thème graphique des internautes...

Ça peut vite devenir un casse tête, surtout que le web ne se limite plus aux ordinateurs (déjà casses têtes) mais aussis aux ipad, smart phones et autres PlaystationPortables ou Nintendo Wii...

D'un autre côté, si c'était facile, créer un site ne m'amuserait pas autant :)

Les commentaires sont fermés pour cet article