Gmail acceptă acum afișarea: niciuna;: Ce înseamnă pentru modelele dvs. de e-mail

Publicat: 2016-09-01

Gmail este responsabil pentru multe dureri de cap în rândul dezvoltatorilor de e-mail. Lipsa acestuia de suport pentru multe proprietăți CSS – inclusiv lipsa suportului pentru eticheta <style> din <head> a unui e-mail – a dat naștere suspinului colectiv al dezvoltatorilor de e-mail din întreaga lume. Codarea e-mailului este dificilă, mai ales pentru Gmail.

Dar pe 31 august 2016, pasionații de e-mail din întreaga lume au observat o schimbare majoră în Gmail. A început să accepte display: none; proprietăților CSS display: none; .

Ce este display:none; ?

display:none; este o proprietate CSS care ascunde anumite elemente ale e-mailului dvs. De exemplu, display:none; poate fi folosit pentru a ascunde textul antetitului pe care doriți să îl utilizați pentru a controla ce text de previzualizare apare în căsuța de e-mail, dar pe care nu doriți să îl afișați în corpul unui e-mail. Sau poate fi folosit pentru a controla conținutul specific desktopului pe care doriți să-l ascundeți când abonatul dvs. se deschide pe un dispozitiv mobil.

Încearcă turnesol

Previzualizează-ți e-mailurile în Gmail

Vedeți cum modificările din Gmail v-au afectat designul. Previzualizează-ți instantaneu e-mailul în Gmail și peste 50 de alți clienți de e-mail, cu Litmus.

Încercați Litmus gratuit →

Gmail, cu toate acestea, nu a acceptat utilizarea display:none; în trecut, provocând multă frustrare în comunitatea de e-mail.

În trecut, pentru a face ca textul din preheader să dispară din corpul unui e-mail în Gmail, designerii de e-mail trebuiau să folosească una dintre următoarele soluții:

  • <div style=”max-height: 0px; overflow: hidden;”></div>
  • <div style=”width: 0px; height: 0px; max-width: 0px; max-height: 0px; overflow: hidden;”></div>
  • <img style=”width: 0px; height: 0px;” />

Configurarea acelor soluții și suprascrierea stilului pentru alți clienți care ar putea să nu accepte acele proprietăți CSS devine incredibil de consumatoare de timp și uneori poate adăuga ore la timpul de dezvoltare și testare.

Acum, se pare că lucrurile s-au schimbat – și aceasta ar putea fi cea mai mare veste pentru designerii de e-mail din acest an.

Gmail acceptă acum display:none;

După cum au descoperit unii specialiști atenți ai e-mailurilor săptămâna aceasta, Gmail acceptă utilizarea display:none; pe toate elementele HTML importante pe care le-am testat, inclusiv:

  • <div>
  • <img>
  • <a>
  • <table>
  • <input>

Nu crezi înainte de a vedea? Nici noi nu am făcut-o. Deci, iată un exemplu de cod cu capturi de ecran pe care să le verificați:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Gmail display: none;</title> <style> @media screen and (max-width: 2000px) { * [summary~="hide"] {display:none;} } </style> </head> <body> <div>I will not show</div> <div class="hide" summary="hide">I will not show in Gmail.com webmail accounts</div> <a href="https://litmus.com">I will not show</a> <img src="http://pages.litmus.com/l/31032/2015-06-30/3kn7qh/31032/63832/litmus_logo_white.png" width="130" height="48"> <table> <tr> <td>I will not show</td> </tr> </table> <input type="checkbox"> </body> </html>

Schimbarea a fost implementată în întreaga familie de clienți, inclusiv Gmail, Google Apps și Inbox by Gmail.

afișaj: niciunul; Asistență în Gmail

check-verde

Adrese Gmail (@gmail.com în Chrome/Firefox/Explorer)

check-verde

Google Apps (Chrome/Firefox/Explorer)

check-verde

Inbox by Gmail (Chrome + Firefox)

check-verde

Inbox prin Gmail (iOS/Android)

check-verde

Aplicația Gmail (iOS/Android)

Ceea ce nu s-a schimbat este că Gmail încă nu are suport pentru clasele sau ID-urile CSS, ceea ce înseamnă că va trebui în continuare să introduceți orice CSS și să mutați toate informațiile de stil, inclusiv display:none; proprietate — în corpul e-mailului dvs. HTML.

Alte Implicații

Ca și în cazul oricărei modificări a suportului CSS într-un client de e-mail, suportul pentru display:none; în Gmail are câteva repercusiuni interesante:

Hack pentru a controla scalarea fonturilor pentru aplicația Gmail iOS

Pe versiunea iOS a aplicației Gmail, scalarea automată a fonturilor a fost o problemă reală. Dimensiunile fonturilor ar fi mărite, determinând ca e-mailurile să pară rupte în aplicație. A fost introdus un hack pentru a împiedica acest lucru:

 <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>

Ca display:none; este acum acceptat în Gmail (inclusiv în aplicația iOS), acest hack nu mai funcționează, rupând din nou sute de e-mailuri! Există o soluție - pur și simplu eliminați sau mutați display:none; din CSS-ul dvs. inline către CSS-ul încorporat. Justin Khoo de la Fresh Inbox a scris despre această remediere aici.

Ascundeți elementele cu selectorul de atribute (inclusiv interogări media!)

Deși Gmail nu acceptă în general CSS în <head> , unii selectori CSS funcționează, în special limba și rezumatul numai pentru adresele @gmail.com. De exemplu:

 * [summary~="foo"]{ {display:none;} }

Aceasta poate fi folosită pentru a viza elemente în HTML care vor funcționa și în Gmail:

 <div summary=”foo”>I will not display (even in Gmail)</div>

Acum că Gmail acceptă display:none; , îl puteți folosi în combinație cu o interogare media pentru a ascunde conținutul în e-mailul web Gmail:

 @media screen and (max-width: 600px) { * [summary~="hide"] {display:none;} } <div summary=”hide”>I will not display when width is 600px or below</div>

Idei despre ce să faci cu tot timpul în care nu remediați Gmail

Acum că vei petrece mult mai puțin timp dezvoltării și remedierii e-mailurilor tale, ce vei face cu tot timpul liber pe care îl vei avea acum disponibil? Iată câteva sugestii:

  • Încrucișează-ți degetele că această schimbare este permanentă
    Uneori, furnizorii de mesaje primite testează modificările aduse motoarelor lor de randare, dar pot anula modificările oricând. Să sperăm că nu o vor lua niciodată pe asta. De ce să nu tweet la ei și să-i spuneți cât de mult apreciem schimbarea?
  • Încărcați Litmus' Snippet Library
    Cu tot noul dvs. display:none; Hack-uri Gmail.
  • Citește o carte
    Totuși, este în regulă dacă este vorba despre e-mail. Iată recomandarea noastră.
  • Testați, testați și mai testați ceva
    Continuați să testați fiecare e-mail pe care îl trimiteți, deoarece clienții de e-mail vor continua să lanseze astfel de modificări neanunțate în viitor.

Previzualizează-ți e-mailurile în Gmail

Cum au afectat aceste modificări designurile tale de e-mail? Folosiți Litmus pentru a previzualiza instantaneu e-mailul în Gmail — și peste 50 de alți clienți de e-mail — pentru a vă asigura că desenele dvs. se afișează conform intenției.

Această actualizare de la Gmail este un exemplu excelent al modului în care clienții de e-mail efectuează modificări de asistență fără a anunța comunitatea de e-mail. Asigurați-vă întotdeauna că puneți în față cele mai bune e-mailuri. Testați fiecare e-mail înainte de fiecare trimitere.

Încercați Litmus gratuit →