CSS di input

CSS minificato

Esempi di minificazione CSS

Il CSS formattato è leggibile; il CSS minificato è compatto per la produzione. Esempio:

Stili container e pulsante

Input formattato:

Input

Output minificato:

Output

Usa Esempio in alto per caricare altri dati di esempio.

Cos'è un Minificatore CSS?

I file CSS usano spazi bianchi, commenti e rientri per la leggibilità. In produzione, i file più piccoli si caricano più velocemente. Un minificatore CSS rimuove gli spazi bianchi e i commenti non necessari e accorcia i valori dove è sicuro per ridurre la dimensione del file. Le specifiche W3C CSS definiscono il linguaggio; la minificazione preserva il comportamento riducendo i byte.

Questo strumento analizza il tuo CSS e produce una versione compatta. La minificazione avviene interamente nel tuo browser. Nulla viene inviato a un server. Per formattare il CSS minificato, usa il Formattatore CSS. Per la validazione, usa il Validatore CSS.

Come usare questo strumento

Incolla o carica CSS

Copia il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Carica per caricare un file .css. Il pulsante Esempio carica dati di esempio. Il CSS non valido mostrerà un errore.

Controlla l'output minificato

Il pannello di destra mostra il CSS compatto. Gli spazi bianchi e i commenti vengono rimossi. L'output è CSS valido—il comportamento è preservato. Il CSS non valido mostrerà un errore nell'output.

Copia o scarica

Usa Copia per mettere il risultato negli appunti o Scarica per salvarlo. Per SCSS o Less compila prima con SCSS in CSS o Less in CSS, poi minifica.

Come funziona il Minificatore

Lo strumento rimuove gli spazi bianchi, le interruzioni di riga e i commenti dal tuo CSS. I valori possono essere accorciati dove è sicuro (es. 0px → 0, #ffffff → #fff). L'output rimane valido secondo la specifica W3C CSS. Strumenti di build come cssnano o PostCSS offrono ottimizzazioni più aggressive; questo strumento fornisce una minificazione rapida basata su browser.

Quando la minificazione CSS è utile

I siti web in produzione beneficiano di file CSS più piccoli. La minificazione riduce la dimensione del payload, migliora i tempi di caricamento e risparmia banda. Strumenti di build come Webpack, Vite o Parcel spesso minificano automaticamente, ma questo strumento è utile per file singoli, controlli rapidi o quando non è disponibile un passaggio di build.

I template email, gli stili incorporati o il CSS ospitato su CDN spesso necessitano di minificazione manuale. Passare il tuo foglio di stile qui produce un output pronto per la produzione. Per aggiungere prefissi vendor prima della minificazione, usa il Prefissatore CSS. Per formattare il CSS minificato di nuovo in forma leggibile, usa il Formattatore CSS.

Domande Frequenti

La minificazione rompe il CSS?

No. Vengono rimossi solo gli spazi bianchi e i commenti. I selettori, le proprietà e i valori rimangono gli stessi. L'output è CSS valido. Alcuni minificatori possono accorciare i valori (es. 0px → 0)—il comportamento è preservato.

I miei dati sono privati?

Sì. La minificazione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.

E le source map?

Questo strumento non genera source map. Per build di produzione con source map, usa uno strumento di build come PostCSS, cssnano o il minificatore del tuo bundler.

Supporta SCSS o Less?

Questo strumento minifica il CSS normale. Per SCSS o Less, compila prima con SCSS in CSS o Less in CSS, poi minifica l'output.

Quanto diventa più piccolo?

In genere del 20–40% a seconda degli spazi bianchi e dei commenti. Il CSS con molti commenti o formattazione può ottenere risparmi maggiori. La riduzione esatta dipende dal tuo input.

Strumenti Correlati

Per la specifica CSS: W3C CSS. MDN CSS è il riferimento. cssnano e PostCSS offrono minificazione avanzata in fase di build.