Minificatore CSS

Il Minificatore CSS è uno strumento gratuito che rimuove i caratteri superflui dal CSS e restituisce il foglio di stile minificato, indicando il numero di caratteri prima e dopo l'elaborazione.

A cosa serve la minificazione CSS?

La minificazione CSS riduce il numero di caratteri di un foglio di stile eliminando la formattazione non necessaria al browser. In genere rimuove rientri, interruzioni di riga, commenti e spazi facoltativi intorno alla punteggiatura.

Il browser continua a ricevere regole CSS, selettori e valori delle dichiarazioni. Il risultato visivo previsto dovrebbe rimanere invariato, ma il file trasferito al browser è più piccolo. Il vantaggio effettivo della minificazione dipende dal file originale, dalla compressione HTTP e dalla cache del browser. Se un foglio di stile è già ben compresso, la riduzione dei byte trasferiti potrebbe essere modesta.

La minificazione è utile prima della pubblicazione, per esaminare CSS di terze parti particolarmente voluminosi o per capire quanto incida sul file la formattazione usata durante lo sviluppo. Non equivale a un'ottimizzazione che elimina i selettori inutilizzati, unisce regole equivalenti o riscrive le dichiarazioni. Questo strumento non dichiara di eseguire tali operazioni più ampie.

Come si usa il Minificatore CSS?

Incolla un foglio di stile nel campo CSS e avvia lo strumento, quindi copia il risultato CSS minificato nel flusso di compilazione o pubblicazione appropriato. Conserva il file sorgente CSS leggibile, invece di sostituirlo definitivamente con la copia minificata.

1. Parti dal CSS sorgente utilizzato dal tuo sito o dalla tua applicazione.
2. Prima di minificarlo, verifica che venga analizzato correttamente.
3. Incollalo in CSS e avvia lo strumento.
4. Confronta Caratteri CSS con Caratteri CSS minificati.
5. Prova il risultato su una pagina di staging, includendo layout responsive, stili di stampa e componenti interattivi.

La minificazione CSS avviene sul server. Il CSS inviato viene trasmesso al server tramite HTTPS e non viene memorizzato. Se il foglio di stile contiene URL riservati, nomi host interni o altro materiale sensibile, valuta se l'invio a un qualsiasi servizio lato server sia compatibile con le politiche di gestione dei dati della tua organizzazione.

Come si interpreta il risultato?

Il risultato contiene il CSS trasformato e due conteggi dei caratteri, così puoi esaminare l'output e verificare direttamente la riduzione. Caratteri CSS indica la lunghezza del testo inviato, mentre Caratteri CSS minificati indica la lunghezza dopo la minificazione.

I conteggi misurano i caratteri tramite una funzione compatibile con le sequenze multibyte. Non vanno considerati una previsione esatta delle dimensioni trasferite in rete. I caratteri UTF-8 possono occupare più di un byte e la compressione Brotli o gzip può modificare notevolmente le dimensioni dei dati inviati tramite HTTP.

Per questo strumento non è previsto un campo separato per la convalida o gli errori. Non va quindi usato come validatore CSS. Problemi comuni come parentesi graffe non abbinate, due punti mancanti, stringhe non terminate, commenti non validi o annidamenti errati devono essere controllati con gli strumenti di sviluppo del browser, un linter o un validatore conforme agli standard. Un CSS non valido può produrre un output dall'aspetto compatto che però non funziona come previsto.

Brevi esempi di minificazione CSS

Una normale versione minificata elimina la formattazione mantenendo invariata la regola.

CSS

p { color: red; }

CSS minificato

p{color:red}

In questo esempio, l'input leggibile contiene 17 caratteri e la forma compatta ne contiene 12. Gli spazi e la punteggiatura all'interno delle stringhe tra virgolette devono rimanere parte del valore.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

CSS minificato

.notice,.warning{color:#c00;margin:0 1rem}

Eliminare indiscriminatamente ogni spazio non è sicuro. Gli spazi possono rappresentare un combinatore di discendenza, mentre gli operatori aritmetici nelle funzioni come calc() richiedono una spaziatura specifica. Anche stringhe, URL di dati, identificatori con escape e valori delle proprietà personalizzate devono essere gestiti tenendo conto della sintassi.

I caratteri accentati e non latini possono comparire nelle stringhe e, nel rispetto delle regole CSS per gli identificatori, nei selettori. Numeri, separatori decimali, percentuali e unità fanno parte della sintassi e non sono semplice testo decorativo, quindi non possono essere abbreviati senza comprendere la dichiarazione. Un foglio di stile vuoto non contiene CSS da minificare. Per fogli di stile molto grandi, un minificatore integrato nel processo di compilazione è in genere più facile da riutilizzare e verificare rispetto alla copia manuale del testo in un modulo online.

Quando non conviene minificare il CSS?

In genere non conviene ripetere la minificazione se un file è già minificato o è stato generato come risorsa di produzione compatta. Un secondo passaggio potrebbe ridurre poco o per nulla le dimensioni, aggiungendo però un'altra trasformazione al processo di rilascio.

• Non riformattare per poi minificare di nuovo un CSS destinato a essere letto soltanto da un browser o da un sistema di compilazione.
• Non usare la minificazione al posto della rimozione di regole inutilizzate dei framework o di dichiarazioni duplicate.
• Non aspettarti che la riduzione dei caratteri riveli richieste che bloccano il rendering, problemi di cache o un caricamento lento dei font.
• Non eliminare il sorgente formattato, soprattutto quando devi analizzare specificità, livelli della cascata o media query.

Se il CSS viene raggruppato automaticamente, usa il minificatore all'interno della stessa pipeline, in modo che ogni versione venga generata con le medesime impostazioni. Se pubblichi manualmente risorse correlate, il Minificatore HTML e il Minificatore JS possono applicare un'operazione equivalente a questi tipi di file.

Domande frequenti

Minificare il CSS cambia la specificità dei selettori?

Una minificazione corretta non modifica la specificità, perché i selettori dovrebbero mantenere gli stessi componenti e lo stesso ordine. Confronta comunque con attenzione i selettori complessi se il sorgente utilizza sequenze di escape, pseudo-classi più recenti o sintassi generata che un minificatore meno aggiornato potrebbe non riconoscere.

Posso minificare le proprietà personalizzate CSS?

Sì, le proprietà personalizzate possono essere incluse, ma i loro valori potrebbero dover conservare token e spazi per la successiva sostituzione tramite var(). Prova nei browser supportati dal progetto le dichiarazioni che contengono calcoli, valori di ripiego o stringhe incorporate, invece di presumere che ogni spazio apparentemente superfluo sia facoltativo.

Lo strumento crea una source map?

Non è previsto alcun risultato sotto forma di source map. Se per il debug in produzione devi ricondurre il CSS compatto a Sass, Less o a un altro sorgente, genera il file minificato e la relativa source map nel compilatore o bundler che conosce la struttura originale dei file.

I commenti sulle licenze rimangono nell'output?

Non dare per scontato che i commenti CSS vengano conservati. Se la licenza di una dipendenza impone di includere un avviso insieme al codice distribuito, conserva l'avviso separatamente oppure controlla l'output generato prima della pubblicazione.

La minificazione può correggere un CSS non funzionante?

No. La minificazione rimuove i caratteri superflui, ma non corregge un selettore non valido, una proprietà non supportata, una risorsa mancante o una cascata errata. Risolvi prima nel sorgente gli avvisi di analisi e i problemi di resa visiva.

Controlli prima della pubblicazione

Salva l'output minificato come risorsa di produzione separata, verifica che gli URL e i contenuti tra virgolette siano intatti, quindi caricalo su una pagina di staging tenendo aperta la console del browser. Confronta pagine rappresentative con viewport strette e ampie, poi assicurati che il server applichi il tipo di contenuto, i criteri di cache e la compressione HTTP previsti.