Przejdź do treści

Wkładanie CSS do emaila

Przesuń CSS z bloku style do wstawionych atrybutów style, aby przetrwał w klientach poczty e-mail.

Wejście
Wynik

Wkładanie CSS do emaila

Większość klientów poczty e-mail odrzuca lub ignoruje CSS napisany w bloku <style> — najsłynniejszym przykładem jest aplikacja internetowa Gmaila. Rozwiązaniem jest przeniesienie każdej reguły do elementu, który ma być docelowy, jako atrybut style="", i to dokładnie robi to narzędzie: wklej HTML z blokiem <style> i wróci ten sam znacznik ze stylami wstawionymi, gotowymi do wklejenia do kampanii lub szablonu transakcyjnego.

Scalanie respektuje specyficzność CSS domyślnie, więc reguła taka jak #footer pokonuje zwykły a nawet jeśli ta reguła pojawia się później w arkuszu stylów — wyłącz "Uwzględniać specyficzność selektora" i scalaj tylko według kolejności źródła. Reguły, których nie można osadzić — zapytania mediów, :hover, inne reguły — nigdy nie są dyskretnie usuwane: "Zachować reguły, których nie można osadzić" pozostawia je w przycięty bloku <style>, podczas gdy "Usunąć oryginalny blok <style>" decyduje, czy ten blok jest w ogóle emitowany. "Dodać atrybuty width/bgcolor dla starszych wersji" dubluje szerokość, wysokość i kolor tła na zwykłe atrybuty, które oczekują starsze buildy Outlooku, "Usunąć nieużywane klasy i ID" oczyszcza selektory, na które nic się nie odwołuje, a "Minifikować wyjście" zbaluje pozostałą przestrzeń.

Obsługa selektora obejmuje selektory typu, klasy, ID i atrybutu, plus selektory potomka i dziecka — wzory używane w rzeczywistych szablonach stylów poczty e-mail. Własny istniejący atrybut style="" elementu zawsze wygrywa przed wszystkim scalonym, co odpowiada sposobowi, w jaki przeglądarki stosują kaskadę. Gdy "Pokazywać ostrzeżenia o nieobsługiwanych właściwościach" jest włączone, właściwości, które wielu klientów ignoruje — float, position: fixed, transformacje, box-shadow — są oznaczane w komentarzu na początek wyjścia, abyś mógł je złapać przed wysłaniem testu.

Wszystko działa lokalnie w Twojej przeglądarce: HTML, który wklejasz, nigdy nie jest nigdzie przesyłany. Skopiuj wynik, pobierz go jako plik .txt lub wyślij go bezpośrednio do innego narzędzia, aby można było go dalej czyszczić.

Częste pytania

Po co w ogóle musisz wstawiać CSS w emailu?
Wielu klientów poczty e-mail — zwłaszcza interfejs internetowy Gmaila — usunie blok <style> z <head> lub go całkowicie zignoruje, ale szanuje atrybut style="" na samym elemencie. Wstawianie jest obejściem, na które polega cały przemysł e-maili HTML.
Co się stanie z zapytaniami mediów i regułami :hover?
Nie można ich osadzić na jeden element, więc domyślnie pozostają w przyciętym bloku <style> dla klientów, którzy go czytają — wyłącz "Zachować reguły, których nie można osadzić" i zamiast tego je upuść.
Czy prawidłowo obsługuje specyficzność selektora?
Tak. Selektor ID pokonuje selektor klasy, który pokonuje selektor typu, niezależnie od kolejności, w jakiej pojawiają się reguły — to są te same reguły, które przeglądarki stosują. Wyłącz "Uwzględniać specyficzność selektora" na scalanie tylko według kolejności źródła.
Do czego służą atrybuty width/bgcolor?
Niektóre starsze wersje Outlooku renderują tabele przy użyciu silnika Word i ignorują wstawione CSS dla tła i rozmiaru. "Dodać atrybuty width/bgcolor dla starszych wersji" dubluje te wartości na zwykłe atrybuty HTML, które ci klienci honorują.
Czy mój HTML jest gdzieś przesyłany?
Nie. Wstawianie CSS odbywa się całkowicie w Twojej przeglądarce — Twój szablon poczty e-mail nigdy nie opuszcza Twoje urządzenie.