Minificatore CSS

Cos'è la Minificazione CSS?

La minificazione CSS è il processo di rimozione di tutti i caratteri non necessari da un foglio di stile senza modificarne il comportamento. Significa eliminare spazi bianchi, interruzioni di riga, commenti e sintassi ridondante come i punto e virgola finali e le virgolette non necessarie. Il browser analizza il CSS minificato in modo identico all'originale. Il W3C CSS Syntax Module definisce la grammatica; gli spazi bianchi tra i token sono facoltativi, tranne dove separano identificatori. La minificazione sfrutta questo principio comprimendo tutto fino ai caratteri minimi necessari.

Un minificatore CSS online prende il tuo foglio di stile formattato e produce una versione compatta ottimizzata per la dimensione di trasferimento. Il risparmio tipico va dal 15% al 40% a seconda della quantità di spazi bianchi e commenti presenti nel sorgente. Per un foglio di stile da 50 KB, si traduce in 7–20 KB di byte in meno inviati sulla rete ad ogni caricamento di pagina. Combinata con la compressione gzip o Brotli sul server, la minificazione riduce ulteriormente la dimensione finale del trasferimento, perché l'output compresso di CSS già minificato è più piccolo rispetto alla compressione dell'originale formattato.

La minificazione è una fase standard nelle pipeline di build frontend. Strumenti come cssnano, clean-css ed esbuild eseguono la minificazione come parte del build. Ma durante lo sviluppo spesso hai bisogno di minificare un singolo snippet per testarlo, incorporare un blocco CSS critico inline, o verificare di quanto si riduce un foglio di stile prima di aggiungerlo a una configurazione di bundle. È qui che un minificatore CSS nel browser è utile: incolla il CSS, ottieni l'output minificato, copialo e vai avanti.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

Perché Usare Questo Minificatore CSS?

Incolla qualsiasi CSS e ottieni l'output minificato in pochi millisecondi. Nessuna configurazione di build tool, nessun comando CLI, nessun account richiesto.

Casi d'Uso del Minificatore CSS

Tecniche di Minificazione CSS

Un minificatore CSS applica diverse trasformazioni per ridurre le dimensioni del file. Ognuna prende di mira un tipo diverso di ridondanza nel sorgente. La tabella seguente elenca le principali tecniche e i loro risparmi tipici su un foglio di stile formattato:

Le percentuali di risparmio variano in base all'input. I file con molti commenti beneficiano maggiormente della rimozione dei commenti, mentre i file già compatti registrano guadagni minori. I vantaggi più affidabili derivano dalla rimozione degli spazi bianchi e dall'ottimizzazione delle shorthand. I minificatori avanzati come cssnano uniscono anche i selettori duplicati, comprimono le proprietà longhand in shorthand (margin-top + margin-right + margin-bottom + margin-left in margin) e rimuovono le dichiarazioni sovrascritte.

Minificazione vs. Compressione Gzip

Minificazione e compressione sono complementari, non intercambiabili. Operano su livelli diversi e si sommano l'una all'altra:

Esempi di Codice

Come minificare il CSS a livello di codice in diversi linguaggi e ambienti:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

Domande Frequenti