Formater CSS
Formatuj e abbellisci il CSS con evidenziazione della sintassi
CSS di input
CSS formattato
Przyklady formattazione CSS
Il CSS minificato è difficile da leggere; la formattazione aggiunge rientri e interruzioni di riga. Przyklad:
Stili container e pulsante
Input minificato:
Output formattato:
Clicca su Przyklad in alto per caricare CSS minificato nell'editor.
Cos'è un Formater 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 narzedzie 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 Minifikator CSS. Per la validazione, usa il Walidator CSS.
Come usare questo narzedzie
Incolla o carica
Kopiuj il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Wczytaj per caricare un plik .css. Il pulsante Przyklad carica dane di esempio. Il CSS nieprawidlowy mostrerà un errore.
Controlla l'output
Il pannello di destra si aggiorna automaticamente. Il CSS valido viene formattato con il rientro corretto. Usa <strong>Minifikuj</strong> per rimuovere gli spazi e ottenere una versione compatta per la produzione.
Kopiuj o scarica
Usa Kopiuj per mettere il risultato negli appunti o Pobierz per salvarlo come plik. Per SCSS o Less, usa SCSS in CSS o Less in CSS per compilare prima.
Jak to dziala il Formater
Lo narzedzie 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 narzedzia 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 narzedzia 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 Walidator CSS.
Czesto zadawane pytania
I miei dane 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 narzedzie formatta il CSS normale. Per SCSS o Less, compila prima usando SCSS in CSS o Less in CSS, poi formatta l'output.
Cosa fa Minifikuj?
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 Minifikator 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.