IT

Minificare CSS: comprimere, formattare e inserire il CSS nell’HTML

Con questo strumento per minificare CSS riduci un foglio di stile, lo formatti per leggerlo o lo inserisci negli attributi style per le newsletter. Commenti, spazi e zeri inutili spariscono senza cambiare l’effetto. Gli errori di sintassi indicano la riga e il tuo codice resta nel browser.

Fonte: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Aggiornato al: .

I miei strumentiI dati inseriti vengono salvati solo in questo browser.

Il codice viene elaborato solo nel browser. In modalità inline incolla un documento HTML completo o un frammento con <style>.

Il tuo testo resta nel browser: non viene inviato, non viene salvato e non compare nell’indirizzo della pagina.

Trattato come un ulteriore blocco style alla fine, ad esempio da un file CSS separato.

Risultato

Risultato
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Dimensione
214 → 144 caratteri (33% in meno).
Rimossi: 1 commenti, 0 regole vuote. I commenti che iniziano con /*! vengono conservati.

Come si calcola

Questo strumento offre tre cose per i fogli di stile: minificare per file piccoli, formattare per codice leggibile e inserire nell’HTML per le email HTML, dove alcuni programmi ignorano o tagliano i blocchi style.

Minificare il CSS

  1. Scegli «Minificare» e incolla il tuo CSS.
  2. Copia il risultato o scaricalo come style.min.css. Sotto vedi di quanto si è ridotto il file.

Vengono applicate solo trasformazioni che non cambiano l’effetto: spariscono i commenti (tranne /*! … */) e gli spazi, anche l’ultimo punto e virgola prima di }, 0.50em diventa .5em, #aabbcc diventa #abc e 0px diventa 0. Gli zeri con unità restano dove servono: in calc(), min(), max(), clamp(), nella forma abbreviata flex, per tempi, angoli e percentuali e nelle proprietà personalizzate. Le stringhe e url() restano invariate.

Formattare il CSS

Il CSS compresso diventa codice leggibile: una dichiarazione per riga, elenchi di selettori riga per riga, blocchi con rientro e una riga vuota tra le regole. I commenti vengono conservati.

Inserire il CSS nell’HTML

Incolla un documento HTML con un blocco style. Per ogni elemento si valutano le regole corrispondenti, ordinate per specificità e ordine, e le si scrive nell’attributo style. Un attributo style esistente vince sulle regole normali, e !important su tutto. Ciò che non si può scrivere in un elemento, come :hover, pseudo-elementi, @media e @font-face, resta in un blocco style.

Da sapere

Il tuo codice resta nel browser e non viene inviato né salvato.

Domande frequenti

Come posso minificare il CSS?

Scegli la modalità «Minificare» e incolla il CSS. Commenti, spazi e zeri inutili vengono rimossi e il risultato si può copiare o scaricare come file.

Minificare cambia l’aspetto della pagina?

No, applica solo trasformazioni sicure. Gli zeri con unità restano, per esempio, in calc() e nell’abbreviazione flex, perché lì servono. Le stringhe e url() non vengono toccati.

A cosa serve inserire il CSS nell’HTML?

Alcuni programmi di posta ignorano i blocchi style del tutto o in parte. Con l’inserimento ogni regola viene scritta nell’elemento come attributo style, così la formattazione arriva.

Cosa succede a :hover e @media durante l’inserimento?

Non si possono scrivere in un elemento e restano quindi in un blocco style nell’head. I programmi che li supportano continuano ad applicarli.

Come risolve lo strumento le regole in conflitto?

Secondo la cascata CSS: prima !important, poi la specificità più alta e, a parità, la regola successiva. Un attributo style esistente conta come un selettore di massima specificità.

Il mio codice viene caricato?

No. Tutto avviene nel browser; il codice non viene inviato, salvato né scritto nella barra degli indirizzi.

Fonti e riferimenti normativi

Aggiornato al: · Principi editoriali

Strumenti correlati