Minifier & Déminifier CSS en ligne — Beautifier CSS gratuit

Minifiez, déminifiez et beautifiez votre code CSS instantanément avec notre outil gratuit en ligne. Compressez vos feuilles de style, restaurez un formatage lisible ou concaténez plusieurs fichiers. Tout le traitement se fait dans votre navigateur.

Compression

Remove comments

Beautify Options (Beautify only)

Indentation

Indent type

Partager cet outil:

Entrée

Loading editor...

Sortie

Loading editor...

Minification CSS

Minifiez, déminifiez et beautifiez votre code CSS avec CSSO. Outil gratuit en ligne pour optimiser, compresser et formater vos feuilles de style CSS.

Fonctionnalités

Notre outil CSS offre trois fonctionnalités principales :

Minifier

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

Déminifier

Restaurez la lisibilité de votre code CSS minifié en ajoutant des espaces et des retours à la ligne.

Beautifier

Formatez et beautifiez votre code CSS avec une indentation personnalisable (2 ou 4 espaces, ou tabs).

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

Options de Beautify

Options pour formater et beautifier le CSS (uniquement pour Beautify, pas pour Minify/Unminify)

Taille d'indentation

Définit le nombre d'espaces ou de tabs pour l'indentation lors du Beautify

Code original

.header{color:red;padding:10px}

Avec 2 espaces

.header {
  color: red;
  padding: 10px;
}

Avec 4 espaces

.header {
    color: red;
    padding: 10px;
}

Différence

L'indentation est personnalisable uniquement pour Beautify. Unminify utilise toujours 2 espaces.

Type d'indentation

Utilise des espaces ou des tabs pour l'indentation lors du Beautify

Code original

.header{color:red;padding:10px}

Avec espaces

.header {
  color: red;
  padding: 10px;
}

Avec tabs

.header {
	color: red;
	padding: 10px;
}

Différence

Les espaces sont plus standards, les tabs peuvent être préférés selon vos conventions de code.

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.

Questions fréquentes

Tout ce qu'il faut savoir sur la minification, déminification et beautification CSS

Pourquoi minifier le CSS ?

La minification réduit la taille des fichiers CSS en supprimant espaces, commentaires et code redondant. Des feuilles plus légères chargent plus vite et consomment moins de bande passante. Beaucoup de sites gagnent 20–40 % en taille sans changer le rendu des styles.

Comment déminifier du CSS ?

Collez votre CSS minifié dans la zone d'entrée et cliquez sur Déminifier. L'outil restaure l'indentation et les retours à la ligne pour que vous puissiez lire et modifier le code. Utile pour déboguer du CSS de production ou inspecter des styles tiers.

À quoi sert le beautifier CSS ?

Le beautifier formate votre CSS avec une indentation, des espaces et des retours à la ligne cohérents. Il ne modifie pas le comportement, seulement la présentation. Utilisez-le pour nettoyer des styles issus de builds, minifiers ou autres outils avant édition.

Puis-je concaténer plusieurs fichiers CSS ?

Oui. Utilisez la fonction concaténer pour fusionner plusieurs fichiers CSS en un seul. Vous pouvez ensuite minifier le résultat. Pratique pour les projets sans préprocesseur ou bundler qui veulent moins de requêtes HTTP.

Mon CSS est-il traité de façon sécurisée ?

Tout le traitement se fait dans votre navigateur. Rien n'est envoyé sur nos serveurs. Vos feuilles de style restent sur votre appareil et restent privées.

Combien mon CSS sera-t-il réduit ?

Les gains typiques sont de 20–40 % selon les commentaires, espaces et redondances. Les options agressives peuvent réduire encore. L'outil affiche la taille exacte du résultat après traitement.

La minification change-t-elle le rendu des styles ?

Non. La minification ne fait que supprimer les caractères inutiles et appliquer des optimisations sûres. Sélecteurs, propriétés et valeurs sont conservés, donc la mise en page et l'apparence restent identiques.

Quelles optimisations CSS sont appliquées ?

Les options incluent la suppression des commentaires, le raccourcissement des couleurs, la fusion des règles dupliquées et la minification des sélecteurs. Vous pouvez choisir une compression conservatrice, normale ou agressive selon le compromis taille/compatibilité.

Autres outils de minification