CSS inliner
A cosa serve davvero un CSS inliner
L’email non è una scheda del browser. Gmail, Outlook, Apple Mail e la maggior parte delle anteprime ESP applicano regole proprie su quali CSS vengono rispettati. Un `<link rel="stylesheet">` verso il tuo file di brand spesso viene ignorato. Un blocco `<style>` nell’`<head>` sopravvive in alcuni client e sparisce in altri. Il formato più affidabile resta HTML semplice con la presentazione negli attributi `style` sui tag che servono. Un CSS inliner ti lascia struttura in HTML e regole in CSS come sul web, poi in un passaggio copia le dichiarazioni corrispondenti su ogni elemento. Il file che incolli in Mailchimp, Brevo o nella pipeline transazionale è sempre HTML, ma non dipende più dal caricamento di un foglio di stile separato. Questa pagina è pensata per quel passaggio: markup e CSS in tab separati (o import .html + .css), pulsante « Inlina il CSS », risultato a destra. Quando va bene, copia, scarica o apri « Anteprima HTML » sul playground in home per controllare il layout prima di un invio di prova.
Foglio esterno e CSS incorporato — non una sola fonte
Molti inliner online danno per scontato che il CSS sia già nell’HTML — di solito un `<style>` esportato dal tool di design. Appena il progetto è diviso come al solito — `template.html` più `styles.css` da build, handoff Figma o generatore statico — devi unire a mano o lanciare un CLI che usi due volte l’anno. Il nostro CSS inliner tratta entrambi i casi allo stesso livello: markup nel tab HTML, regole nel tab CSS, oppure import di due file (`.html` e `.css`). Il CSS del tab si applica insieme ai blocchi `<style>` già presenti. L’output è HTML con attributi `style` inline; i tag `<style>` vengono rimossi — come si aspetta la maggior parte dei flussi email. Conta per newsletter e email transazionali: tipografia e pulsanti in un CSS condiviso, frammenti HTML da autori diversi. Senza leggere il CSS esterno ti blocchi appena il repo assomiglia a un progetto reale.
L’elaborazione avviene nel browser dopo il caricamento — niente account, niente upload. `:hover`, `::before` e selettori non risolvibili vengono saltati e elencati in « Note ». I blocchi `@media` semplici vengono appiattiti; il responsive in inbox resta diverso dal sito — testa sempre sui client di destinazione. Per controllare spaziature o classi: « Anteprima HTML » invia l’output inline al playground in home — utile prima dell’incolla nell’ESP.
Apri il CSS inlinerTab HTML + CSS
Struttura e presentazione separate come in un repo. Quando è pronto, inlina e ottieni il file da inviare.
Due file in un colpo
Importa .html e .css insieme — meno rischio di incolla troncato.
Anteprima in home
HTML inline in un nuovo tab del playground prima dell’incolla nell’ESP.
CSS inliner per email con fogli di stile esterni
La maggior parte degli strumenti riscrive solo il CSS già incorporato nell’HTML. Qui file .css separato e tag <style> nel markup — in un’unica passata — poi copia, download o anteprima.
Un .css esterno senza unire a mano prima
Se `email.css` sta accanto a `template.html`, importa o incolla nei due tab. I selettori finiscono negli attributi `style` — il formato che i client mail si aspettano. Non serve fondere il foglio nel documento prima di inlare. Anche i `<style>` nell’HTML passano nello stesso trattamento. A destra l’HTML inline completo in sola lettura. Copia dall’icona nell’intestazione output, scarica `inlined.html`, « Anteprima HTML » per il playground. Tutto resta locale.
- Tab CSS dedicato, layout da progetto reale
- CSS esterno + <style> in un passaggio
- Note sulle regole saltate
- Locale nel browser, senza upload
Inlinare il CSS di un template email HTML
Aggiungi HTML e CSS
Il modello nel tab HTML. Pulsanti, tipografia, utility nel tab CSS — oppure import .html + .css. Un `<style>` nel head può restare: verrà inlinato.
Clicca « Inlina il CSS »
Le regole corrispondenti diventano attributi style. Controlla « Note » per le esclusioni. A sinistra continui a modificare, a destra il risultato — rilancia se serve.
Verifica e invia
Copia, salva o anteprima sul playground in home. Incolla nell’ESP, prova su Gmail e Outlook, conserva il .html approvato.
FAQ CSS inliner
Prossimo invio: CSS già inline?
Incolla l’HTML, aggiungi CSS esterno o incorporato, inlina. Confronta con una casella di test, poi salva o copia.
CSS inliner
- .css esterno e HTML in un passaggio
- Blocchi <style> incorporati inclusi
- Anteprima HTML sul playground in home
- No signup; use the tool in the browser
Dopo l’inlining invia un test reale — i client mail sorprendono sempre l’anteprima.
Un HTML per l’ESP
Inlina una volta, incolla la campagna, archivia la versione approvata.