Come funziona
Il minificatore elimina /* commenti */, comprime sequenze di spazi bianchi in un singolo spazio, rimuove gli spazi attorno alla punteggiatura strutturale come { } : ; , >, ed elimina il punto e virgola finale prima della parentesi graffa di chiusura. Non rinomina i selettori, non unisce le regole né riordina la cascata.
- Un minimizzatore conservativo: non rimuove le regole inutilizzate né riscrive i valori. Ritestare sempre il foglio di stile in seguito.
Perché è importante
Ogni kilobyte di CSS che blocca il rendering ritarda la prima verniciatura. La minimizzazione è la soluzione più economica disponibile dopo aver rimosso le regole inutilizzate e uno strumento che tocca solo personaggi chiaramente ridondanti può essere considerato attendibile in una fase di creazione senza ridefinire il foglio di stile.
Un esempio pratico
Una regola scritta come .card { color: red; imbottitura: 10px 20px; } diventa .card{color:red;padding:10px 20px}, risparmiando qualche dozzina di byte per regola e molto di più su un vero foglio di stile.
Errori comuni
- Rimozione degli spazi attorno a + e - all'interno di calc(), richiesto dalle specifiche.
- Minimizzare SCSS o LESS invece di CSS compilato.
- Saltare il controllo visivo dopo la minimizzazione.
Consigli pratici
Mantieni il codice sorgente non minimizzato nel controllo della versione e minimizzalo come output della build. Se utilizzi proprietà personalizzate con fallback, confronta gli stili calcolati in DevTools prima e dopo: la cascata viene preservata, ma un singolo spazio perso può modificare il modo in cui un valore viene analizzato.
Come usarlo
- Apri lo strumento. Tutto viene eseguito nella scheda del tuo browser.
- Incolla o digita il tuo input, quindi scegli l'azione che ti serve.
- Controlla il risultato e copialo con un clic.
Domande comuni
Rimuove le regole CSS inutilizzate?
No. Rimuove commenti e spazi bianchi ridondanti. Il rilevamento delle regole inutilizzate richiede un controllo dell'intera pagina.
Perché calc() ha smesso di funzionare dopo la minimizzazione?
Gli spazi attorno a + e - all'interno di calc() sono richiesti dalle specifiche CSS. Testare nuovamente il foglio di stile dopo averlo minimizzato.
Può minimizzare SCSS o MENO?
No. Si aspetta CSS semplici; i preprocessori hanno i propri passaggi di costruzione.
Questo strumento è davvero gratuito?
SÌ. Non esiste alcun account, nessun paywall e nessun limite di utilizzo. L'app Tools è finanziata da aumenso, lo studio dietro di essa.
Tutto ciò che inserisco è stato caricato?
No. Lo strumento viene eseguito nella scheda del browser; ciò che inserisci non ci viene mai inviato e mai archiviato.