Minificateur CSS

Qu'est-ce que la minification CSS ?

La minification CSS est le processus qui consiste à supprimer tous les caractères inutiles d'une feuille de style sans modifier son comportement. Cela inclut la suppression des espaces, des sauts de ligne, des commentaires et de la syntaxe redondante comme les points-virgules en fin de règle et les guillemets superflus. Le navigateur parse le CSS minifié de façon identique à l'original. Le W3C CSS Syntax Module définit la grammaire ; les espaces entre les tokens sont optionnels sauf lorsqu'ils séparent des identifiants. La minification exploite cela en réduisant tout au minimum de caractères requis.

Un minificateur CSS en ligne prend votre feuille de style formatée et produit une version compacte optimisée pour le transfert. Les économies typiques vont de 15 % à 40 % selon la quantité d'espaces et de commentaires dans le source. Pour une feuille de style de 50 Ko, cela représente 7 à 20 Ko d'octets en moins envoyés sur le réseau à chaque chargement de page. Combinée avec la compression gzip ou Brotli côté serveur, la minification réduit davantage la taille finale du transfert, car la sortie compressée d'un CSS déjà minifié est plus petite que la compression de l'original formaté.

La minification est une étape standard des pipelines de build frontend. Des outils comme cssnano, clean-css et esbuild l'exécutent dans le cadre du build. Mais pendant le développement, vous avez souvent besoin de minifier un seul extrait pour le tester, d'intégrer un bloc de CSS critique en ligne, ou de vérifier de combien une feuille de style se réduit avant de l'ajouter à une configuration de bundle. C'est là qu'un minificateur CSS dans le navigateur est utile : collez le CSS, récupérez la sortie minifiée, copiez-la et passez à la suite.

/* 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}

Pourquoi utiliser ce minificateur CSS ?

Collez n'importe quel CSS et obtenez une sortie minifiée en quelques millisecondes. Aucune configuration d'outil de build, aucune commande CLI, aucun compte requis.

Cas d'utilisation du minificateur CSS

Techniques de minification CSS

Un minificateur CSS applique plusieurs transformations pour réduire la taille du fichier. Chacune cible un type différent de redondance dans le source. Le tableau ci-dessous liste les principales techniques et leurs économies typiques sur une feuille de style formatée :

Les pourcentages d'économies varient selon l'entrée. Les fichiers très commentés bénéficient davantage de la suppression des commentaires, tandis que les fichiers déjà compacts voient des gains plus faibles. Les gains les plus fiables proviennent de la suppression des espaces et de l'optimisation des shorthands. Les minificateurs avancés comme cssnano fusionnent également les sélecteurs en doublon, réduisent les propriétés longhand en shorthands (margin-top + margin-right + margin-bottom + margin-left en margin) et suppriment les déclarations écrasées.

Minification vs. compression gzip

La minification et la compression sont complémentaires, pas interchangeables. Elles opèrent à des couches différentes et se combinent :

Exemples de code

Comment minifier du CSS par programmation dans différents langages et environnements :

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}"

Questions fréquentes