Formattare CSS online
Trascina un foglio di stile compatto per poterlo rileggere comodamente. I selettori tornano su righe separate, con una dichiarazione per riga e blocchi e media query indentati come li scriveresti a mano.
Perché il CSS di produzione occupa una sola riga
I fogli di stile vengono minificati per lo stesso motivo degli script: il CSS blocca il rendering e ridurne le dimensioni può migliorare il caricamento. cssnano, Lightning CSS e gli strumenti dei processi Sass e PostCSS rimuovono spazi e commenti, abbreviano i valori dei colori, uniscono regole duplicate ed eliminano l'ultimo punto e virgola di ogni blocco. I framework di classi di utilità rendono il risultato ancora più denso: un foglio Tailwind compilato può contenere migliaia di piccole regole quasi senza separazione.
Rileggere la cascata
Il motivo principale per formattare un foglio di stile è capire perché una regola si applica o viene ignorata. Quando ogni selettore occupa una riga con le dichiarazioni indentate sotto, puoi seguire la cascata: ritrovare tutte le regole rivolte a un elemento, confrontarne la specificità, vedere quale arriva per ultima e individuare la dichiarazione !important che sovrascrive il tuo lavoro. Le media query e il loro contenuto tornano a essere blocchi visibili, rendendo il comportamento alle diverse dimensioni dello schermo molto più facile da seguire rispetto a un file compatto.
Supporto per il CSS moderno
Il formattatore comprende il CSS attuale, non soltanto un vecchio sottoinsieme. Proprietà personalizzate, espressioni calc e clamp, abbreviazioni grid e flexbox, container query, regole annidate, livelli di cascata, blocchi supports e keyframes vengono formattati. Le lunghe liste di selettori sono distribuite su più righe per facilitarne la lettura e i commenti sopravvissuti alla compilazione vengono conservati. Se il file mescola CSS standard e proprietà con prefissi, entrambi vengono mantenuti e presentati in modo più chiaro.
Un consiglio pratico per i framework compilati
Quando formatti un foglio Tailwind o Bootstrap compilato, il risultato diventa presto molto lungo: decine di migliaia di righe sono normali. Attiva i numeri di riga e usa la ricerca del browser per trovare la classe o la proprietà che ti interessa, invece di scorrere tutto il file. Se il tuo obiettivo è ridurne le dimensioni, ricorda che il lavoro va svolto nella configurazione della compilazione, perché le regole inutilizzate sono state generate prima della minificazione. La formattazione non elimina le regole superflue e non restituisce le variabili o i sorgenti di un preprocessore. Consente di esaminare il CSS distribuito. Per capire uno stile realmente applicato, affianca alla lettura gli strumenti di sviluppo del browser, che mostrano anche gli stili ereditati e le regole disattivate.
Domande frequenti
Posso formattare un foglio Tailwind compilato?
Sì, è uno degli usi più comuni di questa pagina. Aspettati un risultato molto lungo, perché il framework genera una regola per ogni classe di utilità. Attivare i numeri di riga e usare la ricerca del browser è un modo pratico per orientarsi.
I commenti vengono ripristinati?
Soltanto quelli ancora presenti. Molti minificatori eliminano tutti i commenti tranne le note legali e, una volta rimossi, non è possibile ricostruirli dal file. Il formattatore conserva ciò che rimane e lo presenta in modo ordinato. Per ritrovare le spiegazioni eliminate dalla compilazione, consulta i sorgenti del progetto, se disponibili.
Funziona con SCSS o Less?
Questa pagina è pensata per il CSS standard, quello che i browser scaricano realmente. I sorgenti dei preprocessori con variabili, mixin e sintassi proprie di SCSS o Less non sono l'input previsto, anche se il CSS annidato standard è supportato.