Style inline w wiadomościach e-mail

Wielu klientów poczty e-mail — w szczególności Gmail w wersji webowej przed majem 2016 r. oraz kilka używanych do dziś aplikacji mobilnych — usuwa lub przepisuje bloki <style> i zewnętrzne arkusze stylów. Atrybuty inline style="..." są jedynym CSS-em, który ma gwarancję zachowania we wszystkich klientach.

Ręczne pisanie stylów inline jest trudne w utrzymaniu. Wiadomość e-mail należy tworzyć przy użyciu zwykłych znaczników <style> i nazw klas, a następnie podczas budowania uruchomić inliner (Juice, Premailer, mjml), który przed wysłaniem skopiuje każdą regułę do atrybutu style pasującego elementu.

Style inline mają najwyższą specyficzność poza !important. Zapytanie media, które chce nadpisać wartość inline, musi używać !important dla każdej właściwości, ponieważ w przeciwnym razie deklaracja inline wygrywa niezależnie od kontekstu @media.

Inlinery kopiują tylko reguły pasujące do poszczególnych elementów; bloki @media pozostają wewnątrz znacznika <style>, ponieważ nie można ich spłaszczyć. To wystarcza — Gmail i inne klienty usuwające style pozostawiają style inline bez zmian, a klienty respektujące znaczniki <style> nakładają na nie zapytania media.

Niektóre klienty niepoprawnie obsługują skrócone zapisy: font: 14px/1.4 Arial może zostać całkowicie zignorowany. Należy używać pełnej postaci (font-family, font-size, line-height), aby każda właściwość działała lub przestała działać niezależnie.

Tryb ciemny automatycznie odwraca kolory w wielu klientach. Jawne ustawienie color i background-color na kontenerach tekstu zapobiega katastrofom w postaci czarnego tekstu na czarnym tle. Zawsze należy ustawiać obie właściwości.

Do określania rozmiarów należy używać px. Jednostki rem, vh i vw są obsługiwane niespójnie. Procenty działają w tabelach przy układach o pełnej szerokości; bezwzględne szerokości w pikselach tabel wewnętrznych i komórek renderują się identycznie we wszystkich klientach.

Czcionki internetowe za pośrednictwem @font-face działają w Apple Mail, iOS Mail oraz Thunderbirdzie, ale nie działają w Outlooku ani Gmailu. Jako wartość inline należy stosować stos czcionek bezpiecznych dla sieci (Arial, Helvetica, sans-serif), a @font-face traktować wyłącznie jako progresywne ulepszenie dla klientów, którzy je obsługują.

Współczesne klienty poprawnie obsługują inline background-image na elemencie div, ale Outlook je ignoruje. Należy użyć bgcolor jako rozwiązania awaryjnego oraz warunkowego VML <v:rect> dla Outlooka, aby każdy klient wyświetlał wizualnie równoważne tło, nawet gdy pełna zgodność nie jest możliwa.

Style inline mogą wyglądać poprawnie w podglądzie przeglądarki, ale w Gmailu, Outlooku lub iOS Mail nadal mogą być renderowane inaczej. Należy użyć Litmus, Email on Acid lub bezpłatnych podglądów Mailtrap, aby zweryfikować działanie w każdym ważnym kliencie przed wysłaniem kampanii.

Należy dodać niewielki reset w tagu <style> (margin: 0 dla body, line-height: 100% dla tabel, border: none dla obrazów), aby zneutralizować domyślne style klienta. Można umieścić go w zapytaniu media, jeśli ma być stosowany tylko tam, gdzie tag <style> jest respektowany.

Dlaczego zapytania media w wiadomościach HTML wymagają użycia !important przy każdej właściwości?

Wiadomości e-mail wymagają stylów inline, aby przetrwać usuwanie stylów przez klienta, ale podczas tworzenia należy umieszczać style autora normalnie w <style> i dodawać je inline w czasie budowania. W zapytaniach media należy używać !important, aby pokonać specyficzność stylów inline, preferować właściwości rozwinięte zamiast skrótowych, jawnie ustawiać color i background-color, stosować jednostki px oraz testować wiadomość w rzeczywistych klientach przed wysłaniem.