Formattatore CSS
Abbellisce il CSS con una pulizia dell'indentazione, oppure minificalo per ridurre le dimensioni del file. Gestisce media query, calc() e i commenti di licenza.
Strumenti correlati
Come usare Formattatore CSS
- 01
Incolla il tuo CSS nella casella di input.
- 02
Scegli Abbellisci per formattarlo o Minifica per comprimerlo.
- 03
Scegli la dimensione del rientro, poi copia il risultato.
Cosa fa il formattatore CSS
Questo è un formattatore CSS che abbellisce i fogli di stile con un'indentazione pulita e coerente, o li comprime per ridurre le dimensioni del file. Scegli la dimensione dell'indentazione per l'abbellimento, e passi alla compressione quando vuoi l'output più piccolo.
Quando abbellire e quando comprimere
Un CSS leggibile è più facile da scorrere, revisionare e correggere: quando ogni regola e dichiarazione è indentata in modo coerente, puoi vedere selettori, annidamento e la forma delle tue media query a colpo d'occhio.
La compressione è per la produzione. Rimuove gli spazi bianchi e i commenti di cui i browser non hanno bisogno, così il file si scarica più velocemente. Su un foglio di stile grande il risparmio si accumula, soprattutto prima della compressione gzip sul server.
Compressione attenta con calc() e media query
Il compressore è attento dove conta. Mantiene gli spazi attorno a più e meno dentro calc(), così calc(100% - 30px) resta valido, e rimuove gli spazi solo attorno ai caratteri strutturali come parentesi graffe, due punti e punti e virgola. Gestisce correttamente anche le media query annidate.
I commenti di licenza vengono preservati
I commenti di licenza scritti nella forma /*! ... */ vengono preservati, che è la convenzione standard per mantenere gli avvisi di copyright e di licenza nell'output compresso anche quando i commenti ordinari vengono rimossi.
Funziona nel tuo browser
Sia l'abbellimento sia la compressione vengono eseguiti interamente nel tuo browser, quindi i tuoi fogli di stile non lasciano mai il tuo dispositivo. Lo strumento formatta per leggibilità e dimensioni; non convalida che il tuo CSS sia corretto.
Domande frequenti
La minimizzazione rompe le espressioni calc()?
No. Il minimizzatore mantiene gli spazi attorno a più e meno dentro i valori, così calc(100% - 30px) resta valido. Rimuove solo gli spazi attorno ai caratteri strutturali come parentesi graffe, due punti e punti e virgola.
I commenti vengono rimossi durante la minimizzazione?
I commenti normali vengono rimossi per risparmiare spazio, ma i commenti di licenza scritti come /*! ... */ vengono mantenuti, che è la convenzione standard per preservare gli avvisi di copyright.
Il mio CSS viene caricato da qualche parte?
No. Sia l'abbellimento sia la minimizzazione vengono eseguiti interamente nel tuo browser, quindi i tuoi fogli di stile non lasciano mai il tuo dispositivo.
Quando dovrei abbellire e quando minimizzare?
Abbellisci mentre leggi, modifichi o revisioni il CSS. Minimizza il foglio di stile finale per la produzione, dove un file più piccolo si carica più velocemente per i visitatori.
Verifica che il mio CSS sia valido?
No. Formatta e minimizza il testo per leggibilità e dimensione ma non valida proprietà o valori, quindi riformatterà il CSS anche se contiene un errore.