Minifier du CSS

Comment ça marche

Collez votre feuille de style dans le volet de gauche ; la version minifiée apparaît aussitôt à droite. L'outil retire d'abord tout ce dont le navigateur n'a pas besoin : retours à la ligne, retraits, derniers points-virgules et commentaires /* ... */. Il raccourcit ensuite les valeurs : #ffffff devient #fff, 0px devient 0, 0.50em devient .5em, bold devient 700. Le mode Complet va plus loin : deux règles .titre écrites l'une après l'autre deviennent une seule, des règles h2 et h3 aux déclarations identiques sont écrites une fois sous la forme h2,h3, une écriture longue comme margin: 0px 0px 16px 0px passe à 0 0 16px, et une propriété écrite deux fois dans la même règle perd la copie écrasée. Le code d'exemple de cette page passe ainsi de 265 à 147 octets ; la ligne de résultat donne le même bilan pour votre fichier. Les commentaires qui commencent par /*! sont conservés par défaut, car beaucoup de licences libres exigent que ce texte reste dans le fichier distribué. Si une partie du code est illisible, par exemple une accolade jamais fermée, le reste est quand même minifié ; ce passage est ignoré et la ligne de résultat vous prévient avec la ligne et la colonne du premier problème.

Cet outil est aussi connu sous le nom de minifier css, minifier du css en ligne, compresser css, css minify, minificateur css.

Qu'est-ce que Minification ?

Minifier, c'est retirer tous les caractères dont un programme n'a pas besoin sans changer son sens. Pour le CSS, cela veut dire retraits, retours à la ligne, commentaires et derniers points-virgules, plus des écritures plus courtes comme #fff à la place de #ffffff. Le but est un téléchargement plus léger : la feuille de style bloque le premier affichage de la page, plus elle est petite, plus vite le visiteur voit le contenu.

Qu'est-ce que csso ?

csso (CSS Optimizer) est le minificateur libre utilisé par cette page. Il découpe d'abord votre CSS en arbre, puis applique à cet arbre des transformations sûres : raccourcir les valeurs, fusionner les règles au même sélecteur, supprimer les déclarations écrasées. C'est ce qui le distingue d'un simple rechercher-remplacer : comme il comprend le code, il ne touche jamais au contenu des chaînes ni des url(...).

Complet ou prudent ?

En CSS, l'ordre compte : quand deux règles visent le même élément, la dernière l'emporte. Le mode Complet ne fusionne que là où cet ordre ne peut pas changer le résultat, mais il peut déplacer le contenu d'une règle plus haut dans le fichier. Sur un site récent avec une seule feuille de style, c'est sans risque et cela donne le fichier le plus léger.

Si plusieurs feuilles s'écrasent l'une l'autre sur votre page, ou si un ancien thème tient grâce à !important et à l'ordre des règles, choisissez Prudent : le nombre et l'ordre des règles restent exactement les mêmes, seul l'intérieur de chaque règle est compressé. Le gain est un peu plus faible, sans risque de changement d'affichage surprise. En cas de doute, essayez les deux et ouvrez une fois votre page avec le fichier minifié.

Ce que la minification ne fait pas

Minifier ne trouve pas les règles inutilisées. Une règle .ancienne-banniere qui ne vise rien sur votre page reste dans le fichier minifié, car l'outil ne voit que votre CSS, pas votre HTML. Pour repérer ces règles mortes, utilisez l'onglet Coverage des outils de développement de Chrome.

Si votre serveur envoie les fichiers compressés en gzip ou brotli, ce que font la plupart des hébergeurs d'office, la taille réellement transférée est bien plus petite que les chiffres affichés ici. La minification reste utile en plus, car la compression ne supprime pas les commentaires et ne réécrit pas les valeurs. Ne modifiez pas le fichier minifié : gardez la source indentée et minifiez à chaque mise en ligne. Pour revenir en arrière, l'outil Formater du CSS rouvre le fichier, mais les commentaires supprimés ne reviennent pas.

Questions fréquentes

Comment minifier un fichier CSS ?

Collez le CSS dans le volet de gauche de cette page. Le volet de droite l'affiche sur une ligne, sans espaces ni commentaires, avec des valeurs raccourcies. Copiez-le ou téléchargez-le en fichier .min.css ; la ligne de résultat indique la taille avant et après.

Minifier le CSS peut-il casser mon site ?

En mode Prudent, non : le nombre et l'ordre des règles restent les mêmes, seules les écritures raccourcissent. Le mode Complet fusionne des règles ; c'est sans souci pour un site à une seule feuille de style, mais un ancien thème où plusieurs fichiers s'écrasent peut changer d'apparence. Ouvrez une fois votre page avec le fichier minifié avant de le publier.

Pourquoi mon commentaire de licence n'a-t-il pas été supprimé ?

Les commentaires en /*! servent par convention à marquer un texte qu'une licence libre impose de garder dans le fichier distribué ; l'outil les conserve donc par défaut. Si le code est le vôtre, réglez l'option des commentaires de licence sur Supprimer.

Mon code est-il envoyé quelque part ?

Non. La minification est faite par une bibliothèque qui tourne dans votre navigateur ; votre code ne quitte pas cette page et n'est envoyé à aucun serveur.