Come si usa

Incolla il CSS nella casella di input, apri un file .css oppure prova l'esempio.
Scegli Beautify per un codice leggibile o Minify per il risultato più compatto.
Per la formattazione, scegli 2 spazi, 4 spazi o tabulazioni.
Copia il risultato o scaricalo come file .css. Se parentesi graffe o virgolette non sono bilanciate, l'errore mostra riga e colonna.

Come funziona

Il formattatore scompone prima il foglio di stile in token: stringhe tra apici singoli o doppi, valori url(…), commenti, parentesi graffe e punti e virgola. Poiché stringhe e url() sono token unici, un punto e virgola dentro un data URI o una parentesi graffa dentro content: «{ }» non confondono mai la struttura e il loro contenuto viene copiato esattamente.

Beautify mette ogni selettore di un elenco di selettori su una riga propria, aggiunge spazi attorno ai combinatori figlio, fratello e adiacente (>, ~, +) e scrive ogni dichiarazione come “proprietà: valore;” su una riga propria. I blocchi dentro @media, @supports, @layer, @container e la nidificazione nativa CSS sono rientrati di un livello per ogni profondità. Viene aggiunto un punto e virgola mancante dopo l'ultima dichiarazione di un blocco. I commenti restano dove sono.

Minify rimuove i commenti (tranne gli avvisi di licenza /*! … */), comprime gli spazi, elimina gli spazi attorno a graffe, due punti, punti e virgola, virgole e combinatori di selettore ed elimina il punto e virgola prima di ogni graffa di chiusura. Gli spazi che cambiano il significato vengono mantenuti: il combinatore discendente in “.a .b”, lo spazio in “a :focus” e gli spazi dentro valori come calc(100% - 2px). “! important” viene normalizzato in “!important”.

Lo strumento non riscrive i valori: colori, unità e zeri rimangono come scritti e le regole non vengono unite né riordinate. I file SCSS o Less con nidificazione semplice di solito funzionano, ma la loro sintassi specifica, come i commenti // o i mixin, non viene compresa.

Esempi

Leggere un file di framework minificato

Incolla un estratto di bootstrap.min.css su una riga e scegli Beautify con 2 spazi per vedere ogni regola, le media query e le relative regole nidificate su righe separate e rientrate.

Pubblicare un foglio di stile scritto a mano

Minifica un foglio di stile da 12 KB con commenti e indentazione prima di inserirlo inline in un modello email o nell'intestazione di una pagina. Il riepilogo mostra il numero di caratteri prima e dopo.

Trovare una parentesi graffa mancante

Un foglio di stile smette di applicarsi a metà. Il formattatore segnala «Questa { non viene mai chiusa con una } corrispondente» con la riga della regola a cui manca la parentesi graffa di chiusura.

Domande frequenti

Il CSS minimizzato con questo strumento è sicuro da usare in produzione?

Rimuove solo i commenti e gli spazi che il CSS ignora, quindi le regole si comportano allo stesso modo. Non esegue le ottimizzazioni più profonde degli strumenti di build, come unire le regole o abbreviare i colori, quindi il risultato può essere leggermente più grande del loro.

Perché viene mantenuto uno spazio in “a :focus”?

In un selettore, uno spazio è il combinatore discendente. “a :focus” indica un elemento con focus dentro un link, mentre “a:focus” indica un link con focus. Rimuovere quello spazio cambierebbe gli elementi corrispondenti.

Può formattare SCSS o Less?

Le regole nidificate semplici vengono formattate correttamente. La sintassi specifica dei preprocessori, come i commenti //, i mixin con argomenti o i blocchi @if, non viene riconosciuta e potrebbe essere formattata in modo strano, quindi controlla il risultato.

I commenti di licenza vengono rimossi durante la minimizzazione?

I commenti che iniziano con /*! vengono mantenuti, come da convenzione per le note di licenza e copyright. Tutti gli altri commenti vengono rimossi.

Privacy

Il tuo CSS viene elaborato solo nel tuo browser. Nulla viene caricato, archiviato o incluso nelle statistiche.