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
How do I format a free online CSS file?
Attach your CSS to the input area, select Format Mode and desired style (Expanded, Compact or Compressed), then click the "Format" button. The result appears immediately in the output area.
What is the difference between the styles Expanded, Compact and Compressed?
Expanded puts each CSS property on a separate line with indentation, ideal for development. Compact puts each rule on a single line. Compressed produces CSS all on one line without spaces, equivalent to minification.
What's the point of ordering CSS properties?
Organization groups properties by functional category (position, box model, typography, visual effects), making code more readable and reducing conflicts among teams that follow a shared style convention.
How can I remove vendor prefixes (-webkit-, -moz-) from CSS?
In formatted mode, enable the "Remove vendor prefixes" option. The tool will automatically remove -webkit-, -moz-, -ms-, and -o- for clean standard CSS.
Does miniaturizing CSS improve website performance?
Yes, by removing comments, whitespace, and optimizing values like hex colors and zero units, the resulting CSS file is smaller and loads faster, improving page load times.