Pourquoi minifier du CSS ?

La minification CSS réduit la taille des fichiers, améliore les temps de chargement et optimise les performances web. Cela peut réduire la taille de 30 à 70% en moyenne.

Comment fonctionne la minification CSS ?

La minification supprime les espaces, les commentaires et les caractères inutiles du code CSS, tout en préservant sa fonctionnalité. Le code reste valide mais est plus compact.

Puis-je déminifier du code CSS ?

Oui, notre outil peut déminifier du code CSS minifié pour le rendre plus lisible et facile à maintenir.

Le code est-il traité de manière sécurisée ?

Absolument. Tout le traitement se fait dans votre navigateur. Aucune donnée n'est envoyée vers nos serveurs, garantissant une confidentialité totale.

Minifier & Déminifier votre CSS en ligne — Outil CSS gratuit

Minifiez, déminifiez et beautifiez votre code CSS instantanément pour améliorer les performances de votre site web. Notre minificateur CSS gratuit en ligne supprime les espaces inutiles, optimise les sélecteurs et fusionne les règles dupliquées. Traitement sécurisé et privé, directement dans votre navigateur.

Minification CSS

Utilisation de CSSO pour optimiser et compresser les feuilles de style CSS

Package utilisé

CSSO

v7.0.0

CSSO (CSS Optimizer) est un outil puissant pour optimiser les fichiers CSS en supprimant les redondances et en compressant le code.

Exemple de base

CSS d'entrée

.container {
  margin: 20px;
  padding: 10px;
  background-color: #ffffff;
}

.button {
  color: #000000;
  font-size: 16px;
  border: 1px solid #cccccc;
}

CSS minifié

.container{margin:20px;padding:10px;background-color:#fff}.button{color:#000;font-size:16px;border:1px solid #ccc}

Options de minification

Niveau de compression

Contrôle l'agressivité de la compression CSS

ConservativeConservateur - Optimisations de base uniquement

NormalNormal - Équilibre entre taille et compatibilité

AggressiveAgressif - Optimisations avancées, peut affecter la compatibilité

Supprimer les commentaires

Supprime tous les commentaires CSS du code

Comparaison avec/sans l'option :

Code original

/* Header styles */
.header {
    background: #fff;
    padding: 20px;
}

/* Navigation */
.nav { display: flex; }

Avec removeComments: true

.header{background:#fff;padding:20px}.nav{display:flex}

Avec removeComments: false

/* Header styles */.header{background:#fff;padding:20px}/* Navigation */.nav{display:flex}

Différence

Les commentaires CSS sont supprimés

Convertir les couleurs

Convertit les couleurs vers leur format le plus court

Comparaison avec/sans l'option :

Code original

.button {
    background: #ff0000;
    color: rgb(255, 255, 255);
    border: 1px solid hsl(0, 100%, 50%);
}

Avec convertColors: true

.button{background:red;color:#fff;border:1px solid red}

Avec convertColors: false

.button{background:#ff0000;color:rgb(255,255,255);border:1px solid hsl(0,100%,50%)}

Différence

Les couleurs sont converties au format le plus court

Fusionner les règles

Fusionne les règles CSS identiques et adjacentes

Comparaison avec/sans l'option :

Code original

.header {
    background: #fff;
    padding: 20px;
}
.header {
    margin: 10px;
}

Avec mergeRules: true

.header{background:#fff;padding:20px;margin:10px}

Avec mergeRules: false

.header{background:#fff;padding:20px}.header{margin:10px}

Différence

Les règles CSS identiques sont fusionnées

Minifier les sélecteurs

Optimise les sélecteurs CSS pour réduire leur taille

Comparaison avec/sans l'option :

Code original

div.container > ul li:first-child {
    color: red;
}

div.container > ul li:last-child {
    color: blue;
}

Avec minifySelectors: true

div.container>ul li:first-child{color:red}div.container>ul li:last-child{color:blue}

Avec minifySelectors: false

div.container > ul li:first-child{color:red}div.container > ul li:last-child{color:blue}

Différence

Les sélecteurs CSS sont optimisés

Autres outils de minification

Minifier JavaScript

Minifier JSON

Sérialiser PHP