CSS Formatter
Formatta, beautifica e minifica CSS. Stili expanded, compact e compressed.
Come utilizzare CSS Formatter
Incolla il codice CSS
Copia il tuo CSS non formattato o minificato nel pannello "Input CSS". Usa il pulsante con l'icona del file per caricare un foglio di stile di esempio.
Scegli modalità e stile
Seleziona "Formatta" per abbellire il CSS o "Minifica" per comprimerlo. In modalità Formatta puoi scegliere tra tre stili: Expanded (una proprietà per riga), Compact (una regola per riga) e Compressed (tutto su una riga).
Configura le opzioni aggiuntive
In modalità Formatta puoi attivare "Ordina proprietà" per riorganizzare le dichiarazioni per categoria (posizione, box model, tipografia, visual), "Rimuovi commenti" e "Rimuovi prefissi vendor".
Elabora il CSS
Clicca il pulsante "Formatta" o "Minifica". In modalità minificazione la barra delle statistiche mostra la percentuale di riduzione del file.
Copia il risultato
Usa il pulsante di copia nell'area di output per copiare il CSS elaborato negli appunti, pronto per essere incollato nel tuo progetto.
Suggerimenti
- Usa "Ordina proprietà" con lo stile Expanded prima di fare code review: il codice ordinato per categoria rende immediatamente visibili le proprietà mancanti o ridondanti.
- La minificazione abbrevia automaticamente i colori hex (#ffffff → #fff) e rimuove gli zeri iniziali (0.5 → .5), riducendo ulteriormente le dimensioni senza alterare il comportamento visivo.
- Per un workflow di produzione, usa prima "Formatta Expanded" per revisionare il codice, poi "Minifica" per l'output finale da deployare.
Domande frequenti
Come formatto un file CSS online in modo gratuito?
Incolla il tuo CSS nell'area di input, seleziona la modalità Formatta e lo stile desiderato (Expanded, Compact o Compressed), poi clicca il pulsante "Formatta". Il risultato appare immediatamente nell'area di output.
Qual è la differenza tra lo stile Expanded, Compact e Compressed?
Expanded mette ogni proprietà CSS su una riga separata con indentazione, ideale per lo sviluppo. Compact mette ogni regola su una singola riga. Compressed produce CSS tutto su una riga senza spazi, equivalente alla minificazione.
A cosa serve ordinare le proprietà CSS?
L'ordinamento raggruppa le proprietà per categoria funzionale (posizione, box model, tipografia, effetti visivi), rendendo il codice più leggibile e riducendo i conflitti in team che seguono una convenzione di stile condivisa.
Come posso rimuovere i prefissi vendor (-webkit-, -moz-) dal CSS?
In modalità Formatta, attiva l'opzione "Rimuovi prefissi vendor". Lo strumento eliminerà automaticamente -webkit-, -moz-, -ms- e -o- per produrre CSS standard pulito.
La minificazione CSS migliora le performance del sito?
Sì, rimuovendo commenti, spazi e ottimizzando valori come colori hex e unità zero, il file CSS risultante è più piccolo e viene scaricato più velocemente, migliorando i tempi di caricamento della pagina.