GMail ignore "display: none"
J'ai une requête que gmail ignore "display: none" - que faire? en email html pour cacher arow ou div
Si style = "display: none" ne fonctionne pas dans gmail, mettez style = "display: none! Important;" et cela fonctionne dans gmail.
Si vous utilisez des requêtes multimédia et que vous affichez/cachez du contenu, les fichiers css incorporés ne pourront pas écraser la déclaration en ligne! Importants. Au lieu de cela, vous pouvez utiliser overflow: hidden, comme ceci:
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>
Dans vos requêtes multimédia intégrées, vous annulerez naturellement ces styles pour révéler la div, puis masquerez la version de contenu du bureau.
@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, dans la mesure où cela crée une section d'espaces au-dessous du contenu visible égale à la hauteur du div.
Bien que cela ait déjà été répondu, je pensais juste que je mettrais une solution qui fonctionnerait vraiment pour moi au cas où quelqu'un aurait ce problème à l'avenir. C'est vraiment une combinaison des réponses ci-dessus et de quelque chose d'autre que j'ai trouvé en ligne.
Le problème que je rencontrais concernait Gmail et Outlook. Conformément à l'OP, le contenu mobile que je possédais ne serait pas masqué dans Gmail (Explorer, Firefox et Chrome) ou Outlook (2007,2010 & 2013). J'ai résolu ceci 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
Comme vous pouvez le constater à partir du code HTML ci-dessus, encapsulez tout le contenu dans ces balises;
<!--[if !mso 9]><!--> <!--<![endif]-->,
cache le contenu des versions Outlook que j'ai mentionnées. Pour tous les autres clients de messagerie, le display:none; fonctionne parfaitement. J'ai également vu que vous pouvez également utiliser mso-hide:all pour masquer des éléments pour Outlook, mais je pensais que cela é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éé une id 'spéciale' appelée gmail que j'ai ensuite appliquée à un div au sein du <td>. J'ai essayé COUNTLESS avec d’autres méthodes telles que overflow:hidden inline et toutes sortes d’autres combinaisons, mais c’est ce qui a fonctionné pour moi.
En bref, emballer le contenu dans le <td> dans un <div> qui contenait ensuite le overflow:hidden,width:0, puis écraser ces styles en donnant à la div une 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!
Utiliser display:none !important; résout le problème avec gmail, mais Outlook 2007 et 2010 l'ignorent. Vous pouvez résoudre ce problème en utilisant display:none; display:none !important; Ainsi, gmail utilise une version et Outlook 2007 et 2010 utilise l'autre.
Il a déjà été dit que display:none !important; fonctionnait déjà, mais personne n’a défini de cas d’utilisation, je vais donc vous en donner un sur lequel je travaillais lorsque j’ai trouvé cette question et cette solution sur SO.
Je créais un e-mail en plusieurs parties avec du texte brut/clair et du HTML. Dans la source, le code HTML est généré à partir de fichiers de modèle et le texte brut est créé à partir de la suppression des 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 consiste à l'envelopper dans un <div style="display:none !important> qui sera supprimé lors de la génération du texte brut. Par exemple, s'il s'agit de 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 code HTML sera rendu comme prévu (aucun groupe de =) et le texte brut avec tous les caractères supprimés sera:
This is part of an html message template.
=========================================
This is some footer text below a black line.
Merci pour cela, très utile pour moi.
Essayez max-height pour Gmail, cela devrait le comprendre. puis utilisez max-height: inherit! important; dans le CSS, cela devrait éliminer le problème d'espacement:
<div class="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">
@media only screen and (max-width: 480px) {
.mobile {
display:block !important;
margin: 0;
padding:0;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
}
Supprimez complètement l'élément de votre code source.
Les clients de messagerie sont très stricts sur certaines règles CSS. De plus, vu qu'aucun JavaScript ne peut être exécuté dans l'e-mail, un display: none n'a de toute façon aucune fonction, n'est-ce pas?
Pour masquer un élément dans un e-mail HTML et le faire fonctionner dans Gmail, vous devez le mettre à zéro et ajuster le dimensionnement de votre CSS (ce que Gmail ignorera).
Ainsi:
<style>
@media only screen and (max-width: 480px) {
*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
<td style="width: 0; max-height: 0; overflow: hidden; float: left;">
</td>
</tr>
<!--<![endif]-->
</table>
En outre, le commentaire conditionnel ajouté vous couvre pour Outlook 07.
J'ai une situation dans laquelle je viens d'avoir quelques mots. J'ai utilisé font-size: 0px ;.
<div style="font-size:0px">foo bar</div>
Cela a fonctionné pour moi.
C'est avec grand plaisir que je souhaite partager cette nouvelle avec tous ceux que gmail prend désormais en charge la propriété CSS 'display: none' lors du test de EmailMonks . Mais vous devez appliquer une classe avec CSS en utilisant 'display: none', pour ne pas être touché par l'outil en ligne.
Vous pouvez en lire plus ici
Construire sur Dan S., un autre exemple que j’utilise fréquemment.
@media only screen and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) {
p[class="hidden"] { /* I use this format to get past Yahoo Mail */
display: block !important;
visibility: visible !important;
max-height: none !important;
}
}
<td>
<p class="hidden" style="display:none;visibility:hidden;max-height:0px;">You can't see me.</p>
</td>