Minificatore e formattatore CSS

Che cos'è questo strumento?

Un minificatore CSS riscrive un foglio di stile in modo da ridurne il più possibile le dimensioni senza alterarne il risultato visivo: elimina commenti e spazi bianchi, accorcia i valori dei colori e le unità pari a zero laddove possibile, unisce le regole duplicate e rimuove i punti e virgola superflui.

Questo strumento si basa su clean-css, un ottimizzatore CSS che analizza effettivamente il foglio di stile in un AST anziché utilizzare espressioni regolari; proprio per questo è in grado di gestire in modo sicuro quei casi limite che mettono in difficoltà i minificatori più semplici — le proprietà CSS personalizzate (--main-color: ...), contenuti all'interno di stringhe, selettori complessi e media query: il risultato è sempre corretto.

Perché usarlo?

• Minificazione basata su AST (clean-css), non su espressioni regolari — compatibile con proprietà personalizzate, stringhe e media query annidate.
• Le ottimizzazioni di livello 2 uniscono e semplificano le regole per ottenere ulteriori risparmi oltre alla semplice rimozione degli spazi bianchi.
• Scopri esattamente quanti byte e quale percentuale hai risparmiato.
• La modalità "Format" trasforma un foglio di stile minificato in un CSS leggibile con indentazione uniforme.
• Elaborazione al 100% in locale: gli stili proprietari o non ancora pubblicati non escono mai dal tuo browser.

Come si usa

1. Incolla il tuo codice CSS nella casella di immissione oppure clicca su "Carica esempio" per provare un esempio con una proprietà personalizzata e una media query.
2. Clicca su "Minify" per comprimerlo, oppure su "Format" per formattarlo con un'indentazione di 2 spazi.
3. Controlla il messaggio che appare sotto i campi: la modalità "minify" mostra la riduzione delle dimensioni; il CSS non valido mostra un errore chiaro invece di generare silenziosamente un risultato errato.
4. Fai clic su "Copia" per salvare il risultato.

Esempio

Input

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Risultato

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Le proprietà personalizzate, le media query e l'ordine di cascata vengono tutti mantenuti; vengono rimossi solo gli spazi bianchi, i commenti e i caratteri superflui.

Consigli pratici

• Eseguire la minificazione in fase di compilazione/distribuzione, non durante lo sviluppo: modificare il codice sorgente leggibile e lasciare che questo strumento (o la pipeline di compilazione) produca la versione da distribuire.
• Se stai cercando di capire perché una pagina appare diversa nell'ambiente di produzione, formattare prima il CSS minificato rende il confronto con il codice sorgente molto più leggibile.
• Le proprietà personalizzate non vengono modificate durante la minificazione, quindi i fogli di stile basati su design token (che utilizzano --spacing, --color-*, ecc.) possono essere elaborati in tutta sicurezza con questo strumento.
• Se nel tuo progetto tutti i file vengono conservati separatamente prima del rilascio, utilizzali insieme ai minificatori HTML e JS riportati di seguito.

Come si inserisce tutto questo nei flussi di lavoro reali

Il CSS è uno degli elementi che offre il maggiore impatto in termini di ottimizzazione, poiché i fogli di stile bloccano il rendering per impostazione predefinita: ogni byte eliminato da un foglio di stile può ridurre leggermente il tempo di “first paint”, specialmente con connessioni più lente. Si tratta di un miglioramento minore rispetto all’ottimizzazione delle immagini, ma è praticamente gratuito una volta integrato in una fase di compilazione.

L'opzione "Format" è utile per risolvere il problema opposto: esaminare un foglio di stile di un concorrente o di una versione precedente, fornito in formato minificato, per comprenderne la struttura prima di scrivere un override o di procedere a una riprogettazione.

→ Minificatore HTML · Minificatore JS

Casi d'uso comuni

• Comprimere un foglio di stile prima di pubblicare un sito statico o una landing page.
• Riformattazione di un file CSS minificato estratto da un sito attivo per studiarne la struttura.
• Pulizia del codice CSS esportato da uno strumento di progettazione, che spesso contiene commenti e spazi bianchi in eccesso.
• Verifica rapida della corretta analisi di un frammento di codice CSS scritto a mano, poiché un codice CSS non valido viene segnalato come errore esplicito.

Domande frequenti