Minifier CSS en ligne — Minificateur CSS

Minifiez du CSS instantanément avec notre outil en ligne gratuit. Compressez vos feuilles de style pour la production ou concaténez plusieurs fichiers. Traitement dans le navigateur.

Chargement…

Minification CSS

Minifiez du CSS en ligne avec CSSO. Compressez vos feuilles de style pour la production.

Fonctionnalités

Réduisez la taille de votre code CSS en supprimant les espaces, commentaires et caractères inutiles.

Minifier

Réduisez la taille de votre code CSS en supprimant les espaces, commentaires et caractères inutiles.

Package utilisé

CSSO

v5.0.5

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 source

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

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

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

CSS minifié

.container{margin:20px;padding:10px;background-color:#fff}.button{color:#000;font-size:16px;border:1px solid #ccc}.card{display:flex;flex-direction:column;gap:12px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12)}

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

Voir les options d’indentation Beautify →

Comment déminifier du CSS en ligne

La déminification CSS restaure un formatage lisible aux feuilles de style compressées. Collez votre CSS minifié dans l'outil pour ajouter indentation, retours à la ligne et organiser les sélecteurs. Utile pour déboguer des styles en production, relire des frameworks CSS tiers ou comprendre des styles fournisseurs.

Beautifier CSS — Formater vos feuilles de style

Notre beautifier CSS applique des règles de formatage cohérentes — indentation standardisée, ordre des propriétés et sélecteurs clairs. Que votre CSS vienne d'un build, d'un minifier ou d'un autre développeur, la beautification le rend propre et maintenable.

Concaténer des fichiers CSS

Combinez plusieurs fichiers CSS en une seule feuille de style pour réduire les requêtes HTTP et simplifier le déploiement. Utilisez la concaténation pour fusionner les fichiers, puis minifiez éventuellement le résultat. Pratique pour les projets sans préprocesseur ou bundler CSS.