Metti in linea il CSS di un’email
Outlook e diversi client webmail ignorano o eliminano un blocco <style>. Mettere in linea è il passaggio noioso e meccanico tra una grafica che funziona in un browser e una che funziona in una casella di posta.
- Funziona interamente nel tuo browser
- Funziona offline
- Niente upload
- Niente registrazione
- Niente filigrana
Caricamento dello strumento…
Come funziona
- Incolla l’HTML con il suo blocco <style>.
- Premi «Inline the CSS» (metti in linea il CSS).
- Copia o scarica il risultato, e controllalo nell’anteprima qui sotto.
Perché non viene caricato nulla
Ogni operazione di questa pagina la esegue codice che gira dentro la scheda del tuo browser, con lo stesso motore che disegna le pagine web. Il file viene letto dal disco alla memoria della scheda, trasformato lì e riscritto come download. Non viene mai inviato da nessuna parte: né a noi, né a terzi.
Verificalo tu stesso
- Apri gli strumenti per sviluppatori del browser (F12) e scegli la scheda «Rete».
- Carica il tuo file e avvia lo strumento.
- Le uniche richieste che vedrai scaricano il codice dello strumento stesso — e, in pochi strumenti pesanti, il loro motore open source da una CDN pubblica — più un piccolo segnale di visita verso loreatec.jp (indirizzo e titolo della pagina, nulla di più). Nessuna di esse porta con sé il tuo file.
Domande frequenti
Perché le media query non si possono mettere in linea?
Perché uno stile in linea non ha nessuna condizione collegata — si applica sempre. Una media query è una condizione, quindi può vivere solo in un blocco <style>. Ecco perché un’email responsive ha bisogno di entrambi: stili in linea per la grafica di base, e un blocco <style> per l’impaginazione da telefono, accettando che i client che eliminano <style> mostreranno la grafica di base.
Che cosa succede a :hover?
Stesso problema, stessa risposta: resta nel blocco <style>. Tratta gli effetti hover come un bonus per i client che li supportano, mai come qualcosa da cui il messaggio dipende.
Chi vince, il mio stile in linea già presente o il foglio di stile?
Il tuo. Tutto quello che è già in un attributo style viene mantenuto e messo dopo le regole che arrivano dal foglio di stile, così continua a sovrascriverle — esattamente come in un browser.
È lo stesso che fa il mio strumento di newsletter?
Quasi tutti mettono in linea al momento dell’invio, sì. Questo serve per quando stai consegnando l’HTML a qualcun altro, lo mandi tramite un’API, o stai cercando di capire perché una regola non è sopravvissuta.