Preskočiť na obsah

CSS vkladač pre email

Presuňte CSS z bloku style do vložených atribútov style, aby prežilo v e-mailových klientoch.

Vstup
Výstup

CSS vkladač pre email

Väčšina e-mailových klientov zavrhne alebo ignoruje CSS napísané v bloku <style> — najznámejším príkladom je webová aplikácia Gmailu. Riešením je presunúť každé pravidlo na prvok, ktorý sa má zvnútry zmeniť, ako atribút style="", a práve to robí tento nástroj: vložte HTML s blokom <style> a získajte späť rovnakú značku s vloženými štýlmi, pripravenú na vloženie do kampane alebo transakčnej šablóny.

Zlúčenie rešpektuje špecifickosť CSS podľa predvolby, takže pravidlo ako #footer porazí jednoduchý a dokonca aj keď sa toto pravidlo objaví neskôr v šablóne štýlu — vypnite "Rešpektovať špecifickosť selektora" a zlúčite iba podľa poradia zdroja. Pravidlá, ktoré sa nedajú vložiť — media queries, :hover, ďalšie at-rules — sa nikdy bez tichého upozornenia neodstránia: "Ponechať pravidlá, ktoré sa nedajú vložiť" ich nechá v orezanom bloku <style>, zatiaľ čo "Odstrániť pôvodný blok <style>" rozhoduje, či sa tento blok vôbec emituje. "Pridať atribúty width/bgcolor pre staršie verzie" zrkadlí šírku, výšku a farbu pozadia na jednoduché atribúty, ktoré očakávajú staršie zostavy Outlooku, "Odstrániť nepoužívané triedy a ID" vyčisti selektory, na ktoré sa nič neodkazuje, a "Minifikovať výstup" zbalí zvyšný priestor.

Podpora selektora pokrýva typ, triedu, ID a atribútové selektory, plus potomka a kombinátory detí — vzory, ktoré používajú skutočné e-mailové šablóny štýlu. Vlastný existujúci atribút style="" prvku vždy vyhráva voči všetkému zlúčenému, čo zodpovedá spôsobu, ako prehliadače používajú kaskádu. Keď je "Zobraziť upozornenia na nepodporované vlastnosti" zapnuté, vlastnosti, ktoré mnohí klienti ignorujú — float, position: fixed, transformácie, box-shadow — sú označené v komentári na začiatku výstupu, aby ste ich zachytili pred odoslaním testu.

Všetko beží lokálne vo vašom prehliadači: HTML, ktorý vložíte, sa nikdy nikam nenahrá. Skopírujte výsledok, stiahnite si ho ako súbor .txt alebo ho pošlite priamo do iného nástroja, aby ste ho mohli naďalej vyčisťovať.

Časté otázky

Prečo vôbec potrebujem vložiť CSS do emailu?
Mnohé e-mailové klienty — najmä webové rozhranie Gmailu — odstránia blok <style> z <head> alebo ho úplne ignorujú, ale rešpektujú atribút style="" na samotnom prvku. Vloženie je obchádzka, na ktorú sa spolieha celý priemysel HTML-emailu.
Čo sa stane s media queries a pravidlami :hover?
Nemôžu byť vložené na jeden prvok, takže podľa predvolby sú ponechané v orezanom bloku <style> pre klientov, ktorí ho čítajú — vypnite "Ponechať pravidlá, ktoré sa nedajú vložiť" a namiesto toho ich upustite.
Správne zvláda špecifickosť selektora?
Áno. Selektor ID prekonáva selektor triedy, ktorá prekonáva selektor typu, bez ohľadu na to, v akom poradí sa pravidlá objavujú — to sú rovnaké pravidlá, ktoré prehliadač používa. Vypnite "Rešpektovať špecifickosť selektora" na zmiešavanie iba podľa poradia zdroja.
Na čo sú atribúty width/bgcolor?
Niektoré staršie verzie Outlooku vykresľujú tabuľky pomocou enginu Wordu a ignorujú vložené CSS pre pozadia a veľkosti. "Pridať atribúty width/bgcolor pre staršie verzie" zrkadlí tieto hodnoty na jednoduché HTML atribúty, ktoré títo klienti rešpektujú.
Môj HTML je niekde nahraný?
Nie. Vloženie CSS prebieha úplne vo vašom prehliadači — vaša e-mailová šablóna nikdy neopúšťa vašu zariadenie.