Come posso minimizzare i CSS nel codice VS?

VS Code non ha alcun comando Minify integrato, quindi installi un'estensione (come un comando "Minify") o esegui uno strumento di compilazione come Esbuild, Lightning CSS o Cssnano al salvataggio. Per una rapida one-off senza configurare nulla, incolla qui il tuo CSS e fai clic su Minify: viene eseguito nel browser e mostra il risparmio esatto di byte.

La minimizzazione rompe il mio CSS?

no . Questo minifier rimuove solo i caratteri che sono ridondanti: commenti, spazi bianchi extra, punto e virgola e suffissi unitari su lunghezze zero. Analizza i valori letterali di stringa, i valori URL() e le espressioni calc() prima di toccare qualsiasi cosa, quindi costrutti sensibili allo spazio bianco come calc (100% - 20px) e selettori discendenti come div :hover escono byte-for-byte semanticamente identici.

Quanto risparmia effettivamente la minimizzazione dei CSS?

I fogli di stile scritti a mano in genere si riducono del 25–40%; i file molto commentati possono diminuire di oltre la metà. Se servi Gzip o Brotli, i risparmi sui cavi sono più piccoli - spesso il 5-15% in aggiunta alla compressione - ma l'input minimizzato si comprime anche più velocemente e analizza più velocemente nel browser. Il badge di risparmio mostra i tuoi numeri esatti in modo da non dover mai indovinare.

Perché dovrei minimizzare CSS se il mio server utilizza già Gzip?

Gzip e minimizzazione sono complementari, non intercambiabili. Gzip non può rimuovere i commenti o abbreviare #FFFFFF in #FFF - può solo codificarli in modo più compatto - quindi minify-then-gzip è sempre più piccolo del solo gzip. Il browser deve anche decomprimere e analizzare il testo originale completo e l'analisi CSS è sul percorso di rendering critico.

I miei /* commenti sulla licenza sono rimossi?

no I commenti che iniziano con /*! vengono conservati per impostazione predefinita, seguendo la stessa convenzione di Terser, CSSNANO e CLEAN-CSS. Ciò significa che le intestazioni delle licenze di librerie come Normalize.CSS sopravvivono alla minimizzazione, mantenendoti conforme ai requisiti di attribuzione.

È sicuro abbreviare #AABBCC in #ABC?

Sì, un colore esadecimale a tre cifre è definito dalle specifiche CSS come l'espansione di ogni cifra, quindi #ABC e #AABBCC sono esattamente dello stesso colore. Lo strumento accorcia solo i valori a sei cifre in cui ogni coppia si ripete e non tocca mai i colori esadecimali a otto cifre con canali alfa o qualsiasi cosa all'interno di una stringa o URL().

La rimozione di unità da valori zero (0px → 0) causerà problemi?

Non per le lunghezze - la specifica CSS dice che una lunghezza zero non ha bisogno di unità, quindi margine: 0px e margine: 0 sono identici. Lo strumento lascia deliberatamente 0%, 0 e 0 gradi perché quelle unità possono essere significative (0% nei fotogrammi chiave è un selettore e il tempismo dell'animazione ha bisogno della sua unità) e salta tutto tra parentesi in modo che calc() non sia mai influenzato.

Posso annullare l'minificazione di un bundle CSS di produzione per cui non ho la fonte?

Sì, è esattamente a questo che serve il pulsante di abbellimento. Espande i CSS a riga singola in una dichiarazione per riga con un'indentazione adeguata e una riga vuota tra le regole, il che rende pratico la differenza, la lettura o il debug di un bundle fornitore. Nota Ripristina la formattazione, non i commenti originali o la struttura di origine, poiché sono stati rimossi in fase di compilazione.

Devo minimizzare nel browser o nella mia pipeline di build?

Per un'app di produzione, mantieni la minimizzazione nella pipeline di costruzione (CSSNANO, ESBuild, Lightning CSS), in modo che sia automatica e ripetibile. Questo strumento brilla per tutto il resto: risorse rapide una tantum, CSS e-mail, stili iniettati da CMS, ispezione di quanto un file si ridurrebbe o abbellire un pacchetto durante un incidente in cui non è possibile ricostruire.

Questo strumento supporta SCSS, meno o nidificati CSS?

È costruito per i CSS standard, inclusi il moderno nidificazione nativa, le query multimediali e le proprietà personalizzate, qualsiasi cosa un browser possa analizzare. La sintassi solo preprocessore come variabili SCSS o meno mixin dovrebbe essere compilata prima in CSS, perché la minimizzazione dell'origine non compilata può modificare ciò che il tuo preprocessore emette.

Il mio CSS è stato caricato su un server?

no Minificazione e abbellimento vengono eseguite interamente nel browser con JavaScript semplice: nulla viene trasmesso, registrato o archiviato da nessuna parte. Puoi verificarlo nella scheda Rete: Nessuna richiesta viene effettuata quando fai clic su Minify. Funziona anche offline una volta caricata la pagina.

Minifier e abbellimento CSS

Minimizza CSS per tagliare le dimensioni dei file o abbellire i fogli di stile minimizzati per il debug

Indent:

Input CSS

Output

Output will appear here...

Che cos'è il minifier e l'abbellimento CSS?

CSS Minifier & Beautifier è uno strumento di foglio di stile bidirezionale: comprime i CSS rimuovendo tutto ciò che il browser non ha bisogno: commenti, spazi bianchi, punti e virgola ridondanti, colori esadecimali a forma lunga e unità su valori zero - e può invertire il processo, espandendo un pacchetto di produzione a riga singola in regole leggibili e correttamente rientrate. Ogni byte che spogli da un foglio di stile che blocca il rendering è un byte che il browser scarica e analizza prima, che alimenta direttamente le metriche del Web Vitals come la prima vernice contentata e la più grande vernice contenta.

Il minifier è deliberatamente conservativo. È pienamente consapevole dei valori letterali di stringa, dei valori URL() e delle espressioni calc(), quindi non rimuove mai lo spazio bianco da cui calc (100% - 20px) dipende, non riscrive mai il testo simile a un colore all'interno di una stringa di contenuto e non tocca mai la spaziatura che distingue div :hover from div:hover. Sui tipici fogli di stile scritti a mano ci si può aspettare una riduzione del 25-40% prima di Gzip; combinato con Gzip o Brotli sul filo, la minificazione rade ancora una fetta significativa perché la compressione funziona meglio su input ripetitivi e senza commenti.

Tutto funziona al 100% dal lato client nel tuo browser. Il tuo CSS non viene mai caricato, registrato o archiviato su nessun server, il che significa che puoi incollare in sicurezza il codice di sistema di progettazione proprietario, gli stili di prodotto inediti o il lavoro del client. Funziona anche offline una volta caricata la pagina, utile quando hai bisogno di un passaggio minimifico rapido senza cablare una pipeline completa di PostCSS o Esbuild.

La minimizzazione qui è responsabile della sintassi piuttosto che un insieme di regole di ricerca e sostituzione, che è ciò che rende sicuro l'esecuzione su fogli di stile di produzione: gli spazi bianchi all'interno delle stringhe, i valori URL() e i selettori di attributi vengono lasciati da soli, poiché la sua rimozione cambierebbe ciò che corrisponde al CSS. I commenti che iniziano con un punto esclamativo vengono conservati, che è la convenzione per le intestazioni della licenza che devono sopravvivere a una build.

Come utilizzare il minifier e l'abbellimento CSS?

Incolla il tuo CSS
Rilascia il tuo foglio di stile nell'area di input: una singola regola, un file componente o un pacchetto di produzione completo. Sono accettati sia i CSS formattati che quelli già minimizzati.
Scegli Minify o Beautify
Fare clic su Minify per comprimere per la produzione o abbellire per espandere il codice minimizzato in una dichiarazione per riga con una riga vuota tra le regole. Per abbellire, scegli prima la tua rientranza preferita.
Controlla il badge di risparmio
Lo strumento riporta l'esatto prima/dopo la variazione della dimensione e della percentuale (ad es. "12,4 KB → 8,1 KB, -34%"), in modo da sapere esattamente cosa ti ha acquistato la trasformazione prima di spedirla.
Copia o scarica
Copia il risultato negli appunti con un clic o scaricalo come file .css pronto per essere rilasciato nell'output della build o nella CDN.

Caratteristiche principali

Minificazione sicura e sensibile alla sintassi
Rispetta i valori letterali di stringa, i valori URL() e la spaziatura calc() - si comprime in modo aggressivo senza mai corrompere i CSS validi
Accorciamento esadecimale e valore zero
Riscrive #FFFFFF su #FFF e da 0px a 0 dove dimostrabilmente sicuro, spremendo byte extra oltre la semplice rimozione degli spazi bianchi
Conservazione dei commenti sulla licenza
Mantiene /*! Commenti del banner intatti in modo che le intestazioni delle licenze della libreria sopravvivano alla minimizzazione, abbinando il comportamento standard dello strumento di build
Beautifier con un clic
Espande i bundle minimizzati in regole leggibili con indentazione di spazio configurabile 2, 4 o 8 per i problemi di produzione di debug

Frequently Asked Questions

La minimizzazione CSS è il processo di rimozione di ogni carattere che un browser non ha bisogno di eseguire il rendering di un foglio di stile - commenti, spazi bianchi, interruzioni di riga, punto e virgola trainate - e accorciando valori sicuri come #FFFFFF in #FFFF. Il risultato è un CSS funzionalmente identico in meno byte, che scarica e analizza più velocemente. Poiché i fogli di stile sono bloccanti in rendering, i CSS più piccoli migliorano le metriche come la prima vernice contenta.