100 % locale — i tuoi dati non lasciano mai il tuo browser

Formattatore CSS — leggi un foglio minificato

Reindenta CSS minificato o disordinato. Una dichiarazione per riga e i tuoi commenti intatti: un foglio che non hai scritto diventa leggibile.

Istantaneo Privato Zero cookie
Indentazione

Input CSS

Output CSS

Che cosa fa questo strumento

CSS minificato o aggrovigliato diventa CSS leggibile.

a{margin:0 auto;--x:1px}@media print{a{color:#000}}
a {
  margin: 0 auto;
  --x: 1px
}

@media print {
  a {
    color: #000
  }
}

Una dichiarazione per riga, un livello di indentazione per livello di annidamento, una riga vuota tra le regole di primo livello. L’indentazione è un’opzione: due spazi per impostazione predefinita, quattro se è la tua convenzione.

Che cosa lascia esattamente com’è

  • I tuoi valori. #FFFFFF non diventa white, 0px non diventa 0, e margin: 10px 10px 10px 10px non viene compattato. Quelle riscritture sono compito di un ottimizzatore, e ognuna è un giudizio sul tuo foglio di stile.
  • L’ordine. Dichiarazioni e regole escono nell’ordine in cui le hai scritte. In CSS l’ordine è il significato: a parità di specificità vince l’ultima regola.
  • I tuoi commenti. Tengono il loro posto, sopra la regola o a fine riga, perché è per questo che sono stati scritti.

Non è un validatore

a { color: red
a {
  color: red

La parentesi mancante torna mancante. Un formattatore legge quello che gli dai e lo impagina; non ti dice se un browser lo accetterebbe. Il taglio vale da entrambe le parti: un foglio con un errore di sintassi viene comunque riordinato, il che aiuta a trovarlo, e un risultato ordinato non prova nulla sulla validità. Per quello ci sono gli strumenti per sviluppatori del browser, o un linter come Stylelint.

L’altro verso

Il minificatore CSS di questo sito fa il viaggio inverso: toglie gli spazi che questo strumento aggiunge, tiene intatte le stringhe, il contenuto degli url() e i commenti di licenza, e lascia in pace i tuoi valori allo stesso modo. Formattare per leggere, minificare per pubblicare — lo stesso foglio, due forme.

Privato per progettazione

Tutto viene eseguito localmente nel browser con JavaScript. I tuoi dati non vengono mai caricati, quindi lo strumento è sicuro per contenuti sensibili e funziona anche offline.

Domande frequenti

Controlla che il mio CSS sia valido?
No: è un formattatore, non un validatore, e la differenza conta quando qualcosa non va. `a { color: red` torna reindentato, parentesi mancante compresa: lo strumento impagina ciò che legge, senza giudicarlo. Un risultato pulito non è un certificato che il foglio di stile si analizzi; questo te lo dicono gli strumenti per sviluppatori del browser o un linter.
I miei valori o i miei colori vengono cambiati?
Mai. `#FFFFFF` resta `#FFFFFF`, `margin: 0px` tiene la sua unità, e l’ordine delle tue dichiarazioni è quello che hai scritto. La formattazione tocca spazi e a capo — un ottimizzatore che riscrive i valori è un altro strumento, con altri rischi.
E i commenti?
Restano dov’erano. Un commento sopra una regola tiene il suo posto sopra quella regola, ed è proprio per questo che è stato scritto lì. Farli sparire è compito del minificatore, ed è una decisione a parte.

Convertitori correlati