Gmail teraz obsługuje wyświetlanie: none;: Co to oznacza dla Twoich projektów e-maili

Opublikowany: 2016-09-01

Gmail jest odpowiedzialny za wiele problemów związanych z programistami poczty e-mail. Brak obsługi wielu właściwości CSS — w tym brak obsługi znacznika <style> w <head> wiadomości e-mail — spowodował zbiorowe westchnienia programistów na całym świecie. Kodowanie wiadomości e-mail jest trudne, szczególnie w przypadku Gmaila.

Jednak 31 sierpnia 2016 r. maniacy poczty e-mail z całego świata zauważyli dużą zmianę zachodzącą w Gmailu. Zaczęło wspierać display: none; właściwości CSS display: none; .

Co to jest wyświetlacz:brak; ?

display:none; to właściwość CSS, która ukrywa określone elementy wiadomości e-mail. Na przykład display:none; może służyć do ukrywania tekstu w nagłówku, którego chcesz używać do kontrolowania, jaki tekst podglądu pojawia się w skrzynce odbiorczej, ale którego nie chcesz wyświetlać w treści wiadomości e-mail. Może też służyć do kontrolowania treści przeznaczonych dla komputerów stacjonarnych, które chcesz ukryć, gdy subskrybent otworzy się na urządzeniu mobilnym.

Spróbuj lakmusa

Podgląd swoich e-maili w Gmailu

Zobacz, jak zmiany w Gmailu wpłynęły na Twój projekt. Natychmiastowy podgląd wiadomości e-mail w Gmailu i ponad 50 innych klientach poczty e-mail za pomocą Litmusa.

Wypróbuj Litmus za darmo →

Gmail nie obsługuje jednak użycia display:none; w przeszłości, powodując wiele frustracji w społeczności e-mailowej.

W przeszłości, aby tekst w nagłówku znikał z treści wiadomości e-mail w Gmailu, projektanci wiadomości e-mail musieli zastosować jedno z następujących obejść:

  • <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;” />

Konfigurowanie tych obejścia i nadpisywanie stylów dla innych klientów, którzy mogą nie obsługiwać tych właściwości CSS, staje się niezwykle czasochłonne i czasami może wydłużyć czas programowania i testowania.

Teraz wygląda na to, że coś się zmieniło — i może to być największa wiadomość dla projektantów poczty e-mail w tym roku.

Gmail obsługuje teraz display:none;

Jak niektórzy uważni maniacy poczty e-mail odkryli w tym tygodniu, Gmail obsługuje użycie display:none; na wszystkich ważnych testowanych przez nas elementach HTML, w tym:

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

Nie wierzysz, zanim to zobaczysz? My też nie. Oto przykład kodu ze zrzutami ekranu do sprawdzenia:

 <!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>

Zmiana została wdrożona w całej rodzinie klientów, w tym w Gmailu, Google Apps i Inbox by Gmail.

Nie wyświetla się; Wsparcie w Gmailu

check-zielony

Gmail (@gmail.com adresy w Chrome/Firefox/Explorer)

check-zielony

Aplikacje Google (Chrome/Firefox/Explorer)

check-zielony

Inbox by Gmail (Chrome + Firefox)

check-zielony

Inbox by Gmail (iOS/Android)

check-zielony

Aplikacja Gmail (iOS/Android)

To, co się nie zmieniło, to to, że Gmail nadal nie obsługuje klas CSS ani identyfikatorów, co oznacza, że ​​nadal będziesz musiał wbudować dowolny CSS i przenieść wszystkie informacje o stylach — w tym display:none; właściwość — do treści wiadomości e-mail w formacie HTML.

Inne implikacje

Podobnie jak w przypadku każdej zmiany w obsłudze CSS w kliencie poczty, obsługa display:none; w Gmailu ma kilka interesujących konsekwencji:

Hack, aby kontrolować skalowanie czcionek w aplikacji Gmail na iOS

W wersji aplikacji Gmail na iOS automatyczne skalowanie czcionek było prawdziwym problemem. Rozmiary czcionek byłyby zwiększane, przez co e-maile wyglądałyby na uszkodzone w aplikacji. Wprowadzono hack, aby temu zapobiec:

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

Jako display:none; jest teraz obsługiwany w Gmailu (w tym w aplikacji na iOS), ten hack już nie działa, ponownie łamiąc setki e-maili! Jest poprawka — po prostu usuń lub przesuń display:none; z wbudowanego CSS do osadzonego CSS. Justin Khoo z Fresh Inbox napisał o tej poprawce tutaj.

Ukryj elementy za pomocą hackowania selektora atrybutów (w tym zapytania o media!)

Chociaż Gmail generalnie nie obsługuje CSS w <head> , niektóre selektory CSS działają, w szczególności język i podsumowanie tylko dla adresów @gmail.com. Na przykład:

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

Można to wykorzystać do kierowania elementów HTML, które będą działać również w Gmailu:

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

Teraz Gmail obsługuje display:none; , możesz użyć go w połączeniu z zapytaniem o media, aby ukryć treść w poczcie internetowej Gmaila:

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

Pomysły na to, co robić, gdy nie naprawiasz Gmaila

Teraz, gdy spędzasz o wiele mniej czasu na opracowywanie i rozwiązywanie problemów z e-mailami, co zrobisz z całym wolnym czasem, który masz teraz do dyspozycji? Oto pewne sugestie:

  • Trzymajcie kciuki, aby ta zmiana była trwała
    Czasami dostawcy skrzynek odbiorczych testują zmiany w swoich silnikach renderowania, ale mogą je cofnąć w dowolnym momencie. Miejmy nadzieję, że nigdy, przenigdy tego nie odbiorą. Dlaczego by nie zatweetować do nich i dać im znać, jak bardzo doceniamy zmianę?
  • Załaduj bibliotekę fragmentów lakmusa
    Z całym nowym display:none; Hacki do Gmaila.
  • Czytać książkę
    W porządku, jeśli chodzi o pocztę e-mail. Oto nasza rekomendacja.
  • Testuj, testuj i testuj jeszcze więcej
    Kontynuuj testowanie każdego wysłanego e-maila, ponieważ klienci poczty e-mail będą nadal wprowadzać takie niezapowiedziane zmiany w przyszłości.

Podgląd swoich e-maili w Gmailu

Jak te zmiany wpłynęły na Twoje projekty e-maili? Użyj Litmusa, aby natychmiast wyświetlić podgląd wiadomości e-mail w Gmailu i ponad 50 innych klientach poczty e-mail, aby upewnić się, że Twoje projekty wyświetlają się zgodnie z oczekiwaniami.

Ta aktualizacja Gmaila jest doskonałym przykładem tego, jak klienci poczty e-mail wprowadzają zmiany w obsłudze bez powiadamiania społeczności e-mailowej. Zawsze miej pewność, że stawiasz na e-maile z najlepszej strony. Przetestuj każdy e-mail przed każdym wysłaniem.

Wypróbuj Litmus za darmo →