Minificateur CSS

Allégez vos feuilles de style

Le CSS bloque le rendu : le navigateur n’affiche pas la page tant qu’il n’a pas téléchargé et analysé les feuilles de style du <head>. La taille du CSS influe donc directement sur la vitesse d’affichage de votre page. Le minificateur CSS supprime les commentaires, les espaces, les retours à la ligne et les autres caractères dont les navigateurs n’ont pas besoin, et affiche le nombre de caractères avant et après.

Les styles fonctionnent exactement pareil ; seul le fichier est plus petit. C’est idéal pour le CSS personnalisé des thèmes WordPress, Shopify ou AltumCode, pour les petits projets sans outil de build et pour le CSS critique en ligne.

Gardez l’original lisible pour les futures modifications et publiez la copie minifiée.

Comment utiliser le minificateur CSS

1. Collez votre CSS.
2. Envoyez pour minifier.
3. Comparez le nombre de caractères avant et après.
4. Copiez le CSS minifié dans votre site ou votre fichier.

Exemples

Styles d’un bouton

Entrée :

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

.btn:hover {
  opacity: 0.80;
}

Résultat :

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

Le commentaire et les espaces disparaissent, #ffffff est raccourci en #fff, 0px devient 0, la valeur répétée de margin est fusionnée et 0.80 devient .8.

Usages courants

• Minifier le CSS personnalisé ajouté depuis le panneau d’un thème ou d’un CMS.
• Alléger les feuilles de style de petits sites et de pages de destination.
• Préparer du CSS critique en ligne pour un premier affichage plus rapide.
• Compresser le CSS de modèles d’e-mail HTML.
• Réduire la feuille de style d’un site sans processus de build, comme un petit site statique ou une page de destination.
• Préparer du CSS critique à placer dans le <head> d’une page.
• Réduire la taille du CSS personnalisé collé dans un CMS ou un constructeur de sites.

Conseils et points à connaître

• Supprimez d’abord les règles inutilisées ; effacer du CSS fait gagner plus que le minifier.
• Gardez dans le fichier source les commentaires nécessaires (comme les mentions de licence) et vérifiez s’ils sont conservés.
• Testez la page après publication, surtout si votre CSS utilise des astuces peu courantes.
• Minifiez aussi votre HTML et vos scripts avec le minificateur HTML et le minificateur JS. Vérifiez les valeurs de couleur avec le convertisseur de couleurs.

Cas particuliers et limites

• Le résultat tient sur une seule longue ligne, ce qui rend les erreurs difficiles à trouver. Gardez votre fichier lisible et minifiez une copie.
• Les commentaires sont supprimés, y compris ceux de licence. Remettez les mentions que vous êtes tenu de conserver.
• Le CSS non valide peut être supprimé ou modifié. Si quelque chose paraît bizarre après la minification, cherchez dans l’original une accolade ou un point-virgule manquant.

Questions fréquentes

Que fait un minificateur CSS ?

Il retire du CSS les caractères superflus, comme les espaces et les commentaires, sans changer le fonctionnement des styles.

Le CSS minifié est-il plus rapide ?

Oui, les fichiers plus petits se téléchargent et s’analysent plus vite, ce qui aide la page à s’afficher plus tôt.

Puis-je « déminifier » du CSS ?

Vous pouvez le reformater avec un embellisseur, mais les commentaires supprimés ne reviennent pas. Gardez votre fichier original.

Dois-je minifier le CSS si j’utilise gzip ou Brotli ?

Oui. La compression et la minification se complètent pour obtenir la plus petite taille de transfert.

La minification change-t-elle l’apparence de mon site ?

Elle ne devrait pas. Seuls les caractères que les navigateurs ignorent sont supprimés, et les valeurs sont raccourcies en formes équivalentes comme #fff.

Outils associés

• Minificateur HTML: Minifiez votre HTML en supprimant tous les caractères inutiles.
• Minificateur JS: Minifiez votre JS en supprimant tous les caractères inutiles.
• Convertisseur de couleurs: Convertissez votre couleur dans plusieurs formats.
• Calculateur de taille de texte: Obtenez la taille d’un texte en octets (B), kilo-octets (KB) ou méga-octets (MB).
• Vérificateur HTTP/2: Vérifiez si un site web utilise le protocole HTTP/2.