Softonic

Formatter CSS

Passaggio 1 / 2
Formatta CSS

Apri un foglio di stile di produzione in DevTools e tutto è su una sola riga. Questo formatter espande il CSS minificato in una forma leggibile: una dichiarazione per riga, indentazione di due spazi e una riga vuota tra le regole. Funziona su CSS grezzo, output di Sass o PostCSS e sul CSS all’interno dei blocchi <style> inline. Il CSS che incolli viene inviato al nostro server per essere formattato e viene trasportato nel link della pagina mentre ti muovi tra i passaggi dello strumento. I commenti a blocco vengono rimossi durante la formattazione.

Come formattare il CSS

  1. 1

    Incolla il CSS

    Minificato su una sola riga, parzialmente formattato o già bello. Il parser non si preoccupa.

  2. 2

    Formatta

    Premi Formatta CSS. Ogni dichiarazione passa sulla propria riga con indentazione di due spazi e una riga vuota separa le regole.

  3. 3

    Controlla

    Controlla il risultato. L'ordine delle proprietà è preservato, ma i commenti a blocco vengono rimossi.

  4. 4

    Copia

    Copia il CSS formattato negli appunti e incollalo di nuovo nel tuo progetto.

Prima e dopo

Input (minificato):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Output (formattato):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

Cosa fa il formatter

Comportamento Valore
Dichiarazioni Una per riga, indentate con due spazi
Riga vuota tra le regole 1
Parentesi graffa di apertura Sulla stessa riga del selettore
Parentesi graffa di chiusura Sulla propria riga
Ordine delle proprietà Preservato, mai riordinato
Commenti a blocco Rimossi durante la formattazione

Cosa rimuove il formatter

/* Questo commento sparisce quando formatti */
.button { background: #2563eb; }

I commenti a blocco (/* ... */) vengono rimossi dall'output. Se ti servono, conserva una copia del file originale prima di formattare.

Regole annidate (Sass / nesting CSS moderno)

Il formatter indenta le regole annidate in base alla loro profondità:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

La sintassi Sass/Less (senza &) è anche tollerata. Le at-rule specifiche di Sass come @mixin, @include e @extend vengono passate intatte ma non riformattate in profondità. Per una formattazione completa di Sass, usa uno strumento compatibile con Sass come Prettier.

Quando non formattare

  • In produzione: minifica, non formattare. Il CSS formattato è 2-3 volte più grande di quello minificato.
  • Prima di un diff: formatta entrambi i lati. Confrontare un file minificato con uno bello produce diff illeggibili.
  • Dentro una pipeline di build: lascia che Prettier o il formatter del tuo framework gestiscano la coerenza. Usa questo strumento per una pulizia occasionale.

Domande frequenti

Gestisce CSS standard e CSS Nesting (la specifica del 2023). La sintassi specifica di Sass come @mixin, @include, @extend e le variabili con $ viene passata intatta ma non riformattata in profondità. Per una formattazione completa di Sass, usa uno strumento compatibile con Sass come Prettier.

Sì. La formattazione viene eseguita sul nostro server, quindi il CSS che incolli viene inviato con ogni richiesta di formattazione e viene trasportato nel link della pagina mentre ti muovi tra i passaggi dello strumento. Non viene salvato su alcun account né riutilizzato in seguito.

No, se è sintatticamente valido. Gli spazi bianchi nel CSS sono insignificanti al di fuori dei valori e il formatter riordina solo spazi bianchi e interruzioni di riga. L’ordine delle dichiarazioni e i valori stessi sono preservati.

Sì. Copia il CSS che si trova dentro i tag <style>, incollalo, formattalo e reincollalo. Il formatter lavora solo su CSS, quindi incolla il contenuto CSS e non l’HTML circostante.

Il formatter elimina i commenti a blocco (/* ... */) per mantenere uniforme l’output. Se vuoi conservarli, salva una copia del CSS originale prima di formattare.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Generatore di Palette di Colori

Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.

Semplificatore di Algebra Booleana

Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.