Sări la conținut

Convertor CSS pentru email

Convertește CSS dintr-un bloc de stil în atribute style inline pentru a funcționa în clienți de email.

Intrare
Ieșire

Convertor CSS pentru email

Majoritatea clienților de email elimină sau ignora CSS scris într-un bloc <style> — aplicația web Gmail este exemplul cel mai cunoscut. Soluția este să muți fiecare regulă pe elementul pe care o vizează ca atribut style="", și asta face exact acest instrument: lipești HTML cu un bloc <style> și obții aceeași marcare cu stilurile inlinate, gata de lipit într-o campanie sau șablon tranzacțional.

Fuziunea respectă specificitatea CSS implicit, deci o regulă ca #footer o bate pe o simplă a chiar dacă acea regulă vine mai târziu în foaia de stil — dezactivează "Respectă specificitatea selectorului" pentru a fuziona doar după ordinea sursă. Regulile care nu pot fi inlinate — media queries, :hover, alte at-rules — nu sunt niciodată eliminate în tăcere: "Păstrează regulile care nu pot fi inlinate" le lasă într-un bloc <style> tăiat, în timp ce "Elimina blocul <style> original" decide dacă acel bloc este emis. "Adaugă atributele width/bgcolor moștenite" reflectă width, height și background-color pe atributele simple pe care versiunile mai vechi ale Outlook le așteaptă, "Elimina clasele și ID-urile neutilizate" șterge selectorii care nimic nu referențiază, și "Minifică rezultatul" prăbușește spațiile albe rămase.

Sprijinul selectorilor acoperă selectori de tip, clasă, ID și atribut, plus combinatori de descendent și copil — modelele pe care le folosesc foile de stil reale de email. Atributul style="" existent al unui element întotdeauna învinge orice fuzionat, corespunzând modului în care browserele aplică cascada. Cu "Arată avertismente pentru proprietăți nesuportate" activat, proprietătile pe care mulți clienți le ignor — float, position: fixed, transformări, box-shadow — sunt marcate într-un comentariu în partea de sus a rezultatului, pentru a le prinde înainte de a trimite un test.

Tot funcționează local în browserul tău: HTML-ul pe care-l lipești nu este încărcat nicăieri. Copiază rezultatul, descarcă ca fișier .txt, sau trimite direct într-un alt instrument pentru a continua curățarea.

FAQ

De ce trebuie să inlin CSS pentru email?
Mulți clienți de email — în special interfața web Gmail — elimină blocurile <style> din <head> sau le ignoră complet, dar respectă un atribut style="" pe element însuși. Inlinarea este soluția pe care se bazează întreaga industrie de email HTML.
Ce se întâmplă cu media queries și regulile :hover?
Nu pot fi inlinate pe un singur element, deci implicit sunt păstrate într-un bloc <style> tăiat pentru clienții care o citesc — dezactivează "Păstrează regulile care nu pot fi inlinate" pentru a le elimina.
Tratează corect specificitatea selectorului?
Da. Un selector ID suprapune un selector de clasă, care suprapune un selector de tip, indiferent de ordinea în care apar regulile — aceleași reguli pe care le folosește un browser. Dezactivează "Respectă specificitatea selectorului" pentru a fuziona doar după ordinea sursă.
Pentru ce sunt atributele width/bgcolor?
Unele versiuni mai vechi ale Outlook redau tabele folosind motorul Word și ignor CSS inline pentru funduri și dimensionare. "Adaugă atributele width/bgcolor moștenite" reflectă acele valori pe atributele HTML simple pe care acei clienți le respectă.
HTML-ul meu este încărcat undeva?
Nu. Inlinarea CSS funcționează în întregime în browserul tău — șablonul tău de email nu o să părăsească niciodată dispozitivul tău.