Formatter CSS
Formattate fogli di stile minificati o disordinati con questo Formatter CSS. Incollate CSS: lo strumento lo analizza e poi stampa ogni regola con il selettore su una riga, una dichiarazione per riga indentata di due spazi, uno spazio dopo ogni due punti, combinatori distanziati e regole at annidate, come le media query. Gli errori di analisi vengono segnalati. Ideale per sviluppatori web e designer che leggono, eseguono il debug o revisionano fogli di stile provenienti da qualsiasi fonte.
Domande frequenti
Come funziona il Formatter CSS?
Analizza il foglio di stile in regole, dichiarazioni e regole at, quindi lo stampa di nuovo con un layout coerente. Poiché CSS viene analizzato, il risultato rispecchia la struttura reale del foglio di stile.
Che aspetto ha CSS formattato?
Ogni regola inizia con il selettore e una parentesi graffa aperta; ogni dichiarazione va su una riga propria, con un rientro di due spazi e uno spazio dopo i due punti, mentre la parentesi graffa di chiusura occupa una riga propria. Gli elenchi di selettori sono uniti da una virgola seguita da uno spazio, e i combinatori come > e ~ hanno uno spazio su entrambi i lati.
Sono supportate le media query e le altre at-rule?
Sì, le regole all'interno di @media, @supports e blocchi simili sono annidate e rientrate. Le istruzioni come @import restano su una sola riga, con i valori di url() racchiusi tra virgolette.
Cosa succede con un CSS non valido?
Se il parser non riesce a leggere il foglio di stile, ad esempio perché manca una parentesi graffa, lo strumento si ferma e mostra il messaggio del parser con il numero di riga. Correggete il punto indicato e formattate di nuovo.
I commenti vengono mantenuti?
Sì, i commenti vengono mantenuti sia tra le regole sia tra le dichiarazioni. Ogni commento è posizionato su una riga propria, con il rientro del codice circostante.
Sono supportate le proprietà personalizzate?
Sì, le proprietà personalizzate come --brand-color vengono formattate come qualsiasi altra dichiarazione. I riferimenti come var(--brand-color) restano invariati.
Posso formattare SCSS o Less qui?
No, questa pagina si aspetta CSS semplice, e le regole annidate o le variabili dei preprocessori potrebbero essere rifiutate. Per questi file, usate il Formatter SCSS o il Less Formatter.
Posso modificare il rientro o lo stile delle parentesi graffe?
No, il formatter non ha opzioni e usa sempre due spazi, con la parentesi graffa di apertura sulla riga del selettore. In questo modo, i risultati sono uniformi per tutti i fogli di stile.
Perché il risultato è racchiuso in un blocco di codice css?
L'output viene restituito come blocco di codice Markdown contrassegnato come css, così viene visualizzato con l'evidenziazione della sintassi in Markdown. Copiate le righe tra i delimitatori nel vostro file .css.
Qual è la dimensione massima del foglio di stile?
Fino a 5 MB per esecuzione; gli input più grandi vengono rifiutati con un messaggio. L'output è identico a quello dell'opzione CSS del Code Formatter.