A cosa serve formattare il CSS?
Un CSS minificato su una sola riga è perfetto per il browser e impossibile da leggere per una persona. Lo stesso vale per fogli di stile scritti da più mani, con rientri misti, dichiarazioni sulla stessa riga e spazi casuali. Prima di modificare o rivedere quel codice, conviene dargli una forma coerente.
Lo strumento usa Prettier: mette ogni dichiarazione sulla sua riga, indenta i blocchi annidati (media query, @supports, regole annidate di SCSS e Less), separa i selettori multipli e normalizza spazi e punteggiatura. Il risultato è lo stesso che otterresti con Prettier nel tuo editor.
Oltre al CSS supporta SCSS e Less. Il parser viene scelto dall’estensione del file (.css, .scss, .less) oppure dal selettore CSS/SCSS/Less quando incolli il codice. Puoi impostare il rientro (2 spazi, 4 spazi o tab) e la larghezza di riga (80, 100 o 120). Vengono cambiati solo spazi e a capo, mai regole o valori. Se la sintassi non è valida, vedi il messaggio del parser.
Formattare prima di modificare ha anche un vantaggio pratico nel controllo di versione: se tutto il team usa lo stesso stile, le differenze tra un commit e l’altro mostrano solo le modifiche reali, e non centinaia di righe cambiate per un rientro diverso.
Tutto avviene nel tuo browser, senza caricare il codice su un server. La prova gratuita copre un file o un testo incollato, che puoi riformattare con altre opzioni. ToolStudio Pro offre uso illimitato, più file insieme scaricati in uno ZIP e nessuna pubblicità.
Come formattare un file CSS
- Incolla il codice oppure trascina o scegli un file .css, .scss o .less.
- Se hai incollato il codice, scegli il linguaggio: CSS, SCSS o Less.
- Imposta il rientro e la larghezza di riga.
- Clicca sul pulsante per formattare.
- Copia il risultato o scaricalo.
Quando formattare il CSS
- Leggere e modificare un CSS minificato di cui non hai il sorgente.
- Uniformare lo stile di un foglio scritto da più persone.
- Riordinare file SCSS o Less prima di una revisione del codice.
- Preparare esempi di CSS puliti per documentazione o tutorial.
- Ripulire il CSS copiato dagli strumenti per sviluppatori del browser.
CSS, SCSS e Less: perché scegliere il parser giusto
SCSS e Less aggiungono al CSS variabili ($colore, @colore), regole annidate, mixin e funzioni. Un parser CSS puro li considererebbe errori. Scegliendo il linguaggio corretto, Prettier riconosce questa sintassi e la formatta correttamente, mantenendo annidamenti e variabili.
Domande Frequenti
Supporta SCSS e Less?
Sì. Il parser si sceglie dall’estensione del file o dal selettore CSS/SCSS/Less.
La formattazione può cambiare lo stile della pagina?
No. Cambiano solo spazi, rientri e a capo; selettori, proprietà e valori restano gli stessi.
Posso rendere leggibile un CSS minificato?
Sì. Incollalo e ottieni una dichiarazione per riga, con blocchi indentati.
Il CSS viene caricato su un server?
No, tutto avviene nel tuo browser.
È gratis?
La prova gratuita copre un file o un testo incollato, riformattabile con altre opzioni. Per nuovo codice serve ToolStudio Pro: uso illimitato, più file insieme in uno ZIP e nessuna pubblicità. Puoi disdire quando vuoi.