Gmail ne tient pas compte de la mention "display:none".

Question

J'ai une requête que Gmail ignore. display:none .

Que faire ? Dans un email HTML pour cacher une ligne ou un div.

Answer 1

Si style="display:none" ne fonctionne pas dans Gmail, mettez style="display:none !important;" et ça marche dans Gmail.

Answer 2

Pour ceux qui rencontrent un problème similaire dans le cadre du développement d'une messagerie mobile/de bureau dans Gmail, si vous utilisez des media queries et affichez/cachez le contenu, la css intégrée ne pourra pas écraser la déclaration inline !important. À la place, vous pouvez utiliser overflow:hidden, comme suit :

<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>

Dans vos requêtes multimédias intégrées, vous annulerez naturellement ces styles pour révéler la division, puis masquer la version de bureau du contenu.

@media only screen and (max-width: 480px) {
 .mobile {
  display : block !important;
  width : auto !important;
  overflow : visible !important;
  float : none !important;
 }
 .desktop {
  display : none !important;
 }
}

Malheureusement, la propriété height ne fonctionne pas dans Gmail, sinon ce serait une meilleure solution, étant donné que cela crée une section d'espace blanc sous le contenu visible égale à la hauteur de la div.

Answer 3

Bien qu'on ait déjà répondu à cette question, j'ai pensé que je pourrais proposer une solution qui a vraiment fonctionné pour moi, au cas où quelqu'un aurait ce problème à l'avenir. Il s'agit d'une combinaison des réponses ci-dessus et d'une autre solution que j'ai trouvée en ligne.

Le problème que je rencontrais concernait Gmail et Outlook. Comme indiqué dans l'OP, le contenu mobile que j'avais ne se cachait pas dans Gmail (Explorer, Firefox et Chrome) ou Outlook (2007, 2010 et 2013). J'ai résolu ce problème en utilisant le code suivant.

Voici mon contenu mobile :

<!--[if !mso 9]><!-->
<tr>
  <td style="padding-bottom:20px;" id="mobile">
    <div id="gmail" style="display:none;width:0;overflow:hidden;float:left;max-height:0;">
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td>
    <img src="imageurl" style="border:0;display:block;width:100%;max-height:391px;" />
          </td>
    </tr>
    <tr>
          <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;padding-top:15px;padding-bottom:15px;font-family:Arial,Helvetica,sans-serif;font-size:22px;color:#1c1651;padding-left:10px;padding-right:10px;text-align:left;" id="mobiletext" align="left">We're now on Twitter</td>
    </tr>
    <tr>
      <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#585858;padding-left:10px;padding-right:10px;text-align:left;line-height:24px;" id="mobiletext"><a href="#" style="text-decoration:none;color:#0068ca;">Follow us now</a> for some more info.
      </td>
    </tr>
    <tr>
      <td>
        <img src="imageurl" style="border:0;display:block;width:100%;max-height:37px;" />
          </td>
    </tr>                               
  </table>  
    </div>
  </td>
</tr>
<!--<![endif]-->

Et voici le CSS :

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
*[id=mobile] {
    width:300px!important;
    height:auto!important;
    display:block!important;
    overflow:visible!important;
    line-height:100%!important;
  }
*[id=gmail] {  
    display:block!important;
    width:auto!important;
    overflow:visible!important;
    float:none !important;
    height:inherit!important;
    max-height:inherit!important;
  }

Corrections pour Outlook

Donc, comme vous pouvez le voir dans le code HTML ci-dessus, en enveloppant tout le contenu dans ces balises ;

<!--[if !mso 9]><!--> <!--<![endif]--> ,

cache le contenu pour les versions d'Outlook que j'ai mentionnées. Pour tous les autres clients de messagerie, le display:none; fonctionne très bien. J'ai également vu que vous pouvez aussi utiliser mso-hide:all pour cacher des choses pour Outlook mais j'ai pensé que c'était un peu plus facile que de placer ce code en ligne.

Corrections pour Gmail

Maintenant pour Gmail, vous pouvez voir que j'ai créé un "spécial". id appelé gmail que j'ai ensuite appliqué à un div à l'intérieur du <td> . J'ai essayé d'innombrables autres méthodes pour utiliser des choses telles que overflow:hidden en ligne et toutes sortes d'autres combinaisons, mais c'est ce qui a fonctionné pour moi.

Donc, pour résumer, le fait d'envelopper le contenu dans la balise <td> dans un <div> qui contient alors le overflow:hidden,width:0 etc puis en écrasant ces styles en donnant à la div un id de, dans mon cas gmail a résolu le problème pour moi.

Quoi qu'il en soit, peut-être que quelqu'un trouvera cela utile à l'avenir !

Answer 4

Utilisation de display:none !important; résout le problème avec gmail mais il est ensuite ignoré par Outlook 2007 et 2010. J'ai contourné ce problème en utilisant display:none; display:none !important; De cette façon, gmail utilise une version et Outlook 2007 et 2010 utilise l'autre.

Answer 5

Il a déjà été dit display:none !important; fonctionne, mais personne n'a indiqué un cas d'utilisation pour cela, alors je vais en donner un sur lequel je travaillais lorsque j'ai trouvé cette question et cette solution sur SO.

Je créais un courriel en plusieurs parties avec du texte brut et du html. Dans la source, le html est généré à partir de fichiers modèles, et le texte brut est créé en supprimant les balises de l'e-mail complet.

Pour inclure du texte supplémentaire dans le texte brut qui n'est pas affiché dans le code html, le moyen le plus simple est de l'insérer dans une balise de type <div style="display:none !important> qui sera supprimée lors de la génération du texte en clair. Par exemple, si c'est votre modèle :

<p>This is part of an html message template.</p>
<div style="display:none !important">=================================</div>
<div style="border-top:3px solid black;margin-top:1em;">
   <p>This is some footer text below a black line</p>
</div>

Le HTML sera rendu comme prévu (pas de tas de =) et le texte brut avec tous les div's supprimés sera :

This is part of an html message template.
=========================================
This is some footer text below a black line.