Preskoči na sadržaj

CSS ugradjivač za e-mail

Prebaciti CSS iz style bloka u inline style atribute tako da preživi u e-mail klijentima.

Unos
Rezultat

CSS ugradjivač za e-mail

Većina e-mail klijenta uklanja ili ignora CSS napisan u <style> bloku — Gmailov web aplikacija je najpoznatiji primjer. Rješenje je prebaciti svako pravilo na element koji cilj kao style="" atribut, i upravo to radi ovaj alat: zalijepite HTML s <style> blokom i dobijete istu markup s ugradjenim stilovima, spremnu za lijepljenje u kampanju ili transakcijski šablon.

Spajanje poštuje specifičnost CSS selektora prema zadanoj postavci, tako da je pravilo poput #footer jače od obične a čak i ako se to pravilo pojavljuje kasnije u stilskom listu — isključite "Poštovati specifičnost selektora" da spajate samo po redoslijedu izvora. Pravila koja se ne mogu ugraditi — media upiti, :hover, ostali at-pravila — nikad se nisu tiho izbacena: "Zadržati pravila koja se ne mogu ugraditi" ih ostavlja u skraćenom <style> bloku, dok "Ukloniti originalni <style> blok" odlučuje je li taj blok emitiran uopće. "Dodati legacy width/bgcolor atribute" zrcali width, height i background-color na običnim atributima koje stariji Outlook gradovi očekuju, "Ukloniti nekorištene klase i ID-eve" čisti selektore koje ništa ne referira više, a "Minimizirati izlaz" sažima preostali razmak.

Podrška za selektore pokriva tip, klasu, ID i selektore atributa, plus silazne i podređene kombinatore — uzorke koje koriste pravi e-mail stilski listovi. Vlastiti postojeći style="" atribut elementa uvijek pobjeđuje sve što se spaja, što odgovara kako preglednici primjenjuju kaskadu. Kada je "Prikazati upozorenja o nepodupratanim svojstvima" uključeno, svojstva koja mnogi klijenti ignora — float, position: fixed, transformacije, box-shadow — označavaju se u komentaru na vrhu izlaza, tako da ih uhvatite prije slanja testa.

Sve se izvršava lokalno u vašem pregledniku: HTML koji zalijepite nikad se ne šalje nigdje. Kopirajte rezultat, preuzmite ga kao .txt datoteku ili ga pošaljite izravno u drugi alat da nastavite sa čišćenjem.

FAQ

Zašto trebam uopće ugraditi CSS za e-mail?
Mnogi e-mail klijenti — posebice Gmailov web sučelje — uklanjaju <style> blokove iz <head> ili ih potpuno ignoriraju, ali oni poštuju style="" atribut na samom elementu. Ugradjivanje je rješenje na kojem se cijela HTML-e-mail industrija oslanja.
Što se dešava s media upitima i :hover pravilima?
Ne mogu se ugraditi na jedan element, tako da se prema zadanoj postavci čuvaju u skraćenom <style> bloku za klijente koji ga čitaju — isključite "Zadržati pravila koja se ne mogu ugraditi" da ih umjesto toga odbacite.
Može li ispravno rukovati specifičnosti selektora?
Da. ID selektor nadjačava selektor klase, koji nadjačava selektor tipa, bez obzira na redoslijed na koji se pravila pojavljuju — ista pravila što koristi preglednik. Isključite "Poštovati specifičnost selektora" da umjesto toga spajate po redoslijedu izvora.
Za što su width/bgcolor atributi?
Neki stariji Outlook gradovi renderiraju tablice koristeći Word motor i ignora ugradjeni CSS za pozadine i dimenzioniranje. "Dodati legacy width/bgcolor atribute" zrcali te vrijednosti na običnim HTML atributima koje ti klijenti čitaju.
Je li moj HTML uploadiran negdje?
Ne. CSS ugradjivanje se izvršava potpuno u vašem pregledniku — vaš e-mail šablon nikad ne napušta vašu napravu.