Une croyance courante dans l’intégration d’e-mails est de dire que Gmail ne supporte pas les styles ou le responsive design. En réalité, c’est un peu plus fin que ça. En avril dernier, EmailOnAcid rappelait que Gmail supporte bien la balise <style>.
Intrigué, j’ai fait mes petits tests, et je confirme : la version desktop du webmail Gmail conserve bien une balise <style> incluse dans le <head> d’un e-mail. Toutes les règles sont bien conservées, mais préfixées par une classe propre à Gmail. Ainsi le code suivant…
.toto { background:red; }
@media only screen and (max-width:600px) {
.toto { background:white; }
}… sera transformé en :
div.m1479b618d2293d85 .toto { background:red; }
@media only screen and (max-width:600px) {
div.m1479b618d2293d85 .toto { background:white; }
}Le hic (parce que forcément il y a un hic), c’est que Gmail supprime toutes les classes et identifiants au sein du code HTML de l’e-mail. Du coup, même si ces styles sont bien conservés, aucun n’est appliqué puisque plus aucune classe ou identifiant ne sont présents.
Mais du coup, ça signifie qu’on peut jouer sur des styles ciblant des balises. Par exemple, le code suivant transformé par Gmail sera bien appliqué dans votre e-mail :
div.m1479b618d2293d85 table td { background:red; }On pourrait alors imaginer styler des éléments non plus par classe mais par leur position dans le code HTML. Malheureusement, Gmail supprime toute règle CSS contenant des pseudo-sélecteurs comme :first-child ou :nth-child().
Par contre, Gmail conserve bien les règles utilisant des sélecteurs d’éléments enfants ou adjacents, comme >, + ou ~. On peut alors jouer sur des combinaisons de balise pour cibler un élément en particulier. Par exemple, pour cibler le troisième tableau d’un e-mail, on pourrait créer la déclaration suivante :
table + table + table { background:red; }Toutefois, cette règle s’appliquera aussi pour tout autre tableau précédé de deux tableaux (donc aussi le quatrième, le cinquième, etc.).
Mais surtout, ces bidouilles ne concernent que la version desktop du webmail Gmail. La version mobile de Gmail, ainsi que les applications iOS ou Android, continuent de supprimer toute balise <style>.
Skoua, le
Intéressant à savoir.
div.m1479b618d2293d85 c’est toujours le même nombre ?
Rémi, le
Non, c’est une chaîne de caractères générée aléatoirement (mais commençant toujours pas un m).
Remi Grumeau, le
Alors gaffe au sélecteur absolu >, qui fait péter l’émail sur plusieurs webmail (tout ce qu’il y a avant ce > étant supprimé).
Et c’est vrai pour Gmail desktop et mobile ou uniq le desktop?
Remi Grumeau, le
Et avec les sélecteurs par attributs ça saute aussi? Genre table[width=”100%”] {…} ?
Rémi, le
Tu as un exemple de webmail ne supportant pas
>? (Il me semble que ce fut le cas chez Orange à une époque, mais ça a dû être corrigé depuis un moment).Aussi comme indiqué en fin d’article ça ne concerne que Gmail desktop. La version mobile du webmail ou les applications mobiles continuent de supprimer tous les styles.
Et pour ce qui est des sélecteurs d’attributs, Gmail supprime toute règle en contenant.
jeremielabe, le
boloss ca marche pas le queries sur gmail app