CSS Beautifier Gratuito
Questo CSS beautifier gratuito trasforma fogli di stile minificati o disordinati in codice leggibile con una dichiarazione per riga, uno spazio dopo ogni due punti e regole indentate. I blocchi annidati come le media query sono indentati di un livello in più. I commenti, le stringhe e i valori url() vengono mantenuti esattamente come scritti. È ideale per gli sviluppatori che hanno bisogno di leggere o modificare un foglio di stile ricevuto minificato.
CSS Beautifier
Generators and Converters
Informazioni su questo strumento
Il CSS minificato è scritto per i browser, non per le persone: ogni regola si trova su una sola riga e trovare un singolo colore o margine significa scansionare migliaia di caratteri. La formattazione ripristina il layout che rende un foglio di stile facile da rivedere.
Lo strumento legge il foglio di stile un carattere alla volta, quindi i punti e virgola all'interno dei dati degli indirizzi url() e le parentesi graffe all'interno delle stringhe non lo confondono. Ogni selettore inizia un nuovo blocco, ogni dichiarazione ottiene la propria riga con un singolo spazio dopo i due punti, e le regole all'interno dei blocchi media o supports sono indentate di un livello più profondo. I commenti rimangono dove erano. Puoi scegliere due spazi, quattro spazi o tabulazioni.
La formattazione non cambia ciò che fa il CSS e non corregge gli errori: una parentesi graffa mancante appare come un'indentazione che non ritorna mai. Abbinalo al CSS minifier quando vuoi comprimere di nuovo il file prima di pubblicare. Nulla di ciò che incolla viene archiviato.
Domande frequenti
La formattazione cambia il funzionamento del mio CSS?
No. Solo lo spazio bianco tra le regole e le dichiarazioni cambia, quindi il browser legge esattamente le stesse istruzioni. Le stringhe, i commenti e i valori url() vengono copiati invariati, il che protegge anche le immagini dati inline.
Può formattare SCSS o LESS?
Il CSS semplice è l'obiettivo. I blocchi SCSS e LESS annidati semplici di solito si indentano correttamente perché le parentesi graffe vengono gestite allo stesso modo, ma funzionalità come i mixin con sintassi insolita non vengono comprese, quindi controlla il risultato prima di affidarti ad esso.
Perché una parentesi graffa di chiusura non ritorna a sinistra?
Il formattatore segue esattamente le tue parentesi graffe. Se a una regola manca una parentesi graffa di chiusura, l'indentazione rimane profonda fino alla fine del file. È un modo veloce per trovare la regola rotta, ma devi aggiungere la parentesi graffa mancante da solo.
Come lo rendo di nuovo piccolo?
Mantieni la versione formattata mentre lavori, quindi eseguila attraverso il CSS minifier prima di pubblicare. Il minifier rimuove di nuovo i commenti e lo spazio bianco, quindi ottieni una fonte leggibile per la modifica e un file compatto per i visitatori.