Minificatore CSS — Commenti di licenza e variabili CSS intatti

Introduzione

Il CSS che si scrive e il CSS che si consegna non devono per forza essere identici. Mentre lavori a un foglio di stile, i rientri, le righe bianche tra una regola e l'altra e i commenti che spiegano perché una regola esiste rendono il codice più leggibile e più facile da mantenere. Niente di tutto questo aiuta il browser a disegnare la pagina: al browser servono soltanto selettori, proprietà e valori validi, e non gli interessa la spaziatura né il fatto che una regola sia spiegata. La minificazione elimina tutto ciò che esiste solo per un lettore umano, così le stesse regole arrivano al browser in un file più leggero. Per un foglio di stile breve il risparmio può essere di pochi kilobyte; per uno cresciuto nel corso di un progetto più lungo, con diverse tornate di modifiche e commenti rimasti dalle prove, può essere un taglio consistente a ciò che deve scaricarsi prima che la pagina si presenti correttamente.

Come questo strumento minifica il tuo CSS

Incollare il CSS e premere «Minifica» fa più che cancellare spazi:

• I commenti vengono rimossi, con un'eccezione. Un commento scritto con la diffusa convenzione /*! ... */, oppure che contiene la parola @license o @preserve, viene mantenuto. È il modo standard per segnalare che un commento è una nota di licenza o di attribuzione e non deve essere eliminato dagli strumenti di build. Un normale commento esplicativo come /* button hover state */ viene invece rimosso: se devi conservare un'intestazione di licenza, scrivila in una di quelle due forme.
• Spazi, interruzioni di riga e regole vuote vengono rimossi. Tutto ciò che non serve a separare un elemento dall'altro viene eliminato, e un blocco di regola rimasto vuoto (un selettore come .old-banner {} senza niente dentro) viene cancellato del tutto invece di restare come peso morto.
• Alcuni valori vengono accorciati senza cambiarne il significato. Un colore scritto #ffffff diventa #fff, gli zeri superflui vengono tagliati (0.500 diventa .5, un valore come -0px diventa 0) e le parole chiave normal e bold usate per font-weight vengono convertite nei loro equivalenti numerici, 400 e 700.
• Le proprietà personalizzate CSS e le espressioni calc() sono protette. Le variabili definite con il prefisso -- (per esempio --brand-color) e le espressioni calc() si affidano a una punteggiatura e a una spaziatura che si romperebbero se venissero compresse come un valore qualsiasi: per questo vengono messe da parte prima dei passaggi sugli spazi e sugli zeri, e rimesse al loro posto intatte alla fine.

Cosa sapere prima di minificare

Questo strumento non riordina, non unisce e non deduplica le tue regole: il risultato ha gli stessi selettori nello stesso ordine, soltanto compattati. Se cerchi qualcosa che rimuova il CSS che la pagina non usa davvero, quello è un tipo di strumento diverso da un minificatore. Dato che qui la minificazione lavora togliendo spazi e accorciando valori anziché reinterpretare la struttura delle regole, il contenuto annidato come le regole dentro una query @media resta dov'è, compattato allo stesso modo di tutto il resto.

Non c'è un limite di dimensione a parte come negli strumenti di questo sito che lavorano su file caricati: qui incolli del testo invece di caricare un file, quindi il tetto pratico è quello che il tuo browser gestisce comodamente in un campo di testo, e copre qualunque foglio di stile su cui stia realisticamente lavorando a mano. Per un foglio di stile davvero enorme, come il pacchetto completo di un framework e non gli stili di una pagina o di un progetto, di solito è più adatto un passaggio di build integrato nel processo di pubblicazione che incollarlo in uno strumento nel browser.

Qui la minificazione non cambia ciò che il tuo CSS fa, ma vale comunque la pena dare un'occhiata a una pagina che usa il risultato minificato prima di pubblicarlo o consegnarlo: la stessa abitudine di rileggere qualunque altra cosa prima di mandarla.

Quando è lo strumento giusto

• Preparare per la pubblicazione un progetto scolastico o un sito personale. Un file CSS più leggero si carica più in fretta, e questo conta più di quanto sembri su una rete scolastica o su un telefono con dati mobili.
• Vedere com'è fatto davvero il codice in produzione. Guardare il sorgente di un sito reale mostra spesso un CSS che non somiglia per niente a quello che si scrive in classe: minificare il proprio foglio di stile e confrontarlo affiancato all'originale è un modo concreto di capire perché, e si abbina naturalmente a CSS Beautifier per il percorso inverso.
• Tagliare il peso della pagina prima di una consegna o su un hosting con banda limitata. Alcuni spazi web forniti dalla scuola hanno limiti stretti di spazio o di traffico; minificare gli asset prima di caricarli è un modo rapido per restare sotto quei limiti.

Se stai ancora lavorando attivamente a un foglio di stile, continua a usare la versione leggibile e minifica una volta sola, poco prima di pubblicare: minificare è un ultimo passaggio, non un formato di lavoro. Per il quadro completo di perché la dimensione dei file conta per la velocità delle pagine, vedi questa guida al compressore CSS per siti più veloci.

Esempio

Uno studente finisce un sito personale per un corso di web design: fogli di stile separati per l'impaginazione, per il tema di colore e per le regole adattive, ognuno con i commenti rimasti dalle prove fatte lungo il percorso. Prima di consegnare il progetto, li unisce e incolla il CSS in questo strumento. Dopo, la pagina si presenta e si comporta esattamente come prima, ma il file che l'accompagna è più leggero e non contiene più i commenti scritti per tentativi durante la costruzione.

Domande frequenti

Minificare cambierà l'aspetto della mia pagina?

No. Regole, selettori e valori vengono conservati — cambiano solo la formattazione, i commenti e un piccolo gruppo di valori accorciati (come i colori esadecimali e gli zeri superflui), nessuno dei quali incide su come la pagina viene disegnata.

Che fine fanno i commenti nel mio CSS?

I commenti normali vengono rimossi. Un commento scritto come /*! ... */, o che contiene @license o @preserve, viene mantenuto: è la convenzione standard per segnalare una nota di licenza o di attribuzione.

Gestisce le variabili CSS e calc()?

Sì. Le proprietà personalizzate e le espressioni calc() vengono protette durante la minificazione invece di essere compresse come valori qualsiasi.

C'è un limite di dimensione?

Nessun limite fisso come negli strumenti di questo sito che lavorano su file caricati: qui incolli del testo, non carichi un file. I testi incollati molto grandi (per esempio il pacchetto completo di una libreria) si gestiscono meglio con uno strumento di build integrato nel processo di pubblicazione.

Il mio codice viene salvato da qualche parte?

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

Posso minificare più di un foglio di stile alla volta?

Incolla e minifica un blocco di CSS per volta. Se ti serve minificarli insieme, unisci prima i file, oppure ripeti il procedimento per ciascuno.

Quali strumenti collegati posso usare?

Usa CSS Beautifier per invertire il procedimento e rendere di nuovo leggibile un CSS minificato, oppure HTML Minifier e JavaScript Beautifier per altri lavori sul codice.