Vai al contenuto

Inline CSS per email

Sposta CSS da un blocco style agli attributi style inline in modo che sopravviva nei client di posta.

Ingresso
Uscita

Inline CSS per email

La maggior parte dei client di posta elimina o ignora CSS scritto in un blocco <style> — Gmail è l'esempio più noto. La soluzione è spostare ogni regola sull'elemento che mira come attributo style="", e questo è esattamente quello che fa questo strumento: incolla HTML con un blocco <style> e ottieni lo stesso codice con gli stili incorporati, pronto da incollare in una campagna o modello transazionale.

La fusione rispetta la specificità CSS per impostazione predefinita, quindi una regola come #footer batte un semplice selettore a anche se quella regola compare più tardi nel foglio di stile — disattiva "Rispetta la specificità dei selettori" per fondere solo per ordine di apparizione. Le regole che non possono essere incorporate — media query, :hover, altre at-rules — non vengono mai eliminate silenziosamente: "Mantieni le regole che non possono essere incorporate" le lascia in un blocco <style> ridotto, mentre "Rimuovi il blocco <style> originale" decide se quel blocco viene emesso. "Aggiungi gli attributi width/bgcolor legacy" duplica width, height e background-color sui semplici attributi che le vecchie versioni di Outlook si aspettano, "Rimuovi le classi e gli ID non utilizzati" cancella i selettori che nulla referenzia, e "Minifica l'output" comprime lo spazio bianco rimanente.

Il supporto dei selettori copre selettori di tipo, classe, ID e attributo, più i combinatori discendente e figlio — i modelli che i fogli di stile email reali usano. L'attributo style="" esistente di un elemento vince sempre su qualsiasi cosa fusa, corrispondendo a come i browser applicano la cascata. Con "Mostra avvisi per proprietà non supportate" attivato, le proprietà che molti client ignorano — float, position: fixed, transforms, box-shadow — sono contrassegnate in un commento in cima al risultato, così le catturi prima di inviare una prova.

Tutto viene eseguito localmente nel tuo browser: l'HTML che incolli non viene mai caricato da nessuna parte. Copia il risultato, scaricalo come file .txt o invialo direttamente a un altro strumento per continuare a pulirlo.

FAQ

Perché ho bisogno di incorporare CSS per email in primo luogo?
Molti client di posta — l'interfaccia web di Gmail in particolare — rimuovono i blocchi <style> dal <head> o li ignorano completamente, ma rispettano un attributo style="" sull'elemento stesso. L'incorporamento è il workaround su cui si basa l'intera industria dell'HTML email.
Cosa succede alle media query e alle regole :hover?
Non possono essere incorporate su un singolo elemento, quindi per impostazione predefinita vengono mantenute in un blocco <style> ridotto per i client che lo leggono — disattiva "Mantieni le regole che non possono essere incorporate" per eliminarle invece.
Gestisce correttamente la specificità dei selettori?
Sì. Un selettore ID prevale su un selettore di classe, che prevale su un selettore di tipo, indipendentemente dall'ordine in cui le regole appaiono — le stesse regole che un browser usa. Disattiva "Rispetta la specificità dei selettori" per fondere solo per ordine di apparizione invece.
A cosa servono gli attributi width/bgcolor?
Alcune vecchie versioni di Outlook renderizzano le tabelle utilizzando il motore Word e ignorano il CSS inline per sfondi e dimensioni. "Aggiungi gli attributi width/bgcolor legacy" duplica questi valori sui semplici attributi HTML che questi client rispettano.
Il mio HTML viene caricato da qualche parte?
No. L'incorporamento CSS viene eseguito completamente nel tuo browser — il tuo modello di posta non lascia mai il tuo dispositivo.