Minificatore CSS
Riduci i file CSS e vedi esattamente quanto hai risparmiato.
Funziona nel browser. Quello che scrivi non viene inviato da nessuna parte.
- Mostra i byte risparmiati
- Rimuove i commenti
- Niente viene caricato
Come minificare CSS
- Incolla il tuo CSS.
- Controlla la dimensione risparmiata nella riga delle statistiche.
- Copia o scarica il CSS minificato.
Cosa viene rimosso
- Commenti scritti come /* ... */
- Spazi bianchi e a capo tra regole e dichiarazioni
- Un punto e virgola finale subito prima di una graffa di chiusura
- Regole duplicate o ridondanti, dove csso può unirle in sicurezza
- Punti e virgola extra e blocchi di regole lasciati vuoti senza dichiarazioni al loro interno
Risparmi tipici di dimensione
| Punto di partenza | Riduzione approssimativa |
|---|---|
| CSS scritto a mano con commenti | dal 20 al 30 percento |
| CSS già compatto | dal 5 al 10 percento |
| CSS generato da un preprocessore | dal 10 al 20 percento |
Quando minificare, e quando no
- Minifica subito prima della distribuzione, non mentre stai ancora modificando, perché un foglio di stile leggibile è molto più veloce da correggere.
- Salta la minifica per un file già servito compresso con gzip e piccolo, dove la differenza di dimensione non vale il passaggio di build extra.
Quando la minifica fa la differenza maggiore
- Fogli di stile condivisi tra molte pagine, perché i byte risparmiati si moltiplicano per ogni caricamento di pagina.
- Grandi design system o librerie di componenti con molte regole ripetute e unibili.
- Siti senza una pipeline di build, dove il CSS scritto a mano viene servito direttamente senza altri passaggi di minifica.
- Un framework CSS ridotto alle sole classi utility effettivamente usate nella pagina.
Domande su Minificatore CSS
Di quanto si ridurrà il mio CSS?
In genere dal 10 al 30 percento, di più se l'originale ha molti commenti e spazi bianchi, meno se è già compatto.
La minifica cambia l'aspetto della mia pagina?
No. La minifica rimuove solo spazi bianchi, commenti e sintassi ridondante. Le regole che si applicano alla tua pagina restano le stesse.
Questo unisce le regole duplicate?
Sì, quando è sicuro farlo, il che può ridurre il file oltre alla sola rimozione degli spazi bianchi.
Dovrei conservare il file originale?
Sì. Conserva la versione leggibile per modificarla e usa quella minificata solo in produzione.
Quale minificatore usa questo strumento?
csso, lo stesso minificatore CSS usato da diversi plugin bundler. Unisce anche alcune regole duplicate e ridondanti oltre alla semplice rimozione degli spazi bianchi.
Il CSS minificato è ancora sicuro da incollare in un foglio di stile?
Sì, è CSS standard con gli spazi bianchi rimossi. Qualsiasi browser o strumento di build lo legge esattamente come l'originale.
Rimuove i prefissi dei produttori di cui ho ancora bisogno, come -webkit-?
No. Le proprietà e i valori con prefisso restano esattamente come scritti. La minifica rimuove solo spazi bianchi, commenti e regole unibili in sicurezza, mai una proprietà effettivamente dichiarata nel tuo CSS.
Cosa succede alle proprietà personalizzate CSS (variabili)?
Vengono mantenute così come sono, compresi i loro nomi -- e i valori, perché la minifica non rinomina né risolve le proprietà personalizzate.