Utilore

Formattatore CSS

Incolla un foglio di stile — anche se è arrivato tutto su una riga sola — e torna a leggerlo. Ogni dichiarazione prende la sua riga, i blocchi annidati prendono la loro indentazione e i commenti restano dove devono stare.

Il codice non lascia mai questa pagina: la formattazione avviene nel tuo browser.

Come si usa

  1. Incolla il CSS nel primo riquadro.
  2. Scegli l'indentazione: due spazi, quattro o una tabulazione.
  3. Copia il risultato, oppure premi «Minifica» per comprimerlo di nuovo.

Da sapere

Perché un formattatore ingenuo rompe i fogli di stile

Dividere a ogni punto e virgola e a ogni parentesi graffa sembra funzionare finché il file non contiene content: "a;b" o un data URI con dentro un SVG. Entrambi sono ordinari nel CSS reale. Questo formattatore legge il file carattere per carattere, così le stringhe tra virgolette e i commenti vengono trasportati interi invece di essere tagliati al primo segno di punteggiatura.

Un'annidatura che serve davvero

Media query, blocchi supports e regole annidate moderne aggiungono un livello di profondità ciascuno, e l'indentazione li segue. Una riga vuota separa le regole di primo livello, così un foglio di stile da duemila righe si legge come un elenco di blocchi e non come un muro di testo.

Domande frequenti

I miei commenti vengono conservati?

Sì. Un commento isolato va su una riga propria; un commento dopo una dichiarazione resta con essa.

Il mio CSS viene modificato?

Nessuna proprietà viene rinominata, riordinata o eliminata. Si sposta solo lo spazio bianco: il foglio di stile si comporta esattamente come prima.

Il mio codice viene inviato a un server?

No. Tutto gira nel tuo browser, quindi il foglio di stile di un progetto sotto NDA resta sulla tua macchina.

E con SCSS o LESS?

Regole annidate e commenti si formattano bene. Variabili, mixin e direttive di controllo passano invariati invece di essere interpretati.

Strumenti correlati