Formattatore CSS
Indenta un foglio di stile perché tu possa leggerlo, interamente nel tuo browser. Niente viene rinominato, accorciato o normalizzato.
Gira interamente nel tuo browser. Non viene caricato, registrato o salvato niente.
Incolla un foglio di stile minificato o indentato male e leggilo come si deve. La formattazione avviene nel tuo browser, e del foglio non cambia niente oltre agli spazi.
Come funziona
Il foglio viene diviso in pezzi — commenti, stringhe, indirizzi, nomi, numeri, parentesi — e poi riscritto. Ogni regola riceve il proprio blocco, ogni selettore di un elenco la propria riga, e ogni dichiarazione la propria riga dentro la regola. Le regole annidate, le media query e i keyframe si annidano insieme.
Lo spazio viene conservato a meno che non si possa dimostrare che non significhi niente. È il contrario di quello che fanno quasi tutti i formattatori, ed è deliberato: in CSS uno spazio tra due selettori è il combinatore di discendenza, quindi «.a .b» e «.a.b» selezionano elementi diversi. Lo spazio viene tolto solo prima di una virgola, di un punto e virgola o di una chiusura, e dopo un'apertura, dove il CSS non può leggerlo come niente.
L'unico spazio che viene aggiunto è quello dopo i due punti di una dichiarazione. Distinguere quei due punti da quelli di una pseudoclasse è il motivo per cui il formattatore guarda avanti fino alla prossima chiusura o punto e virgola prima di decidere cosa sta leggendo.
Esempi
| Caso | Dati inseriti | Risultato |
|---|---|---|
| Una regola scritta su una riga | a{color:red;margin:0} | a { color: red; margin: 0; } |
Domande frequenti
Il mio foglio di stile viene inviato da qualche parte?
No. Il formattatore è JavaScript che gira in questa pagina. Non viene caricato niente, non viene registrato niente e non viene salvato niente: puoi staccare la rete e lo strumento continua a funzionare.
Minifica anche?
No, ed è una decisione e non una dimenticanza. Minificare il CSS significa decidere quale spazio ha significato e quale no, e sbagliarlo cambia a quali elementi si applica una regola, in silenzio e in un modo di cui ti accorgeresti in produzione. È un altro lavoro, e merita di essere fatto bene o di non essere fatto.
Correggerà o sistemerà i miei valori?
No. Non metterà in minuscolo un colore esadecimale, non accorcerà #ffffff, non toglierà uno zero iniziale, non riordinerà le tue dichiarazioni e non aggiungerà prefissi. Ognuna di queste cose è un'opinione sul tuo codice e non una questione di disposizione, e alcune cambiano il comportamento. Si muovono solo gli spazi.
Capisce Sass o Less?
In parte, e onestamente: dispone le regole annidate, che è la parte che quei linguaggi condividono con il CSS moderno. Non ha idea di cosa significhi un mixin, una variabile o una direttiva di controllo, quindi li tratta come i token che sono. Non si perde niente, ma non aspettarti che sappia che @if apre un ramo.
Cosa succede a un data URI?
Sopravvive. Un url() senza virgolette viene letto come un unico pezzo fino alla parentesi di chiusura, perché un data URI contiene spesso un punto e virgola e leggerlo come la fine di una dichiarazione taglierebbe il valore a metà.
Da sapere
- Il risultato contiene esattamente i pezzi che conteneva l'entrata. L'unica aggiunta è un punto e virgola sull'ultima dichiarazione di un blocco, che è sicuro ovunque e mantiene stabile il risultato quando la regola più avanti guadagna un'altra riga.
- Una stringa, un commento o un url() non chiusi vengono rifiutati invece che riformattati, perché da lì in poi lo strumento non riesce più a distinguere il codice dal testo.
- La disposizione è deterministica: lo stesso foglio con la stessa opzione produce sempre lo stesso risultato, e formattare un foglio già formattato non cambia niente.