CSS Beautifier e formattatore online
Formatta, riduci e organizza istantaneamente fogli di stile CSS disordinati o compressi in tempo reale. Il nostro formattatore CSS della macchina a stati inserisce accuratamente query @media nidificate, @keyframes, variabili CSS (--var), URL https:// e inline URI dei dati SVG e include un CSS Minifier con un solo clic quando sei pronto per la spedizione in produzione.
Come abbellire e rimuovere CSS online
- Incolla il tuo CSS: Incolla il tuo
.min.csscompresso o il foglio di stile disordinato nell'editor CSS di input a sinistra o fai clic su Carica campione per testare l'annidamento@mediaquery, variabili e URL. - Scegli una preimpostazione o personalizza le impostazioni: Scegli 2 Spazi, 4 Spazi, Pulisci e ordina A–Z o Riduci (.min.css) dalla barra delle preimpostazioni rapide o regola rientro, posizionamento delle parentesi graffe, suddivisione del selettore e compressione del colore a destra.
- Ispeziona le statistiche in tempo reale: Guarda i contatori Input, Output, Rules e Lines aggiornati immediatamente mentre digiti o attivi le opzioni.
- Copia o scarica: Fai clic su Copia negli clipboard o Scarica .css per salvare il foglio di stile formattato come
styles.beautified.css(ostyles.min.cssin modalità Minimizza).
CSS Spiegazione delle opzioni di formattazione e ottimizzazione
| Opzione | Cosa fa | Prima | Dopo |
|---|---|---|---|
| Rimuovi e rientra | Espande le regole a riga singola e i blocchi nidificati @media / @keyframes con 2, 4 o 8 spazi o tabulazioni. |
@media(larghezza massima:768px){.box{larghezza:100%}} |
@media (larghezza massima: 768px) { |
| Un selettore per riga | Divide gli elenchi di selettori separati da virgole su singole righe ignorando le virgole all'interno di :is() o :not(). |
.btn, .card, .modal { ... } |
.btn, |
| Comprimi valori colore | Converte rgb() e i codici esadecimali a 6 cifre in codici esadecimali a 3 cifre all'interno di qualsiasi valore di dichiarazione preservando i token circostanti. |
bordo: 1px RGB fisso(255, 0, 0); |
bordo: 1px solido #f00; |
| Ordina proprietà (A–Z) | Ordina in ordine alfabetico le dichiarazioni all'interno di ciascun blocco per standardizzare le revisioni del codice e rivelare proprietà duplicate. | Indice z: 5; display: flessibile; allineare gli elementi: centro; |
allineamento elementi: centro; |
Perché utilizzare una macchina a stati CSS Beautifier?
Molti semplici formattatori CSS online dividono il codice su ogni due punti (:), punto e virgola (;) o parentesi graffa (}). Questo approccio si interrompe non appena il tuo foglio di stile include moderne funzionalità CSS come:
- Nested At-Rules e Native CSS Nesting:
@mediaquery,@supportsquery di funzionalità,@keyframesanimazioni,@layerblocchi e selettori figlio nidificati richiedono il tracciamento del rientro multilivello. - URL esterni e URI di dati SVG incorporati: Proprietà come
background: url("https://...")ourl("data:image/svg+xml;utf8,contengono due punti e punto e virgola che non devono mai essere divisi come proprietà CSS delimitatori.") - Stringhe di contenuto pseudo-elemento: Dichiarazioni come
content: "Articolo: 1; Stato: OK"mantengono intatti i caratteri interni esatti e gli spazi bianchi. - W3C-Accordamento colore accurato: I colori con nome vengono abbreviati solo quando l'equivalente esadecimale è strettamente più corto e identico nella specifica CSS (ad esempio,
white→#fffeblack→#000, lasciandogreencomegreenpoiché#008000è più lungo e#0f0è in realtàcalce).
Domande frequenti
Come faccio a rimuovere la minimizzazione di un file .min.css online?
Incolla il codice .min.css compresso nella casella Input CSS a sinistra. Lo strumento analizza automaticamente selettori, dichiarazioni, query @media e @keyframes in CSS multilinea con rientro pulito in tempo reale.
Questo CSS beautifier supporta query @media, @keyframes e data: URI?
SÌ. A differenza dei semplici formattatori basati su suddivisione, questo strumento utilizza un parser CSS della macchina a stati che preserva i blocchi nidificati (@media, @supports, @keyframes, @layer e nidificazione nativa CSS) come così come i due punti e il punto e virgola all'interno degli URI url("https://..."), data:image/svg+xml e le stringhe content tra virgolette.
È sicuro ordinare le proprietà CSS in ordine alfabetico?
L'ordinamento alfabetico semplifica la scansione delle regole di grandi dimensioni e aiuta a individuare le dichiarazioni duplicate. Tuttavia, se una regola si basa su una proprietà abbreviata seguita da una sostituzione più specifica (o viceversa, come background-color vs. background), la modifica dell'ordine di dichiarazione può alterare quale proprietà prevale. Abilita l'ordinamento quando le tue regole non dipendono dall'ordine di sostituzione abbreviata.
Posso anche minimizzare CSS con questo strumento?
SÌ. Fai clic sul pulsante Riduci CSS (o seleziona Riduci (riga singola .min.css) nel pannello delle impostazioni) per rimuovere commenti, spazi bianchi e punto e virgola finali e comprimere i valori dei colori in un foglio di stile di produzione compatto.
Il mio codice CSS è caricato su qualche server?
No. Tutta la formattazione e la minimizzazione di CSS vengono eseguite al 100% localmente nel tuo browser utilizzando JavaScript. I tuoi fogli di stile non lasciano mai il tuo computer.