Vai al contenuto
TextArray
100% locale

Formattatore CSS

Abbellisci CSS minimizzati o disordinati in regole pulite, rientrate e leggibili.

Ingresso
Uscita

Formattatore CSS

Incolla CSS minimizzato o aggrovigliato a mano e questo formattatore lo espande in un foglio di stile pulito e leggibile: una dichiarazione per riga, il selettore e la sua parentesi graffa di apertura su una riga, la parentesi graffa di chiusura da sola e una riga vuota tra le regole di livello superiore. I blocchi nidificati come @media, @supports e i selettori nidificati sono rientrati di un livello più profondo, quindi la struttura del foglio è evidente a colpo d'occhio.

Lo strumento legge il tuo CSS carattere per carattere invece di dividerlo con schemi ingenui, quindi non si interrompe mai in caso di contenuti complicati. Le stringhe mantengono il loro contenuto esatto, quindi il contenuto: "a{b}" sopravvive con le parentesi graffe al suo interno. I corpi url() vengono copiati alla lettera, quindi un URI di dati con i propri punti e virgola e due punti — url(data:image/png;base64,...) — viene lasciato completamente intatto. I commenti rimangono parola per parola sulla propria riga al rientro corrente.

Tre opzioni ottimizzano l'output. Il rientro alterna tra due spazi, quattro spazi o una tabulazione. Un selettore per riga inserisce ogni selettore di un elenco di virgole su una riga separata, utile per regole lunghe raggruppate e differenze più pulite. La linea vuota tra le regole può essere disattivata quando si desidera che il foglio sia più compatto. Il conteggio in tempo reale conta le regole, le dichiarazioni e le righe di output durante la digitazione, con il conteggio delle regole evidenziato.

Questa è la controparte di un minimizzatore CSS: usalo per rendere nuovamente modificabile un file di produzione compresso, per riformattare codice incoerente di diversi autori o semplicemente per leggere un foglio di stile che non hai scritto. Tutto funziona interamente nel tuo browser: il tuo CSS non viene mai caricato da nessuna parte.

FAQ

Cambia i miei valori CSS o i nomi delle proprietà?
No. Aggiunge e normalizza solo gli spazi bianchi e le interruzioni di riga. Selettori, proprietà, valori, colori, unità, corpi url() e commenti vengono tutti conservati esattamente come scritti.
Le parentesi graffe all'interno di stringhe o url() interromperanno la formattazione?
No. Uno scanner di caratteri tiene traccia dello stato di stringa, commento e url(), quindi il contenuto: "a{b}" e url(data:...;base64,...) vengono copiati parola per parola e mai trattati come struttura.
Cosa fa "Un selettore per riga"?
Mette ciascun selettore di un elenco separato da virgole sulla propria riga, quindi h1, h2, h3 diventano tre righe sopra la parentesi graffa di apertura. Le virgole all'interno di :is() o selettori di attributo non vengono mai divise.
Può correggere CSS non validi?
Formatta al meglio e non genera mai errori in caso di input non corretto, ma non convalida né ripara il tuo CSS. Le parentesi graffe mancanti o i caratteri sparsi vengono disposti così come lo consente la loro struttura.
Il mio CSS è caricato da qualche parte?
No. La formattazione viene eseguita interamente nel tuo browser e il tuo CSS non lascia mai il tuo dispositivo.