CSS Minifier — Minificatore CSS

Cosa fa il minificatore CSS

Questo strumento riduce i fogli di stile con CSSO (CSS Optimizer), un minificatore che comprende il CSS invece di trattarlo come semplice testo. Nel primo passaggio esegue pulizie sicure: rimuove spazi e commenti, abbrevia i colori (#ff0000 diventa red, #ffffff diventa #fff), elimina le unità dai valori zero, toglie virgolette e punti e virgola superflui e scrive i numeri nella forma più breve. Il risultato è un CSS perfettamente equivalente, ma sensibilmente più leggero.

Con restructure (ristrutturazione) attivo, CSSO va oltre e ottimizza la struttura del foglio di stile. Le regole con lo stesso selettore vengono unite, i selettori che condividono dichiarazioni identiche vengono raggruppati, le proprietà sovrascritte più avanti nella stessa regola vengono eliminate e le dichiarazioni estese, come i margini separati, possono essere compattate in una forma abbreviata. CSSO rispetta con attenzione la cascata: sposta o unisce le regole solo quando ciò non può cambiare quale dichiarazione prevale.

Come leggere i risultati

I badge mostrano la dimensione UTF-8 dell'input e dell'output e la percentuale risparmiata. Il CSS scritto a mano, con commenti e indentazione, si riduce spesso del 20–50%. L'output dei framework, già compatto, guadagnerà meno, mentre i fogli di stile che ripetono le stesse dichiarazioni su molti selettori traggono il massimo vantaggio dalla ristrutturazione. I server applicano di solito anche gzip o Brotli, quindi minificazione e compressione si completano a vicenda invece di farsi concorrenza.

Privato e sicuro da usare

Il minificatore funziona interamente nel browser: nulla viene caricato, registrato o memorizzato. È quindi comodo per il CSS critico inline, i template email, i widget incorporati o le correzioni rapide su un computer senza i soliti strumenti di build. Conserva i commenti /*! ... */ se il foglio di stile include licenze di terze parti che devono essere mantenute. Per i siti in produzione, aggiungi un minificatore alla tua build in modo che ogni deploy sia ottimizzato automaticamente, e verifica sempre visivamente il risultato quando il tuo CSS si basa su hack dei browser o su sintassi insolite.