Minificatore CSS

Come si usa

1. Incolla il tuo CSS, apri un file .css o parti dall'esempio.
2. Il CSS minificato compare mentre scrivi, con la dimensione prima e dopo.
3. Copialo o scaricalo come styles.min.css.

Cosa fa

Il Minificatore CSS usa CSSO, che fa più che togliere spazi e commenti:

• Accorcia i valori: #ff0000 diventa red, 0px diventa 0, e padding: 0 16px 0 16px diventa padding: 0 16px.
• Unisce regole con lo stesso selettore, e selettori con le stesse dichiarazioni.
• Rimuove le dichiarazioni che una successiva nella stessa regola sovrascrive.

Fa solo modifiche che mantengono il significato del foglio di stile, quindi le pagine restano uguali.

Ne vale la pena?

I fogli di stile impediscono alla pagina di comparire finché non sono caricati, quindi un CSS più piccolo significa un primo rendering più veloce. Minificare di solito fa risparmiare un ulteriore 5-15% oltre alla compressione gzip o Brotli applicata dal tuo hosting, di più se il foglio ha molti commenti. Se usi uno strumento di build come Vite, minifica già il CSS per la produzione; questa pagina è per i fogli di stile che scrivi e pubblichi a mano.

Domande frequenti

La minificazione può rompere il mio CSS?

Le modifiche di CSSO mantengono il significato del CSS valido. Gli hack che si basano su sintassi non valida per vecchi browser potrebbero non sopravvivere. Tieni la versione leggibile come sorgente e minifica una copia.

Rimuove il CSS inutilizzato?

No: non può sapere quali selettori usano le tue pagine. Strumenti come PurgeCSS lo fanno durante una build.

Come recupero la versione leggibile?

Tieni l'originale. Il Formattatore CSS reindenta il CSS minificato, ma i commenti sono persi per sempre.

Il mio CSS viene caricato da qualche parte?

No. Viene minificato nel tuo browser.