Minifier CSS en ligne – Compresser ou embellir votre CSS
Allégez vos feuilles de style ou rendez un CSS minifié de nouveau lisible. Le minificateur supprime commentaires et espaces sans casser calc(), les chaînes ni les sélecteurs ; l’embellisseur indente proprement le code.
Collez votre CSS et choisissez Minifier ou Embellir. Minifier supprime les commentaires (vous pouvez garder les mentions de licence /*!), les espaces, les espaces autour des accolades, deux-points et virgules, ainsi que le dernier point-virgule de chaque bloc, et affiche le gain. Embellir place chaque déclaration indentée sur sa propre ligne.
Comment utiliser : Minificateur et embellisseur CSS
- Collez votre CSS.
- Choisissez Minifier ou Embellir.
- Décidez si vous gardez les commentaires de licence /*!.
- Vérifiez la différence de taille.
- Copiez ou téléchargez le résultat.
Ce que supprime la minification CSS
La minification efface tout ce que le navigateur ignore : commentaires, indentation, retours à la ligne, espaces autour de { } : ; , > et ~, et le dernier point-virgule avant chaque accolade fermante. Les règles ne changent pas : la page reste strictement identique.
| Avant | Après |
|---|---|
| `.card > h2 , .card + .card {` | `.card>h2,.card+.card{` |
| `margin : 0 auto ;` | `margin:0 auto;` |
| `calc( 1rem + 2vw )` | `calc(1rem + 2vw)` |
| `/ commentaire /` | supprimé |
Une minification sûre
Certains espaces comptent. Dans calc(), les espaces autour de + et − sont obligatoires : ils sont conservés. Les chaînes entre guillemets, comme les valeurs de content ou les noms de police, sont copiées sans changement. Une espace avant les deux-points dans un sélecteur (`a :hover`) change le sens, c’est pourquoi seules les espaces après les deux-points sont supprimées. Les commentaires de licence commençant par /*! sont gardés par défaut, car beaucoup de licences libres les exigent.
Embellir un CSS minifié
Vous avez un fichier minifié issu d’un thème ou d’un framework et devez le lire ou le modifier ? Passez à Embellir : chaque règle commence sur une nouvelle ligne, les déclarations sont indentées et chaque sélecteur d’une liste a sa propre ligne. Les media queries et autres règles @ sont indentées d’un niveau supplémentaire.
Quel gain ?
Une feuille de style écrite à la main diminue en général de 15 à 35 %. Avec gzip ou Brotli et la suppression des règles inutilisées, le CSS minifié se charge plus vite et bloque moins longtemps l’affichage. Le CSS bloque le rendu : chaque kilo-octet du chemin critique pèse sur le Largest Contentful Paint.
Gardez la source
Conservez toujours la feuille de style lisible dans votre gestion de versions et minifiez une copie lors de la mise en ligne, pour ne jamais modifier un fichier minifié à la main.
Outils associés
Minifiez le HTML avec le Minificateur HTML, convertissez les pixels avec Convertisseur px en rem et créez le CSS des ombres, dégradés et coins avec le Générateur de box-shadow CSS, le Générateur de dégradé CSS et le Générateur de border-radius. Tout fonctionne dans votre navigateur.
Ces outils gratuits peuvent aussi vous être utiles : Formateur JSON, Générateur de mot de passe et Testeur de regex.
Questions fréquentes
Comment minifier du CSS ?
Collez votre CSS dans l’outil avec Minifier sélectionné et copiez le résultat.
La minification peut-elle casser mon CSS ?
Non. Les espaces importants, comme dans calc(), sont conservés et les chaînes restent intactes.
Comment déminifier du CSS ?
Passez à Embellir pour indenter le code et ajouter des retours à la ligne.
Faut-il garder les commentaires de licence ?
Oui pour du code open source. Ceux qui commencent par /*! sont gardés par défaut.
Mon CSS est-il envoyé ?
Non. Tout est traité dans votre navigateur.
Dernière mise à jour: