Gmail prend maintenant en compte Display:none; ! Qu’est-ce que ça change ?

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

gmail-logoQuoi ? Oui, vous avez bien lu, Gmail, qui représente selon Litmus 16% de l’ensemble des ouvertures d’emails, et qui n’est pas le meilleur ami des intégrateurs d’HTML pour l’email (pas aussi pire qu’Outlook mais quand même) a fait un pas dans la bonne direction. Parce que bon, c’est un petit pas pour Gmail, mais pas encore vraiment un grand pas pour l’humanité (cet article récent de Rémi Parmentier est intéressant à ce propos), Gmail a encore bien du chemin à parcourir pour nous extraire de toutes les embûches.

Mais ça sert à quoi le display:none; ?

En CSS, le propriété display sert à définir comment afficher un élément. Lorsqu’un élément en HTML reçoit la propriété display avec pour valeur “none”, l’élément en question n’est tout simplement pas affiché.

Dans le monde de l’html pour l’email, display:none; est souvent utilisé afin de dissimuler du contenu sur une version desktop, ou mobile, ou vice-versa. Cela permet par exemple de cacher certains élément non essentiels sur mobile afin de gagner de la place, ou encore de s’adapter au contexte de lecture.

Malheureusement, avec Gmail, il fallait ruser, parce que cette propriété n’était simplement pas prise en charge. Voici quelques exemples de workaround cités par Litmus :

[crayon]

[/crayon]

Evidemment, quand on commence à ruser, on s’attire des problèmes en chaîne sur d’autre clients emails qui n’y comprennent plus rien. Pas simple la vie d’intégrateur email !

Maintenant ça marche !

C’est Emaillmonks qui semble avoir le premier découvert le changement ce 29 août 2016. Display:none; fonctionne donc maintenant à la fois sur la version mobile de Gmail et sur sa version Desktop. Malheureusement, ça ne veut pas dire qu’il est maintenant possible d’afficher certains éléments dans la version desktop de Gmail et de les cacher dans la version mobile, les restrictions liées à l’utilisation des mediaqueries restent bien présentes.

Voici un petit tableau construit par Email On Acid et qui résume le support du Display:none; dans les différents environnements :

display-none-support

Vous désirez l’aide de spécialistes pour vos emailings ?

[button color=”orange” size=”medium” link=”https://agence.badsender.com/production/integration-html-email/” icon=”” target=”true”]Découvrez notre offre d’intégration html pour l’email[/button]

Et aussi toutes les prestations de notre agence emailing et eCRM

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

Contactez l'auteur de l'article

Réponses

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  1. […] Très importante annonce publié par Gmail sur son blog (et aussi sur le blog de Google Apps), l’application, que ce soit la version web, mobile ou tablette (mais aussi les applis « Inbox ») va maintenant comprendre les styles CSS placés dans le header du code HTML, y compris les indispensables media queries. Cette annonce vient un peu plus d’une semaine après une autre annonce que nous avions relayés ici concernant le support du Display:none; par le même Gmail. […]