Přeskočit na obsah

CSS vkládač pro email

Přesuňte CSS z bloku style do vložených atributů style, aby to přežilo v e-mailových klientech.

Vstup
Výstup

CSS vkládač pro email

Většina e-mailových klientů zahodí nebo ignoruje CSS napsané v bloku <style> — nejznámějším příkladem je webová aplikace Gmailu. Řešením je přesunout každé pravidlo na prvek, který má cílit, jako atribut style="", a právě to tento nástroj dělá: vložte HTML s blokem <style> a zpět získáte stejný markup se vloženými styly, připravenými k vložení do kampaně nebo transakční šablony.

Sjednocení respektuje CSS specificitu ve výchozím nastavení, takže pravidlo jako #footer porazí prostý a dokonce i když se toto pravidlo objeví později v šabloně stylů — vypněte "Respektovat specificitu selektoru" a slučte pouze podle pořadí zdroje. Pravidla, která se nedají vložit — dotazy na média, :hover, další pravidla — se nikdy tiše neodstraní: "Ponechat pravidla, která se nedají vložit" je nechá v oříznutém bloku <style>, zatímco "Odstranit původní blok <style>" rozhoduje, zda se tento blok vůbec emituje. "Přidat atributy width/bgcolor pro starší verze" zrcadlí šířku, výšku a barvu pozadí na prosté atributy, které očekávají starší buildy Outlooku, "Odstranit nepoužívané třídy a ID" vyčistí selektory, na které se nic neodkazuje, a "Minifikovat výstup" sbalí zbylý prostor.

Podpora selektoru pokrývá typ, třídu, ID a selektory atributů, plus selektory potomka a dítěte — vzory, které používají skutečné e-mailové šablony stylů. Vlastní existující atribut style="" prvku vždy vyhraje před čímkoli sloučeným, což odpovídá tomu, jak prohlížeče používají kaskádu. S "Zobrazit upozornění na nepodporované vlastnosti" zapnutými jsou vlastnosti, které mnoho klientů ignoruje — float, position: fixed, transformace, box-shadow — označeny v komentáři na začátku výstupu, abyste je zachytili před odesláním testu.

Všechno běží lokálně ve vašem prohlížeči: HTML, které vložíte, se nikam neodesílá. Zkopírujte výsledek, stáhněte si jej jako soubor .txt nebo jej pošlete přímo do jiného nástroje, aby se mohl dále čistit.

Časté dotazy

Proč vůbec potřebuji vkládat CSS v emailu?
Mnoho e-mailových klientů — zejména webové rozhraní Gmailu — odstraní blok <style> z <head> nebo jej úplně ignoruje, ale respektuje atribut style="" na samotném prvku. Vkládání je řešení, na které se celý průmysl HTML-emailu spolehá.
Co se stane s dotazy na média a pravidly :hover?
Nemohou být vloženy na jeden prvek, takže jsou ve výchozím nastavení ponechány v oříznutém bloku <style> pro klienty, které jej čtou — vypněte "Ponechat pravidla, která se nedají vložit" a místo toho je upusťte.
Zvládá správně specificitu selektoru?
Ano. Selektor ID porazí selektor třídy, který porazí selektor typu, bez ohledu na to, v jakém pořadí se pravidla zobrazují — to jsou stejná pravidla, která prohlížeč používá. Vypněte "Respektovat specificitu selektoru" na slučování pouze podle pořadí zdroje.
Na co jsou atributy width/bgcolor?
Některé starší verze Outlooku vykreslují tabulky pomocí enginu Word a ignorují vložené CSS pro pozadí a dimenzování. "Přidat atributy width/bgcolor pro starší verze" zrcadlí tyto hodnoty na prosté atributy HTML, které tyto klienty respektují.
Je můj HTML někde nahrán?
Ne. Vkládání CSS probíhá zcela ve vašem prohlížeči — vaše e-mailová šablona nikdy neopustí vaše zařízení.