Formatter CSS

Un formattatore CSS legge un foglio di stile e lo riscrive con spaziatura, rientro e interruzioni di riga coerenti in modo che sia facile da leggere e mantenere Analizza il CSS nella sua struttura sottostante di regole, selettori, dichiarazioni, regole at e commenti, quindi stampa quella struttura di nuovo utilizzando un layout prevedibile: una dichiarazione per riga, un singolo spazio dopo ogni due punti e ogni blocco nidificato rientrato di un livello più in profondità rispetto al genitore Le regole di stile rimangono identiche, ma un file arrivato come una lunga riga ininterrotta diventa qualcosa che puoi scansionare e modificare.

Lo stesso strumento funziona al contrario come un minifier CSS Minifying riduce ogni spazio, scheda, interruzione di riga e (facoltativamente) commenta che un browser non ha bisogno, comprimendo il foglio di stile al più piccolo equivalente byte per byte Un foglio di stile ben formattato da 6 KB spesso scende al di sotto di 4 KB una volta che lo spazio bianco è andato, il che significa meno byte sulla rete e una prima vernice più veloce Abbellisci mentre stai scrivendo e debuggando; minifica la copia che spedisci alla produzione.

Questo formattatore comprende le parti dei CSS che fanno scattare script ingenui di ricerca e sostituzione. Le regole at annidate come @media e @supports mantengono le regole interne rientrate correttamente, i blocchi @keyframes con passaggi percentuali vengono preservati, i valori letterali delle stringhe nel contenuto e nei valori url () vengono lasciati esattamente come scritti e i commenti vengono mantenuti o rimossi su richiesta. Tutto viene eseguito interamente nel tuo browser, quindi il tuo foglio di stile, inclusi eventuali token di progettazione proprietari o nomi di classi interne, non viene mai caricato e lo strumento continua a funzionare dopo che la pagina è stata caricata anche senza connessione.

Un piccolo test mostra cosa fa questo formattatore CSS online Incolla @media (max-width:600px){.nav a,.nav button{padding:8px 12px;color:#333}} e fai clic su Abbellisci con 2 spazi La query multimediale apre il proprio blocco, il pulsante.nav a e .nav vanno su righe separate di un livello e ogni dichiarazione si trova sulla propria riga con uno spazio dopo i due punti Il badge delle dimensioni recita 73 B → 98 B, +34%, perché l'indentazione aggiunge byte Fai clic su Minifica su quell'output e ritorna ai 73 byte originali.