Cosa succede quando minifichi un CSS?
Un foglio di stile leggibile è pieno di rientri, a capo, commenti e punti e virgola finali. Sono utili a chi lo scrive, ma il browser li ignora. La minificazione rimuove questi caratteri e accorcia ciò che si può scrivere in modo più breve, per esempio i colori #ffffff che diventano #fff o gli zeri superflui nelle unità.
Questo strumento usa CSSO, che oltre alla pulizia di base fa un’ottimizzazione strutturale, attiva per impostazione predefinita: unisce regole con lo stesso selettore, fonde dichiarazioni ripetute e rimuove quelle sovrascritte. Su CSS cresciuti nel tempo, con stili aggiunti da più persone, il risparmio può essere notevole. Se preferisci una minificazione più prudente, puoi disattivarla.
Un’altra opzione mantiene i commenti che iniziano con /*!, la convenzione usata per gli avvisi di licenza delle librerie: così minifichi senza togliere le note di copyright che sei tenuto a conservare. Il risultato mostra il peso prima e dopo e la percentuale risparmiata; in caso di sintassi non valida vedi il messaggio del parser.
Per i fogli di stile il guadagno conta perché il CSS blocca il rendering: finché il browser non lo ha scaricato e analizzato, la pagina non viene mostrata. Un CSS più leggero significa quindi una prima visualizzazione più rapida, soprattutto su connessioni mobili lente.
Il CSS viene elaborato nel tuo browser e non viene caricato da nessuna parte. La prova gratuita copre un file o un testo incollato, che puoi rielaborare con altre opzioni quante volte vuoi. ToolStudio Pro sblocca l’uso illimitato, più file insieme scaricati in uno ZIP e l’assenza di pubblicità.
Come minificare un file CSS
- Incolla il CSS nel riquadro di input oppure trascina o scegli un file .css.
- Decidi se tenere attiva l’ottimizzazione strutturale e se conservare i commenti di licenza /*!.
- Clicca sul pulsante per minificare.
- Confronta il peso prima e dopo e la percentuale risparmiata.
- Copia il CSS minificato o scaricalo.
Quando minificare il CSS
- Pubblicare un sito statico o un tema senza pipeline di build.
- Alleggerire il CSS personalizzato di un tema WordPress o di un CMS.
- Ripulire un foglio di stile cresciuto nel tempo con regole duplicate.
- Preparare CSS critico da inserire inline nell’head.
- Ridurre il CSS di un template di email o di un widget incorporato.
Cosa fa l’ottimizzazione strutturale
- Unisce blocchi con lo stesso selettore: due regole .btn diventano una.
- Unisce selettori con le stesse dichiarazioni: h1 {…} e h2 {…} identici diventano h1,h2 {…}.
- Rimuove dichiarazioni sovrascritte nella stessa regola, come un color ripetuto.
- Accorcia valori: colori, zeri, unità superflue.
- Rispetta l’ordine della cascata: le unioni che cambierebbero il risultato non vengono fatte.
Domande Frequenti
Il CSS minificato si comporta come l’originale?
Sì. CSSO applica solo trasformazioni sicure che non cambiano il risultato della cascata. Se vuoi il minimo intervento, disattiva l’ottimizzazione strutturale e verranno tolti solo spazi e commenti.
Posso conservare gli avvisi di licenza?
Sì. Attiva l’opzione per mantenere i commenti che iniziano con /*!.
Funziona con SCSS o Less?
No, il minificatore accetta CSS standard. Compila prima SCSS o Less in CSS. Per formattare file SCSS e Less puoi usare il formattatore CSS.
Il mio CSS viene caricato su un server?
No. La minificazione avviene interamente nel tuo browser.
È gratis?
La prova gratuita copre un file o un testo incollato, che puoi rielaborare con altre opzioni. Per nuovo codice serve ToolStudio Pro: uso illimitato di tutti gli strumenti, più file insieme in uno ZIP e niente pubblicità, disdicibile quando vuoi.