Strumento per sviluppatori / 16

Formattatore e abbellitore CSS

Formatta, indenta ed espande regole CSS, elenchi di selettori e dichiarazioni di proprietà in codice leggibile.

Formattatore e abbellitore CSS: TOEA analizza regole CSS, media query e dichiarazioni, uniformando gli spazi nelle proprietà e l'indentazione dei blocchi. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria: Strumenti per sviluppatori
Esecuzioni: Nel browser
Costo: Gratuito · senza registrazione
Disponibilità: Pronto all'uso

Formattatore e prettificatore CSSElaborazione locale

Funziona interamente nel browser

Output CSS formattato

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Leggere il foglio di stile di qualcun altro

Formattare un file minificato lo rende leggibile, ma non lo restituisce identico al sorgente da cui proviene: i minifier uniscono le regole e riordinano le dichiarazioni, quindi aspettati selettori raggruppati e valori abbreviati. Per trovare quale regola applica lo stile a un elemento, gli strumenti per sviluppatori del browser sono più rapidi, e il relativo pannello Sources può formattare un file minificato direttamente. Formattando due versioni di un foglio di stile e confrontandole nello strumento di verifica delle differenze puoi vedere cosa ha modificato un aggiornamento.

Cosa non modifica la formattazione

Il formatter aggiunge indentazione e spazi, ma non ordina le proprietà, corregge i nomi scritti in modo errato, aggiunge prefissi vendor né rimuove le dichiarazioni duplicate, quindi colour: red passa senza modifiche. Le sequenze di spazi bianchi vengono compattate ovunque, anche all'interno delle stringhe tra virgolette: controlla quindi i valori content che dipendono da più spazi. Quando il file è pronto per la pubblicazione, comprimilo di nuovo con il minifier CSS.

Come usarlo

Incolla il codice CSS grezzo o minificato.
Seleziona un'indentazione di 2 o 4 spazi.
Fai clic su Formatta CSS e copia o scarica il risultato.

Privacy e limitazioni

La formattazione CSS viene eseguita localmente nel tuo browser.

Strumenti correlati

Domande frequenti

Supporta le media query @media?

Sì, le direttive @ annidate e le media query vengono formattate con la corretta indentazione.

Modifica i codici colore o i selettori?

No, la formattazione modifica gli spazi, l'indentazione e la struttura senza alterare i valori delle proprietà.

Strumento gratuito · nel browser esecuzioni · senza account