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.

Loading...
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.

Autres outils de minification

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