Formattatore CSS online per un codice del sito più pulito

Introduzione

Il CSS minificato o compresso a mano è efficiente da scaricare per un browser, ma difficile da leggere per una persona: tutto è attaccato, senza interruzioni di riga, senza indentazione e di solito senza commenti. Formattare fa il contrario di minificare: prende il CSS in quello stato compresso e ricostruisce le interruzioni di riga, la spaziatura e l'indentazione che lo rendono di nuovo leggibile, senza cambiare quello che fa una singola regola. La cosa conta ogni volta che il CSS deve essere guardato da una persona e non da un browser: per impararci qualcosa, per controllarlo o per trovarci dentro una regola precisa.

Come questo strumento formatta il tuo CSS

Incollare il CSS e premere Formatta ricostruisce il codice come un blocco per regola: ogni selettore su una riga propria, seguito dalle sue proprietà indentate sotto, una proprietà per riga. I valori delle proprietà — colori, unità di misura, abbreviazioni — restano esattamente come li hai incollati; cambiano solo la spaziatura e la struttura. Vale la pena conoscere due dettagli sul modo in cui vengono trattati selettori e valori:

• I selettori raggruppati restano insieme. Una regola con diversi selettori separati da virgole, come .card, .card-highlight, .card-featured { ... }, viene mantenuta su un'unica riga di selettori anziché spezzata uno per riga, come fanno certi formattatori.
• I valori che contengono i due punti vengono gestiti correttamente. In ogni dichiarazione solo i primi due punti vengono considerati il divisore fra la proprietà e il suo valore, così un valore che a sua volta contiene i due punti — il caso più frequente è un indirizzo web come background: url(http://example.com/img.png) — non viene tagliato nel punto sbagliato.

Nel corso di questa operazione i commenti vengono rimossi: cosa da sapere se il tuo foglio di stile contiene una licenza o una nota di attribuzione, vedi l'avvertenza qui sotto.

Cosa sapere prima di usarlo

Questo strumento funziona bene su CSS lineare e semplice, cioè un elenco piano di selettori con le loro proprietà. Ha due limiti precisi che vale la pena conoscere prima di incollarci del codice reale:

• Le regole annidate non vengono formattate correttamente. Se il tuo CSS contiene una query @media, un blocco @keyframes o qualsiasi regola annidata dentro un altro blocco, la parte intorno verrà fuori probabilmente scombinata anziché indentata in modo pulito. Questo strumento ricostruisce la struttura abbinando una coppia di graffe alla volta e non tiene conto di quanto in profondità dentro un altro blocco si trovi una graffa, quindi il contenuto di una regola annidata dentro @media finisce mescolato con quello del blocco @media stesso invece di restare annidato come dovrebbe. Se il tuo foglio di stile usa media query o keyframes, controlla con attenzione quella parte del risultato, oppure formatta una versione con le parti annidate rimosse.
• Tutti i commenti vengono rimossi, senza eccezioni. A differenza di CSS Minifier su questo sito, che conserva i commenti scritti come licenza o nota di attribuzione, questo strumento di formattazione elimina ogni commento presente nel codice incollato. Se il tuo foglio di stile contiene un'intestazione di licenza che devi conservare, salvane una copia prima di formattare.

Nessuno dei due limiti cambia quello che fa il CSS: le regole e i valori di fondo non vengono toccati, cambia solo quanta parte della struttura viene effettivamente riportata in forma leggibile.

Quando è questo lo strumento giusto

• Leggere il CSS minificato di qualcun altro per impararci qualcosa. Guardare il foglio di stile di un sito reale dagli strumenti per sviluppatori del browser mostra spesso CSS compresso e illeggibile: incollarlo qui e formattarlo permette di studiare davvero come è costruito un layout o un componente, un uso di educazione digitale concreto, che va oltre il semplice provare lo strumento sul proprio codice.
• Esaminare il CSS consegnato da uno studente. Il codice copiato e incollato da un editor all'altro a volte perde la formattazione originale; formattarlo prima di leggerlo rende più rapidi la correzione e il riscontro.
• Trovare l'errore in un layout che non funziona. Un CSS denso e non formattato è più difficile da scorrere in cerca della regola che causa il problema: formattarlo prima rende di solito più facile individuare il punto critico.

Se il CSS su cui stai lavorando si appoggia a query @media o ad altri blocchi annidati e ti serve una formattazione affidabile, il formattatore integrato di un editor di codice è più adatto di questo strumento, vedi il limite spiegato sopra. Per un foglio di stile piano, senza regole annidate, che è il caso di buona parte del lavoro introduttivo di web design, questo strumento è un modo rapido per ottenere un risultato leggibile senza installare nulla.

Esempio

Uno studente trova interessante il CSS di un sito modello e vuole capire come è costruito un layout a schede. Il foglio di stile pubblicato è minificato in un'unica riga densa, quindi prima di poterlo leggere lo incolla in questo strumento e lo formatta. Le regole si separano in una struttura leggibile e diventa possibile vedere quale selettore governa quale parte del layout, come viene impostata la spaziatura con margin e padding e quali colori ricorrono nel disegno. Se il foglio di stile copiato contiene query @media per il comportamento responsivo, quella parte va riguardata dopo: vedi "Cosa sapere prima di usarlo" qui sopra.

Domande frequenti

Formattare cambia quello che fa il CSS?

No. Cambiano solo spaziatura, interruzioni di riga e indentazione: selettori, proprietà e valori restano gli stessi.

Che fine fanno i commenti nel mio CSS?

Vengono rimossi. Questo strumento non conserva i commenti di licenza o di attribuzione come fa CSS Minifier: salvane una copia prima, se devi tenerne uno.

Formatta correttamente il CSS con le media query?

Non in modo affidabile. Le regole annidate dentro @media, @keyframes o blocchi simili possono venire fuori scombinate: controlla quella parte del risultato, oppure usa il formattatore di un editor di codice per i fogli di stile che si appoggiano molto all'annidamento.

Posso formattare CSS minificato copiato da un altro sito?

Sì, è un uso diffuso e legittimo per imparare come è costruita una pagina. Tieni però presenti le condizioni d'uso del sito di origine se intendi riutilizzare il codice e non soltanto studiarlo.

Il mio codice viene salvato da qualche parte?

No. Il CSS incollato viene elaborato per produrre il risultato formattato e non viene conservato dopo; viene registrato soltanto il fatto che lo strumento è stato usato, non il codice.

I selettori raggruppati vengono separati su righe diverse?

No. Una regola scritta con più selettori separati da virgole resta su un'unica riga di selettori, come era scritta in origine.

Quali strumenti collegati posso usare?

Usa CSS Minifier per ricomprimere il CSS per la pubblicazione, oppure JavaScript Beautifier e HTML Beauty per altri lavori di formattazione del codice.