Formattatore CSS
Formatta e abbellisci il CSS con evidenziazione della sintassi
CSS di input
CSS formattato
Esempi di formattazione CSS
Il CSS minificato è difficile da leggere; la formattazione aggiunge rientri e interruzioni di riga. Esempio:
Stili container e pulsante
Input minificato:
Output formattato:
Clicca su Esempio in alto per caricare CSS minificato nell'editor.
Cos'è un Formattatore CSS?
Il CSS (Cascading Style Sheets) stilizza ogni sito web. Il CSS minificato o mal formattato è difficile da leggere e debug. Un formattatore CSS aggiunge rientri e interruzioni di riga al CSS grezzo o minificato così da poter vedere chiaramente i selettori, le proprietà e l'annidamento. Le specifiche W3C CSS definiscono il linguaggio.
Questo strumento analizza il tuo CSS e lo riformatta con rientri coerenti. Funziona interamente nel tuo browser. Nulla viene inviato a un server, quindi è sicuro usarlo con i fogli di stile in produzione. Per minificare il CSS, usa il Minificatore CSS. Per la validazione, usa il Validatore CSS.
Come usare questo strumento
Incolla o carica
Copia il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Carica per caricare un file .css. Il pulsante Esempio carica dati di esempio. Il CSS non valido mostrerà un errore.
Controlla l'output
Il pannello di destra si aggiorna automaticamente. Il CSS valido viene formattato con il rientro corretto. Usa <strong>Minifica</strong> per rimuovere gli spazi e ottenere una versione compatta per la produzione.
Copia o scarica
Usa Copia per mettere il risultato negli appunti o Scarica per salvarlo come file. Per SCSS o Less, usa SCSS in CSS o Less in CSS per compilare prima.
Come funziona il Formattatore
Lo strumento analizza il tuo CSS e lo riformatta con rientri coerenti. I selettori, le proprietà e le regole vengono rilevati; le parentesi graffe e i punti e virgola vengono preservati. Le specifiche W3C CSS definiscono il linguaggio. La formattazione aggiunge interruzioni di riga e spazi per la leggibilità senza modificare il comportamento. Le at-rules come @media, @keyframes e @import vengono gestite. L'elaborazione avviene nel browser—nulla viene inviato a un server.
Gli strumenti di build come Vite, Webpack o Parcel spesso producono CSS minificato. Incollare quell'output qui lo rende leggibile. Per il sorgente SCSS o Less, compila prima con SCSS in CSS o Less in CSS, poi formatta.
Quando la formattazione CSS è utile
La maggior parte degli sviluppatori ha bisogno di un formattatore quando ispeziona gli stili da siti in produzione, esegue il debug di CSS di terze parti o revisiona l'output minificato dagli strumenti di build. Incollare CSS compresso qui rende immediatamente visibili selettori e regole. L'output compilato di Bootstrap o Tailwind è spesso minificato—la formattazione ne rivela la struttura.
La formattazione aiuta anche prima di condividere gli stili con i compagni di squadra o prima di revisionare le pull request. Per aggiungere prefissi vendor, usa il Prefissatore CSS. Per convertire in stili inline (es. per email), usa CSS a Inline. Per la validazione, usa il Validatore CSS.
Domande Frequenti
I miei dati sono privati?
Sì. La formattazione avviene interamente nel tuo browser. Nessun dato viene inviato a nessun server. Puoi confermarlo aprendo la scheda Rete del browser.
Supporta SCSS o Less?
Questo strumento formatta il CSS normale. Per SCSS o Less, compila prima usando SCSS in CSS o Less in CSS, poi formatta l'output.
Cosa fa Minifica?
Rimuove gli spazi bianchi, le interruzioni di riga e i commenti dall'output formattato, fornendo la versione più piccola per la produzione. C'è anche una pagina dedicata al Minificatore CSS.
Preserva i commenti?
La formattazione preserva i commenti. La minificazione potrebbe rimuoverli a seconda del minificatore. Controlla l'output prima di usarlo in produzione.
E le proprietà personalizzate CSS?
Le variabili CSS (--var-name) sono supportate. Il formattatore gestisce la sintassi CSS moderna incluse le proprietà personalizzate, @media e @keyframes.