Elimina commenti e spazi superflui dal CSS

Gli sviluppatori web usano Minificatore CSS quando preparano codice compatto per la consegna o un confronto controllato.

Elimina commenti e spazi superflui dal CSS, poi ottieni codice compatto per il passaggio successivo. Usalo gratis nel browser, senza account.

Come si usa

Trascina il tuo foglio di stile nell'area di input, oppure importa il file che vuoi comprimere invece di incollarlo a mano.
Avvia il minificatore: i commenti scompaiono e gli spazi bianchi senza ruolo sintattico vengono rimossi.
Confronta la dimensione dell'output con il file originale per vedere quanto ha davvero risparmiato il passaggio.
Copia il codice compatto nel tuo progetto e ricarica la pagina per confermare che il layout non si sia spostato.
Conserva la versione leggibile in un posto sicuro, perché il file compresso è pensato per la distribuzione più che per la modifica.

Esempio

Il campione contiene due regole scritte su più righe, con margini, uno sfondo e padding distribuiti. Dopo il passaggio, confronta i due testi fianco a fianco e controlla che ogni selettore, proprietà e valore appaia ancora nella versione compatta.

Input

body {
    color: #17211d;
    margin: 0;
}

.card {
    padding: 12px;
    background: #ffffff;
}

Risultato

body{color:#17211d;margin:0} .card{padding:12px;background:#ffffff}

Limiti e formati

I commenti vengono rimossi, quindi qualsiasi nota lasciata al loro interno non tornerà nell'output.
Il codice compatto è difficile da leggere e scomodo da correggere, quindi conserva l'originale per modifiche future.
Le regole inutilizzate non vengono rilevate e i valori non vengono riscritti, quindi il risparmio deriva principalmente da spazi bianchi e commenti.
Prova il risultato nei browser che supporti, soprattutto se il foglio usa selettori insoliti o un commento che non è mai stato chiuso.

Dove avviene il trattamento

Il lavoro avviene nel tuo browser: il CSS che incolli resta lì, non viene inviato da nessuna parte e scompare quando la scheda viene chiusa. Ciò significa che puoi comprimere il foglio di stile di un cliente senza che lasci il tuo computer.

Domande frequenti

Un file minificato si caricherà più velocemente?

Pesa meno perché commenti e spazi superflui sono stati rimossi, e un file più piccolo si scarica prima. Quanto lo noti dipende dalla dimensione del foglio di stile e da tutto il resto che la pagina deve caricare.

Posso annullare la minificazione in seguito?

Non da questa pagina. I commenti e l'indentazione originale vanno persi nel passaggio, quindi il layout leggibile non può essere ricostruito. Lavora su una copia, oppure conserva il file formattato nel controllo di versione prima di sostituirlo.

Perché l'output contiene ancora spazi?

Gli spazi che separano due valori, due selettori o le parole all'interno di una proprietà fanno parte della sintassi. Vengono rimossi solo gli spazi bianchi senza ruolo grammaticale, ed è per questo che il risultato compresso viene ancora interpretato come CSS valido.