Minificatore CSS
Fogli di stile più piccoli, stesso design
Questo minificatore CSS gratuito funziona online, toglie commenti e spaziature dal foglio di stile e ti restituisce un file più piccolo. Prima incolla il CSS o trascina i file. Poi premi un pulsante. Infine copia il risultato, perché tutto il lavoro avviene in questa scheda.
- GratisPrezzo
- Non serveAccount
- NessunoCaricamenti
- A ogni passaggioVerificato
Minificatore CSS
Incolla un foglio di stile o trascina i file — nulla viene caricato
Risultato minificato
- Originale
- —
- Minificato
- —
- Risparmiato
- —
- Con gzip
- —
- Regole
- —
- Tempo
- —
Pronto. Incolla il tuo CSS, poi premi Minifica o Abbellisci.
Cos’è un minificatore CSS?
Un minificatore CSS riscrive un foglio di stile scritto per le persone in uno che il browser scarica più in fretta. Elimina commenti, indentazione e spazi che aiutano solo chi legge. Tuttavia mantiene ogni regola che hai scritto, quindi la pagina appare esattamente uguale.
Il risparmio conta perché un foglio di stile blocca il rendering. Il browser non disegna un solo pixel finché non ha il tuo CSS, quindi ogni byte tagliato arriva prima del primo disegno e non dopo. Perciò un foglio che scende da 60 KB a 42 KB mostra prima il tuo design.
A volte lo stesso lavoro si chiama compressore CSS. Entrambi i termini descrivono una cosa sola: meno caratteri, comportamento identico. In breve, pubblichi il file piccolo e tieni quello leggibile.
Minificare in sicurezza significa sapere cosa serve al parser. Il riferimento MDN sulla sintassi CSS ne è la descrizione onesta più breve.
Dove la maggior parte degli strumenti rompe il tuo CSS in silenzio
Tre trappole causano quasi tutti i danni, e uno strumento basato su trova e sostituisci ci cade in ognuna. Primo, `calc(100% - 20px)` ha bisogno degli spazi intorno a quel meno. Toglili e il browser scarta tutta la dichiarazione, così il layout crolla senza alcun errore.
Secondo, `.card .title` e `.card.title` selezionano elementi diversi. Quello spazio è il combinatore discendente, e ha un significato. Terzo, un data URI dentro `url()` contiene punti e virgola e virgole che non sono affatto separatori.
Questo strumento legge il foglio di stile un carattere alla volta, quindi sa quale spazio sta guardando. Di conseguenza toglie gli spazi senza significato e lascia quelli che significano qualcosa.
Quando minificare il CSS
Minifica per ultimo, dopo la build e dopo i test. Tieni il foglio leggibile nell’editor e pubblica quello piccolo, perché nessuno dovrebbe mai modificare a mano un file minificato.
Rende di più sul foglio che ogni pagina carica. Per esempio, un foglio condiviso che ogni visitatore scarica merita molta più attenzione di un file specifico di una pagina.
E il CSS inutilizzato?
Togliere le regole che nulla usa è un altro lavoro, e rischioso. Una classe che il tuo JavaScript aggiunge dopo sembra inutilizzata a uno scanner, quindi lo strumento non tira mai a indovinare. Invece accorcia ciò che hai.
In questa pagina
- Lo strumento
- Cos’è un minificatore CSS?
- Minifica CSS in quattro passaggi
- Un minificatore CSS che controlla il proprio lavoro
- Ottenere il massimo da questo compressore CSS
- Errori che rompono un foglio minificato
- Domande frequenti sul minificatore CSS
- Altri strumenti che puoi usare subito
Continua
Minifica CSS in quattro passaggi
Niente programmi, niente account, niente code. Tutto gira nella scheda che hai già aperta.
- 1
Aggiungi il foglio di stile
Incolla il CSS nell’editor o trascina i file .css nella scheda di caricamento. Entrambe le vie fanno lo stesso lavoro.
- 2
Scegli cosa togliere
I commenti se ne vanno di default. Inoltre puoi accorciare i colori e togliere le regole con corpo vuoto.
- 3
Premi minifica
Lo strumento scorre ogni carattere, riscrive il foglio e poi rilegge la propria risposta prima di mostrarti qualcosa.
- 4
Copia o scarica
Prendi il risultato come testo o salvalo come file .min.css. Nel frattempo l’originale resta esattamente come l’hai lasciato.
Un minificatore CSS che controlla il proprio lavoro
I browser falliscono in silenzio con un CSS rotto. Scartano la dichiarazione e vanno avanti, quindi nessuno ti avvisa che qualcosa è andato storto.
Protegge calc()
Dentro calc, clamp, min e max, un più o un meno con gli spazi mantiene i suoi spazi. Perciò la tua aritmetica sopravvive, proprio dove la maggior parte dei minificatori fallisce in silenzio.
Verifica ogni passaggio
Lo strumento rilegge il proprio output e lo confronta con ciò che voleva scrivere. Se qualcosa differisce, te lo dice invece di tacere.
Conosce i tuoi selettori
Uno spazio tra due selettori significa "discendente", quindi resta. Intorno a un combinatore di figlio o di fratello non significa nulla, quindi se ne va.
Lascia passare url() intatto
Un data URI può contenere punti e virgola, virgole e parentesi. Lo strumento tratta l’intero url() come un solo pezzo e lo copia byte per byte.
Nulla lascia la tua scheda
Il tuo foglio di stile non viaggia mai. Non ci sono richieste, archiviazione o registri, quindi puoi incollare qui anche lavori dei clienti in sicurezza.
Mostra il numero reale
Vedi la dimensione gzip accanto a quella grezza, perché è il gzip ad arrivare davvero al tuo visitatore.
Ottenere il massimo da questo compressore CSS
Alcune piccole abitudini mantengono prevedibile un foglio minificato.
- Conserva l’originale. Modifica sempre il foglio leggibile. Così la copia minificata resta qualcosa che generi, mai qualcosa che mantieni.
- Minifica per ultimo. Eseguilo dopo Sass, dopo PostCSS e dopo i test. Altrimenti testi un file e ne pubblichi un altro.
- Servilo con gzip. Minificare e comprimere si sommano. Di conseguenza il peso trasferito scende ben sotto quello del file su disco.
- Attenzione ai banner di licenza. Lascia attivo quell’interruttore quando un framework che usi richiede che il suo commento di attribuzione viaggi con il codice.
- Controlla l’interruttore delle regole vuote. È spento di default, perché una regola vuota a volte documenta un’intenzione. Attivalo quando sai che non è così.
- Guarda il badge di verifica. Se un passaggio dice che non ha potuto verificare, non pubblicare quel file. Invece mandaci il caso e tieni l’originale.
Errori che rompono un foglio minificato
Quasi ogni storia del tipo "il minificatore mi ha rotto il design" è una di queste tre.
Perdere gli spazi di calc
Uno strumento che li toglie trasforma una lunghezza valida in nulla. Allora il layout crolla senza un solo errore in console.
Modificare il file minificato
Le tue modifiche spariscono alla prossima build. Quindi la correzione va sempre nel foglio di stile sorgente.
Minificare due volte
Ripassare un foglio già minificato non fa risparmiare nulla, e rende solo più difficile leggere il confronto successivo.
Domande frequenti sul minificatore CSS
Questo minificatore CSS romperà il mio design?
Non dovrebbe, e lo verifica invece di darlo per scontato. Lo strumento rilegge ogni passaggio e lo confronta con ciò che voleva scrivere, quindi individua una graffa persa o un url() rovinato e te lo dice, invece di consegnarti un foglio rotto.
calc() continua a funzionare?
Sì, e pesa più di quanto si creda. Dentro calc, clamp, min e max gli spazi intorno a un più o a un meno restano esattamente dove li hai messi, perché toglierli trasforma una lunghezza valida in una dichiarazione che il browser scarta.
Quanto diventerà più piccolo il mio foglio di stile?
Un foglio leggibile di solito cala dal 20 al 40 per cento, e lo strumento mostra il valore esatto per il tuo file. Tuttavia un foglio già compatto risparmia molto meno, perché ci sono meno spazi da togliere.
Rimuove il CSS che non uso?
No, ed è voluto. Una classe che il tuo JavaScript aggiunge più tardi sembra inutilizzata per qualsiasi scanner, quindi tirare a indovinare romperebbe pagine vere. Per questo lo strumento accorcia ciò che hai scritto e lascia a te le decisioni.
Il mio CSS viene caricato da qualche parte?
No. Tutto il minificatore gira nella scheda del browser. Non ci sono richieste, archiviazione o registri, quindi puoi incollare tranquillamente lavori riservati.
Posso minificare più file insieme?
Sì. Apri la scheda di caricamento e trascina tutti i file .css che vuoi. Lo strumento minifica ciascuno separatamente, e puoi scaricarli uno alla volta.
Altri strumenti che puoi usare subito
Ognuno gira nel browser e non ti chiede nulla.
Minificatore JavaScript
Riduci uno script allo stesso modo, con lo stesso controllo che il risultato corrisponda ancora al tuo codice.
Apri lo strumento →Compressore SVG
Riduci file SVG o markup incollato, ed elimina gli script nascosti al loro interno.
Apri lo strumento →I tuoi PNG trasformati in WebP
Converti un lotto di immagini in un formato più leggero, mantenendo la trasparenza.
Apri lo strumento →
Riduci il tuo prossimo foglio di stile in pochi secondi
Incolla il CSS, premi un pulsante e verifica tu stesso il risparmio. Nulla viaggia da nessuna parte e nulla resta salvato.