Minificatore CSS

Alleggerisci i tuoi fogli di stile

Il CSS blocca il rendering: il browser non disegna la pagina finché non ha scaricato e analizzato i fogli di stile nell'<head>. Per questo il peso del CSS incide direttamente sulla velocità con cui la pagina compare. Il minificatore CSS elimina commenti, spazi, a capo e altri caratteri che non servono ai browser e mostra il numero di caratteri prima e dopo.

Gli stili continuano a funzionare esattamente allo stesso modo; il file diventa solo più piccolo. È perfetto per il CSS personalizzato in temi WordPress, Shopify o AltumCode, per piccoli progetti senza strumenti di build e per il CSS critico inline.

Conserva l'originale leggibile per le modifiche future e pubblica la copia minificata.

Come usare il minificatore CSS

1. Incolla il CSS.
2. Invia per minificarlo.
3. Confronta il numero di caratteri prima e dopo.
4. Copia il CSS minificato nel sito o nel file.

Esempi

Stili di un pulsante

Input:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

Risultato:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

Il commento e gli spazi spariscono, #ffffff viene abbreviato in #fff, 0px diventa 0, il valore di margin ripetuto viene compattato e 0.80 diventa .8.

Usi comuni

• Minificare il CSS personalizzato aggiunto dal pannello del tema o del CMS.
• Alleggerire i fogli di stile di siti piccoli e landing page.
• Preparare il CSS critico inline per una prima visualizzazione più rapida.
• Comprimere il CSS nei template email HTML.
• Alleggerire un foglio di stile per un sito senza processo di build, come un piccolo sito statico o una landing page.
• Preparare il CSS critico da inserire inline nell'<head> di una pagina.
• Ridurre il peso del CSS personalizzato incollato in un CMS o in un website builder.

Consigli e cose da sapere

• Prima elimina le regole inutilizzate: cancellare CSS fa risparmiare più che minificarlo.
• Tieni nel file sorgente i commenti che ti servono (come le note di licenza) e verifica se vengono mantenuti.
• Prova la pagina dopo la pubblicazione, soprattutto se il CSS contiene hack insoliti.
• Minifica anche HTML e script con il minificatore HTML e il minificatore JavaScript. Controlla i valori dei colori con il convertitore di colori.

Casi particolari e limiti

• Il risultato è una sola lunga riga, che rende difficile trovare gli errori. Conserva il sorgente leggibile e minifica una copia.
• I commenti vengono rimossi, compresi quelli di licenza. Aggiungi di nuovo i crediti che sei tenuto a mantenere.
• Il CSS non valido può essere eliminato o modificato. Se dopo la minificazione qualcosa non torna, cerca nell'originale una parentesi graffa o un punto e virgola mancante.

Domande frequenti

Cosa fa un minificatore CSS?

Elimina dal CSS i caratteri non necessari, come spazi e commenti, senza cambiare il funzionamento degli stili.

Il CSS minificato è più veloce?

Sì, i file più piccoli si scaricano e si analizzano più in fretta, e la pagina viene mostrata prima.

Posso annullare la minificazione del CSS?

Puoi riformattarlo con un beautifier, ma i commenti eliminati non si recuperano. Conserva il file originale.

Devo minificare il CSS se uso gzip o Brotli?

Sì. Compressione e minificazione lavorano insieme per ottenere il trasferimento più leggero.

La minificazione cambia l'aspetto del sito?

Non dovrebbe. Vengono eliminati solo caratteri che i browser ignorano e i valori vengono abbreviati in forme equivalenti come #fff.

Strumenti correlati

• Minificatore HTML: Minifica l'HTML eliminando tutti i caratteri non necessari.
• Minificatore JavaScript: Minifica il JS eliminando tutti i caratteri non necessari.
• Convertitore di colori: Converti il tuo colore in molti altri formati.
• Calcolatore dimensione testo: Ottieni la dimensione di un testo in byte (B), kilobyte (KB) o megabyte (MB).
• Test HTTP/2: Controlla se un sito web usa o meno il nuovo protocollo HTTP/2.