Minify CSS online, direttamente nel tuo browser
Con questo strumento per il minify CSS ti basta incollare il foglio di stile: spariscono i commenti, gli a capo e ogni spazio che al browser non serve. La versione compressa compare sotto in una frazione di secondo, con il numero esatto di byte risparmiati. Niente da installare, nessuna fase di build e niente di ciò che incolli viene caricato: tutto avviene online, nel tuo browser.
Come fare il minify di un file CSS
- Incolla o scrivi il tuo CSS nel riquadro CSS originale.
- Un attimo dopo che smetti di scrivere, il CSS minificato compare sotto, con la dimensione originale, quella nuova e la percentuale risparmiata. Non c'è nessun pulsante da premere.
- Tocca Copia negli appunti per incollarlo nel tuo progetto, oppure Scarica .min.css per salvarlo come file.
Un CSS con errori non blocca mai lo strumento: viene minificato fin dove si riesce a leggerlo, quindi puoi incollare codice a metà e sistemarlo dopo.
Cosa toglie il CSS minifier
Ogni regola continua a funzionare esattamente come prima; sparisce solo ciò che serve agli occhi umani. Vanno via i commenti, gli spazi bianchi si compattano, scompaiono gli spazi intorno a parentesi graffe, due punti e virgole, e l'ultimo punto e virgola prima di una graffa di chiusura viene eliminato. Le stringhe tra virgolette, i valori url() e i caratteri di escape vengono copiati senza modifiche, così "a b" mantiene il suo spazio.
Prima: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Dopo: .btn{color:#fff;margin:0 auto}
Minimizzare CSS: quanto si riduce il file?
Dipende da quanti commenti e quanti spazi contiene. Un foglio di stile ben commentato e ben indentato spesso si riduce da un quarto fino alla metà. Sotto il risultato vedi la dimensione originale, quella minificata e la percentuale esatta di risparmio.
Un file più leggero si scarica prima e la pagina viene mostrata prima. Per trasferire ancora meno dati, il tuo server web può anche inviare il file minificato con gzip o Brotli.
Tenere o togliere i commenti di licenza
I commenti che iniziano con /*! di solito contengono la licenza o l'avviso di copyright di una libreria. Per impostazione predefinita restano, perché molte licenze chiedono che l'avviso accompagni il codice.
Togli la spunta da Mantieni i commenti di licenza, sotto il riquadro di input, per eliminare anche quelli e ottenere il file più piccolo possibile.
Il CSS minificato è sicuro in produzione?
Sì: mancano solo caratteri che non cambiano il modo in cui il browser legge il foglio di stile. Conserva il file leggibile come sorgente e pubblica la versione .min.css, per esempio style.css accanto a style.min.css.
Domande frequenti
Cosa fa un CSS minifier?
Toglie tutto ciò che al browser non serve per leggere i tuoi stili: commenti, a capo, rientri, spazi intorno a graffe, due punti e virgole, e l'ultimo punto e virgola di ogni regola. Il risultato funziona esattamente come l'originale ma pesa meno, quindi si scarica più in fretta.
Come si fa il minify CSS online?
Incolla il tuo CSS nel riquadro «CSS originale». La versione minificata compare sotto un attimo dopo, insieme ai byte risparmiati. Tocca «Copia negli appunti» per incollarla nel progetto o «Scarica .min.css» per salvarla come file.
Serve un programma per minificare un file CSS?
No. Incolla il contenuto del file nel riquadro e scarica il risultato con «Scarica .min.css»: tutto avviene nel browser, senza installare nulla e senza caricare il file su un server.
Come tolgo tutti i commenti dal CSS?
Incolla il tuo CSS e togli la spunta da «Mantieni i commenti di licenza». Così vengono eliminati tutti i commenti, compresi quelli che iniziano con /*!. Se lasci l'opzione attiva restano solo quegli avvisi di licenza.
Il CSS minificato si può usare in produzione?
Sì. Il minify toglie solo caratteri che non influiscono su come il browser legge il foglio di stile. Stringhe, valori url() e caratteri di escape vengono copiati esattamente come li hai scritti. Tieni il file originale come sorgente e pubblica la versione .min.css.
Cos'è un file .min.css?
È la copia minificata di un foglio di stile, chiamata così per convenzione in modo da stare accanto alla sorgente leggibile, per esempio style.css e style.min.css. Modifica il file leggibile e collega il .min.css sul sito pubblicato.
Posso riportare un CSS minificato alla forma normale?
Non in modo identico, perché il minify cancella la formattazione originale, ma puoi renderlo di nuovo leggibile. Incolla il codice minificato nel Formattatore di Codice per reindentarlo. I commenti rimossi non tornano, quindi conserva sempre la sorgente.
Cosa succede se il mio CSS ha errori?
Lo strumento non si blocca. Il CSS viene minificato fin dove si riesce a leggerlo, quindi puoi incollare codice incompleto e correggerlo in seguito.
Consigliati
-
Supporto pieghevole per laptop Amazon BasicsPorta lo schermo all'altezza degli occhi mentre alleggerisci il codice.
-
Web Performance Fundamentals (Nadia Makarevich)Un CSS più leggero è solo l'inizio: impara a misurare e velocizzare l'intero sito.
-
Mouse wireless Logitech MX Master 3SPreciso e silenzioso per le lunghe giornate di sviluppo front-end.
Aiuta a mantenere gratuiti gli strumenti. ✨
Le immagini sono solo a scopo illustrativo. In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.
