CSS di input

CSS minificato

Przyklady minificazione CSS

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

Stili container e pulsante

Input formattato:

Input

Output minificato:

Output

Usa Przyklad in alto per caricare altri dane di esempio.

Cos'è un Minifikator CSS?

I plik CSS usano spazi bianchi, commenti e rientri per la leggibilità. In produzione, i plik 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 plik. Le specifiche W3C CSS definiscono il linguaggio; la minificazione preserva il comportamento riducendo i byte.

Questo narzedzie 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 Formater CSS. Per la validazione, usa il Walidator CSS.

Come usare questo narzedzie

Incolla o carica CSS

Kopiuj il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Wczytaj per caricare un plik .css. Il pulsante Przyklad carica dane di esempio. Il CSS nieprawidlowy 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 nieprawidlowy mostrerà un errore nell'output.

Kopiuj o scarica

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

Jak to dziala il Minifikator

Lo narzedzie 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. Narzedzia di build come cssnano o PostCSS offrono ottimizzazioni più aggressive; questo narzedzie fornisce una minificazione rapida basata su browser.

Quando la minificazione CSS è utile

I siti web in produzione beneficiano di plik CSS più piccoli. La minificazione riduce la dimensione del payload, migliora i tempi di caricamento e risparmia banda. Narzedzia di build come Webpack, Vite o Parcel spesso minificano automaticamente, ma questo narzedzie è utile per plik 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 Formater CSS.

Czesto zadawane pytania

La minificazione rompe il CSS?

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

I miei dane sono privati?

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

E le source map?

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

Supporta SCSS o Less?

Questo narzedzie 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.

Powiazane narzedzia

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