Come formattare CSS con indentazione coerente o modalità minify

Incolla il CSS, scegli l'abbellimento o la modalità minify, imposta eventualmente un'indentazione da 0 a 8 e avvia la formattazione. Un campo vuoto produce un risultato vuoto; un input non testuale, troppo grande o soggetto ad altre condizioni di elaborazione può invece fallire.

A cosa serve il formattatore CSS

Questo strumento serve a rendere più leggibile un foglio CSS oppure a ridurne la spaziatura per una versione compatta. Puoi usarlo quando vuoi uniformare l'indentazione di regole già scritte, controllare visivamente la struttura di un foglio o ottenere una formattazione coerente senza modificare manualmente ogni riga. La modalità di abbellimento inserisce interruzioni di riga e indentazione coerente; la modalità di riduzione elimina commenti a blocco, comprime gli spazi e rimuove gli spazi attorno a parentesi graffe, punti e virgola e due punti.

Come formattare CSS passo dopo passo

1. Incolla il contenuto CSS nel campo principale. Se non inserisci nulla, il risultato sarà vuoto; un eventuale valore alternativo CSS viene usato solo quando il campo principale non contiene un valore e quel valore alternativo è presente.
2. Scegli la modalità di abbellimento per una disposizione leggibile oppure la modalità di riduzione per compattare il contenuto. Se non imposti una modalità valida, viene usato l'abbellimento. La modalità di riduzione va indicata esattamente come minify; le altre modalità testuali normalizzate usano l'abbellimento.
3. Imposta il livello di indentazione, se disponibile. Per un contenuto non vuoto vengono accettati valori interi da 0 a 8. Un valore non convertibile o fuori da questo intervallo viene sostituito con 2.
4. Avvia la formattazione e copia il risultato nel tuo foglio di lavoro. Per contenuti non composti soltanto da spazi, il materiale oltre 1.000.000 di byte UTF-8 non viene elaborato. Un contenuto vuoto o formato solo da spazi, invece, restituisce un risultato vuoto prima dei controlli di dimensione, modalità e indentazione.

Come leggere il risultato e quali sono i limiti

Un risultato abbellito dovrebbe presentare separazioni visibili tra le regole e una rientranza uniforme. Un risultato in modalità minify dovrebbe avere meno spazi, senza commenti a blocco e senza spazi esterni attorno ai principali separatori CSS. Il risultato vuoto con input vuoto è un esito valido, non un'indicazione che il foglio sia stato analizzato senza errori.

Il formato restituito non equivale a una validazione del CSS: un risultato formattato non dimostra che il foglio sia corretto, conforme agli standard o privo di problemi semantici. Un input non testuale, un contenuto troppo grande, una dipendenza necessaria non disponibile o altre condizioni di elaborazione possono causare un fallimento. L'assenza di accesso alla rete descritta per lo strumento non permette di dedurre dove venga eseguito né come vengano gestiti o conservati i dati.

Esempio pratico

Stai sistemando una regola CSS scritta su una sola riga prima di inserirla in un foglio più leggibile.

Inserisci body{color:red} nel campo principale, seleziona l'abbellimento e imposta un'indentazione di 2, quindi avvia la formattazione.

Con l'abbellimento, il risultato dovrebbe mostrare la regola su più righe con una rientranza uniforme; il numero preciso di righe dipende dal contenuto elaborato.

Limiti

• Il risultato è una formattazione, non una validazione del CSS. L'assenza di accesso alla rete non dimostra dove venga eseguito lo strumento o come vengano gestiti i dati; inoltre, contenuti non validi per il tipo previsto, troppo grandi, oppure soggetti a una dipendenza non disponibile possono fallire.

Errori comuni

• Se la formattazione fallisce perché l'input non è testuale, inserisci una stringa CSS nel campo principale. Un valore alternativo può sostituirlo solo quando il campo principale è vuoto o comunque privo di valore e l'alternativa è valorizzata.

Domande frequenti

Posso inviare un campo CSS vuoto?

Sì, se l'input è vuoto o contiene soltanto spazi: il risultato sarà vuoto e la richiesta riuscirà. Per contenuti non vuoti si applicano invece i controlli e le condizioni di elaborazione previsti.

Come posso ottenere un CSS più compatto?

Scegli la modalità minify. In questo caso vengono rimossi i commenti a blocco, gli spazi vengono compressi e sono eliminati gli spazi esterni attorno a parentesi graffe, punti e virgola e due punti.

Quale valore di indentazione devo usare?

Per contenuti non composti soltanto da spazi, inserisci un valore intero compreso tra 0 e 8. I valori non convertibili o fuori intervallo vengono sostituiti con 2.