Mettre en place la Meta theme-color pour Chrome - Themimitoof.fr

Mettre en place la Meta theme-color pour Chrome

Mettre en place la Meta theme-color pour Chrome

Après un titre qui ne vous strictement rien, je vais vous expliquer dans cet article, ce qu’est la métadonnée theme-color pour Google Chrome sur Android.

 

A quoi sert cette métadonnée ?

Concrètement ? A rien si ce n’est que faire joli ! Cette fonctionnalité est disponible depuis la version Lollipop d’Android avec l’arrivé de la fusion des onglets Chrome avec les applications.

theme-color-ss(Capture d’écran d’onglets utilisant la métadonnée theme-color – © Google Inc. 2016)

 

Cette métadonnée permet par exemple de donner plus de couleurs lors d’une navigation sur Google Chrome afin d’afficher la couleur primaire, la même couleur dans l’entête ou dans l’arrière-plan ou encore rappeler la charte graphique d’une entreprise.

 

Untitled-3

Voici quelques exemples de pages utilisant cette métadonnée : Le site de Github n’utilise pas cette métadonnée, on ce retrouve avec la couleur de base de l’onglet mais elle colle parfaitement avec la charte graphique du site. Au milieu ce trouve mon site. La couleur de l’onglet elle est de la même couleur que l’entête du site, ce qui assombrie par ailleurs la barre de notifications. Enfin, à droite, le site de Facebook. On retrouve la couleur de l’entête qui rappelle la couleur fétiche de la firme. En plus de cela, la barre de notification s’adapte à la couleur de l’onglet.

 

L’imagination, et l’usage peut être différente pour chacun. A vous ensuite de trouver les bonnes couleurs à afficher.

Mettre en place la métadonnée

La mise en place est relativement simple, il suffit simplement d’ajouter la ligne suivante entre la balise <head></head>. Le seul paramètre requis est de mettre une couleur au format hexadécimale dans la variable content.

<meta name="theme-color" content="#hexcolor" />

 

Il ne vous reste plus qu’à essayer en ouvrant un nouvel onglet sur Google Chrome depuis votre smartphone Android. Eeeeeeeet…. TADAM ! It’s work!

 

Source : https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Poster un Commentaire

avatar