Formateur et minificateur CSS

Comment formater ou minifier du CSS

1. Collez votre feuille de style ou cliquez sur Ouvrir un fichier pour charger un fichier .css (10 Mo au maximum).
2. Choisissez l’Indentation (2 espaces, 4 espaces ou une tabulation) et, si vous le voulez, une Ligne vide entre les règles.
3. Cliquez sur Formater (indenter) pour obtenir un code lisible, ou sur Minifier pour la version la plus légère.
4. Pour la minification, laissez Fusionner les règles à la minification coché pour un meilleur gain, et Garder les commentaires /*! */ coché pour conserver les mentions de licence.
5. Copiez ou téléchargez le résultat. La ligne d’état indique la taille avant et après, en octets, ainsi que le pourcentage gagné.

S’il manque une accolade, l’outil s’arrête et vous indique la ligne de l’accolade « { » non fermée ou de l’accolade « } » en trop, au lieu de produire un résultat cassé.

Indenter : un CSS lisible et homogène

Formater (indenter) repose sur js-beautify, le formateur intégré à de nombreux éditeurs de code. Chaque déclaration passe sur sa propre ligne, le contenu des règles et des règles @ comme @media ou @supports est décalé, chaque sélecteur d’un groupe occupe sa ligne et un espace est ajouté après les deux-points de chaque déclaration. Les lignes vides existantes sont conservées (une seule d’affilée au maximum), si bien que les grandes sections de votre fichier restent visibles. Le formateur ne touche ni aux valeurs, ni à l’ordre des règles, ni au sens des sélecteurs : il ne modifie que les espaces.

C’est pratique pour lire le CSS minifié d’un site, relire une feuille de style générée par un outil ou remettre d’aplomb un fichier modifié par plusieurs personnes aux habitudes différentes.

Minifier : un CSS plus léger grâce à csso

Minifier utilise csso (CSS Optimizer), un minificateur structurel. En plus de supprimer les espaces et les commentaires, il réécrit la feuille de style sous une forme équivalente et plus courte :

• les couleurs sont raccourcies (#ff0000 devient red, #ffffff devient #fff) ;
• les unités et les zéros sont simplifiés (0px devient 0, 0.5em devient .5em) ;
• les déclarations en double disparaissent et les propriétés raccourcies sont fusionnées quand c’est sans risque ;
• avec Fusionner les règles à la minification, les règles aux déclarations identiques sont regroupées (a{color:red} b{color:red} devient a,b{color:red}) et les déclarations écrasées sont supprimées.

Cette restructuration est sûre pour une feuille de style classique, mais elle déplace des déclarations. Si votre CSS dépend d’un ordre de cascade très précis, par exemple pour des astuces propres à un navigateur, décochez l’option : csso se contentera alors de compresser chaque règle sur place.

Les commentaires sont supprimés, sauf les commentaires « importants » qui commencent par /*!, souvent utilisés pour les licences. Décochez Garder les commentaires /*! */ pour les retirer aussi.

Taille avant et après

La ligne d’état compare la taille de l’entrée et celle du résultat, en octets UTF-8. Un code indenté est en général plus gros que l’original ; un code minifié gagne souvent de 20 à 50 % sur un CSS écrit à la main. Les serveurs compressent aussi les fichiers avec gzip ou Brotli : le gain réel au transfert est donc plus faible que le chiffre affiché, mais la minification réduit malgré tout le temps d’analyse et la taille des fichiers en cache.