Formattatore e minificatore CSS

Come formattare o minificare il CSS

1. Incolla il tuo foglio di stile, oppure clicca su Apri un file per caricare un file .css (fino a 10 MB).
2. Scegli l’Indentazione (2 spazi, 4 spazi o una tabulazione) e se vuoi una Riga vuota tra le regole.
3. Clicca su Formatta (beautify) per ottenere codice leggibile, oppure su Minifica per ottenere la versione più piccola.
4. Per la minificazione, lascia spuntato Unisci le regole durante la minificazione per il risultato migliore, e Mantieni i /*! commenti */ per conservare le intestazioni di licenza.
5. Copia o scarica il risultato. La riga di stato mostra la dimensione prima e dopo, in byte, e la percentuale risparmiata.

Se manca una parentesi graffa, lo strumento si ferma e ti dice su quale riga si trova la { non chiusa o la } di troppo, invece di produrre un output rotto.

Formattare: CSS leggibile e coerente

Formatta (beautify) usa js-beautify, il formattatore presente in molti editor di codice. Mette ogni dichiarazione sulla propria riga, indenta il contenuto di ogni regola e delle at-rule come @media e @supports, scrive ogni selettore di un gruppo su una riga separata e aggiunge uno spazio dopo i due punti di ogni dichiarazione. Le righe vuote esistenti vengono mantenute (al massimo una di seguito), così le sezioni logiche del tuo file restano visibili. Il formattatore non cambia mai i valori, l’ordine delle regole o il significato dei selettori: modifica soltanto gli spazi.

È utile per leggere il CSS minificato di un sito web, per rivedere un foglio di stile generato da uno strumento o per ripulire un file modificato da più persone con abitudini diverse.

Minificare: CSS più leggero con csso

Minifica usa csso (CSS Optimizer), un minificatore strutturale. Oltre a togliere spazi e commenti, riscrive il foglio di stile in una forma equivalente e più corta:

• i colori vengono accorciati (#ff0000 diventa red, #ffffff diventa #fff);
• unità e zeri vengono semplificati (0px diventa 0, 0.5em diventa .5em);
• le dichiarazioni duplicate vengono rimosse e le proprietà shorthand vengono unite quando è sicuro farlo;
• con Unisci le regole durante la minificazione, le regole con dichiarazioni identiche vengono raggruppate (a{color:red} b{color:red} diventa a,b{color:red}) e le dichiarazioni sovrascritte vengono eliminate.

La ristrutturazione è sicura per i fogli di stile normali, ma sposta le dichiarazioni. Se il tuo CSS dipende da un ordine della cascata molto preciso, per esempio per gli hack dei browser, togli la spunta all’opzione: csso comprimerà allora ogni regola al suo posto.

I commenti vengono rimossi, tranne quelli “importanti” che iniziano con /*!, usati di solito per le licenze. Togli la spunta da Mantieni i /*! commenti */ per rimuovere anche quelli.

Dimensione prima e dopo

La riga di stato confronta la dimensione dell’input e del risultato in byte UTF-8. Il codice formattato di solito è più grande dell’originale; quello minificato fa risparmiare in genere dal 20 al 50 % sul CSS scritto a mano. Ricorda che i server comprimono anche i file con gzip o Brotli, quindi il risparmio sul trasferimento è minore del valore grezzo, ma la minificazione riduce comunque il tempo di parsing e la dimensione dei file in cache.