Utiliser CSS dans Gmail

En août dernier, j’expliquais comment Gmail supporte bien la balise <style> et les media queries. Pas grand chose n’a changé du côté de Gmail depuis. Mais il s’avère que la compréhension collective des filtres opérés par Gmail a, elle, plutôt bien évolué. Quelques jours après la publication de mon précédent article, l’excellent FreshInbox a publié deux articles qui ont complètement changé ma compréhension de Gmail.

Dans le premier article, « Gmail supporte la balise <style>… en quelque sorte », Justin Khoo explique que simplement en ajoutant un sélecteur universel * devant une règle CSS, celle-ci ne sera pas supprimé. Dans mon précédent article, j’écrivais :

Malheureusement, Gmail supprime toute règle CSS contenant des pseudo-sélecteurs comme :first-child ou :nth-child().

C’est totalement faux ! Grâce à cette bidouille de sélecteur universel, on peut tout à fait utiliser des pseudo-classes. Si on prend par exemple le code suivant :

* div:first-child { background:red; }
* div:nth-child(2) { background:blue; }

Il sera transformé par Gmail ainsi :

div.m1479b618d2293d85 * div:first-child { background:red; }
div.m1479b618d2293d85 * div:nth-child(2) { background:blue; }

C’est déjà un grand pas en avant ! Mais ça signifie aussi qu’on peut aussi utiliser un sélecteur d’attributs. Et c’est là où les choses deviennent vraiment intéressantes.

Dans un article publié quelques jours après, Justin Khoo explique comment rendre un e-mail interactif dans Gmail en utilisant le sélecteur d’attributs. Grâce à la présence du sélecteur *, il utilise une règle avec la pseudo-classe :hover.

* [lang~="x-divbox"]:hover{
	background-color: green !important;
	color: white;
}

Comme Gmail supprime toute classe du code HTML, il détourne malicieusement l’attribut lang (qui lui n’est pas supprimé) pour cibler un élément en CSS. Est-ce que c’est sale ? Oui. Est-ce que ça fonctionne ? Oui.

Et c’est là où j’ai compris un truc. Le problème de Gmail, ce n’est pas son support de CSS, mais son support de HTML. En supprimant des attributs HTML de notre code, Gmail complique l’utilisation de CSS.

J’ai alors fait quelques tests afin de déterminer si d’autres attributs que lang ne pouvaient être utilisés, l’objectif étant de trouver un attribut qui puisse être utilisé à des fins de styles, mais sans incidence sur le rendu utilisateur. Malheureusement, Gmail supprime les attributs id, class ou data-*. Par contre, Gmail conserve les attributs title, alt, lang, mais aussi les attributs ARIA comme aria-labelledby.

J’ai rapidement écartés les attributs title et alt qui se retrouvent visibles facilement dans un navigateur. Et je reste alors partagé entre les attributs lang et aria-labelledby. D’après mes tests, une utilisation détournée de l’un ou de l’autre n’a pas d’incidence avec VoiceOver sous OS X. Cependant, un récent article d’Adrian Roselli met en garde contre l’utilisation détournée de l’attribut lang.

J’ai alors une préférence pour l’utilisation de aria-labelledby. Je suppose que si un lecteur d’écran ne trouve pas d’élément avec l’identifiant correspondant, il ignorera purement et simplement l’attribut (c’est bien ce qui se passe dans VoiceOver).

Voici un exemple de code fonctionnel dans Gmail avec cet attribut.

<div class="toto" aria-labelledby="toto">
	Ceci est un test.
</div>

.toto, * [aria-labelledby="toto"] { background:red; }

Ce code sera transformé comme ci-dessous par Gmail.

div.m1479b618d2293d85 .toto,div.m1479b618d2293d85 * [aria-labelledby="toto"]{background:red}