Minifieur CSS
Minifiez du CSS avec CSSO, y compris l’optimisation structurelle qui fusionne les règles en double et les raccourcis, et voyez le gain après gzip.
Entrée
Résultat
Le résultat apparaîtra ici.La plupart des minifieurs CSS se contentent de retirer les espaces et les commentaires. CSSO restructure aussi : il fusionne les règles qui partagent des déclarations identiques, regroupe margin-top, margin-right, margin-bottom et margin-left en une seule propriété raccourcie margin, raccourcit padding: 8px 16px 8px 16px en 8px 16px, et réécrit #ffffff en #fff et 0px en 0. C’est le moteur derrière postcss-csso et gulp-csso. Collez une feuille de style pour voir quelle part le navigateur en utilise vraiment, mesurée brute et gzippée.
Comment ça marche
- La feuille de style est analysée une fois avant la minification, et une erreur de syntaxe est signalée avec sa ligne, car CSSO supprimerait sinon la règle défectueuse sans un mot.
- Désactiver la restructuration limite CSSO à des modifications locales sûres : espaces, commentaires, couleurs et nombres.
- Les commentaires /*! sont conservés par défaut pour les licences ; désactivez cette option pour supprimer tous les commentaires.
Où vont vos données
Nulle part. Cet outil s’exécute entièrement dans votre navigateur : le texte collé est traité par la page, jamais transmis à un serveur ni consigné dans un journal.
Cet outil est gratuit et ne demande aucun compte. Ses résultats n’existent que dans la page ouverte et ne sont enregistrés nulle part.
Ce que ça coûte
Cet outil est gratuit, sans connexion ni points.
Questions fréquentes
- La restructuration est-elle sûre ?
- Elle est conçue pour préserver le comportement : les règles ne sont fusionnées ou déplacées que lorsque CSSO peut démontrer que la cascade donne le même résultat. Les rares exceptions sont les feuilles de style qui reposent sur des hacks de navigateur ou sur le fait que des déclarations invalides soient ignorées d’une manière particulière. Si le CSS minifié s’affiche différemment, désactivez la restructuration et comparez.
- Pourquoi mon CSS a-t-il été refusé ?
- Une déclaration comme color red sans ses deux-points, ou un crochet laissé ouvert dans un sélecteur, est une erreur de syntaxe. Les navigateurs ignorent ces règles, et CSSO le ferait aussi, en silence. S’arrêter avec le numéro de ligne vous permet de corriger l’erreur au lieu de livrer une feuille de style à laquelle manque une règle que vous pensiez présente.
- Gère-t-il le CSS moderne comme l’imbrication, @layer et @container ?
- Les propriétés personnalisées, @layer et @container ne posent pas de problème. L’imbrication CSS native, si : l’analyseur de CSSO lui est antérieur et jetterait les règles imbriquées, cet outil s’arrête donc sur une erreur d’analyse. Aplatissez d’abord les règles imbriquées, ou laissez un outil de build comme Lightning CSS faire tout le travail.
- CSSO, cssnano ou Lightning CSS ?
- Sur des feuilles de style typiques, ils aboutissent à des tailles similaires. cssnano est un ensemble de plugins PostCSS ; Lightning CSS est écrit en Rust et gère aussi les préfixes constructeurs et la conversion de la syntaxe récente vers des formes plus anciennes ; le point fort de CSSO est la fusion structurelle. L’analyseur de CSSO n’a pas suivi la syntaxe récente comme l’imbrication native, ce qui compte si vos feuilles de style l’utilisent.
L’open source derrière
Cet outil fonctionne grâce à css/csso, publié sous licence MIT. Si vous avez besoin du même comportement dans votre propre programme, c’est cette bibliothèque qu’il faut utiliser.
css/cssoAussi appelé
- minifier css
- minifier css en ligne
- compresseur css
- csso en ligne
- compresser css
- minifieur css