Minificatore CSS — Commenti di licenza e variabili CSS intatti

Introduzione

Il CSS scritto e il CSS distribuito non devono per forza avere lo stesso aspetto. Mentre si lavora su un foglio di stile, l'indentazione, le righe vuote tra le regole e i commenti che spiegano perché esiste una regola rendono il codice più facile da leggere e mantenere. Nulla di tutto ciò aiuta il browser a rendere la pagina: un browser ha bisogno solo di selettori, proprietà e valori validi, e non gli importa della spaziatura o del fatto che una regola sia spiegata. La minificazione elimina tutto ciò che esiste solo per il lettore umano, così le stesse regole arrivano al browser in un file più piccolo. Per un foglio di stile breve il risparmio può essere di pochi kilobyte; per uno cresciuto nel corso di un progetto più lungo, con diversi round di modifiche e commenti lasciati lì dai test, può significare un taglio significativo su ciò che deve essere scaricato prima che la pagina venga visualizzata correttamente.

Come questo strumento minifica il tuo CSS

Incollare il CSS e fare clic su Minifica fa più che eliminare gli spazi:

• I commenti vengono rimossi, con un'eccezione. Un commento scritto con la convenzione comune /*! ... */, oppure contenente la parola @license o @preserve, viene mantenuto. È il modo standard per contrassegnare un commento come avviso di licenza o attribuzione che non deve essere rimosso dagli strumenti di build. Un normale commento esplicativo come /* button hover state */ verrà rimosso – se devi mantenere un'intestazione di licenza, scrivila in una di queste forme.
• Spazi bianchi, interruzioni di riga e regole vuote vengono rimossi. Tutto ciò che non serve a separare un token dall'altro viene eliminato, e un blocco di regola vuoto rimasto (un selettore come .old-banner {} senza nulla al suo interno) viene eliminato del tutto invece di restare come peso morto.
• Alcuni valori vengono abbreviati senza cambiarne il significato. Un colore scritto come #ffffff diventa #fff, gli zeri ridondanti vengono eliminati (0.500 diventa .5, un valore come -0px diventa 0), e le parole chiave normal e bold usate per font-weight vengono convertite nei rispettivi equivalenti numerici, 400 e 700.
• Le proprietà personalizzate CSS e le espressioni calc() sono protette. Le variabili definite con un prefisso -- (ad esempio --brand-color) e le espressioni calc() dipendono da punteggiatura e spaziatura che si romperebbero se venissero compresse come un valore normale, quindi vengono messe da parte prima dei passaggi di rimozione degli spazi e abbreviazione degli zeri, e ripristinate intatte alla fine.

Cosa sapere prima di minificare

Questo strumento non riordina, unisce o elimina duplicati tra le tue regole – l'output ha gli stessi selettori nello stesso ordine, solo compattati. Se stai cercando qualcosa che rimuova il CSS che la tua pagina non usa realmente, si tratta di uno strumento diverso da un minificatore. Poiché qui la minificazione funziona eliminando gli spazi bianchi e abbreviando i valori anziché reinterpretare la struttura delle regole, contenuti annidati come le regole all'interno di una query @media restano al loro posto, con il contenuto compattato allo stesso modo di tutto il resto.

Non esiste un limite di dimensione separato come per gli strumenti di caricamento file di questo sito – stai incollando testo direttamente invece di caricare un file, quindi il limite pratico è ciò che il tuo browser gestisce comodamente in un campo di testo, il che copre qualsiasi foglio di stile su cui lavoreresti realisticamente a mano. Per un foglio di stile davvero grande, come un intero bundle di framework anziché gli stili propri di una pagina o di un progetto, un passaggio di build integrato nel processo di deployment è di solito più adatto che incollarlo in uno strumento del browser.

La minificazione qui non cambia ciò che fa il tuo CSS, ma vale comunque la pena dare una rapida occhiata a una pagina che usa l'output minificato prima di pubblicarla o consegnarla – la stessa abitudine della revisione di qualsiasi altra cosa prima di renderla pubblica.

Quando questo è lo strumento giusto

• Preparare un progetto scolastico o un sito personale per la pubblicazione. Un file CSS più piccolo si carica più velocemente, il che conta più di quanto sembri su una rete scolastica o su un telefono con dati mobili.
• Vedere come appare davvero il codice in produzione. Visualizzare il sorgente di un sito reale mostra spesso CSS che non assomiglia affatto a quello che gli studenti scrivono in classe – minificare il proprio foglio di stile e confrontarlo fianco a fianco con l'originale è un modo concreto per vedere perché, e si abbina bene a CSS Beautifier per la direzione inversa.
• Ridurre il peso della pagina prima di una scadenza o con un hosting a banda limitata. Alcuni hosting forniti dalla scuola hanno limiti stretti di spazio o di trasferimento; minificare gli asset prima del caricamento è un modo rapido per restare entro questi limiti.

Se stai ancora modificando attivamente un foglio di stile, continua a lavorare con la versione leggibile e minifica solo una volta, subito prima della pubblicazione – minificare è un ultimo passaggio, non un formato di lavoro. Per un quadro più completo del perché la dimensione del file conta per la velocità della pagina, consulta questa guida al compressore CSS per siti più veloci.

Esempio

Uno studente completa un sito personale per un corso di web design: fogli di stile separati per layout, tema colore e regole responsive, ciascuno con commenti rimasti dai test di idee diverse lungo il percorso. Prima di consegnare il progetto, unisce e incolla il CSS in questo strumento. La pagina ha lo stesso aspetto e lo stesso comportamento di prima, ma il file distribuito è più piccolo e non contiene più i commenti da tentativi ed errori scritti durante la creazione.

Domande frequenti

La minificazione cambia l'aspetto della mia pagina?

No. Regole, selettori e valori vengono preservati – cambiano solo la formattazione, i commenti e alcune abbreviazioni di valori (come i colori esadecimali e gli zeri ridondanti), nessuna delle quali influisce sulla resa.

Cosa succede ai commenti nel mio CSS?

I commenti normali vengono rimossi. Un commento scritto come /*! ... */, o contenente @license o @preserve, viene mantenuto – è la convenzione standard per contrassegnare un avviso di licenza o attribuzione.

Gestisce le variabili CSS e calc()?

Sì. Le proprietà personalizzate e le espressioni calc() sono protette durante la minificazione anziché essere compresse come i valori normali.

C'è un limite di dimensione?

Nessun limite fisso come per gli strumenti di caricamento file di questo sito – stai incollando testo, non caricando un file. Incolli molto grandi (ad esempio un intero bundle di libreria) sono gestiti meglio da uno strumento di build come parte del processo di deployment.

Il mio codice viene salvato da qualche parte?

No. Il CSS incollato viene elaborato per produrre il risultato minificato e non viene conservato come file né mantenuto in seguito; viene registrato solo il fatto che lo strumento è stato usato, non il codice stesso.

Posso minificare più fogli di stile contemporaneamente?

Incolla e minifica un blocco di CSS alla volta. Unisci prima più file se ti servono minificati insieme, oppure ripeti il processo per ciascuno.

Quali strumenti correlati posso usare?

Usa CSS Beautifier per invertire il processo e rendere di nuovo leggibile il CSS minificato, oppure HTML Minifier e JavaScript Beautifier per altre attività di codice.