Minificateur CSS en ligne pour un site plus rapide

Introduction

Le CSS que l'on écrit et le CSS que l'on livre n'ont pas besoin de se ressembler. Pendant que vous travaillez sur une feuille de style, l'indentation, les lignes vides entre les règles et les commentaires qui expliquent pourquoi une règle existe rendent le code plus lisible et plus facile à maintenir. Rien de tout cela n'aide le navigateur à afficher la page : un navigateur n'a besoin que de sélecteurs, de propriétés et de valeurs valides, et se moque de l'espacement comme du fait qu'une règle soit expliquée. La minification retire tout ce qui n'existe que pour un lecteur humain, si bien que les mêmes règles atteignent le navigateur dans un fichier plus léger. Sur une feuille de style courte, le gain se compte en quelques kilo-octets ; sur une feuille accumulée au fil d'un projet plus long, avec plusieurs vagues de modifications et des commentaires restés là depuis les essais, cela peut représenter une vraie réduction de ce qui doit se télécharger avant que la page s'affiche correctement.

Comment cet outil minifie votre CSS

Coller du CSS et cliquer sur « Minifier » fait plus que supprimer des espaces :

• Les commentaires sont supprimés, à une exception près. Un commentaire écrit selon la convention répandue /*! ... */, ou contenant le mot @license ou @preserve, est conservé. C'est la façon standard de signaler qu'un commentaire est une mention de licence ou d'attribution et ne doit pas être retiré par les outils de build. Un commentaire explicatif ordinaire comme /* button hover state */ sera en revanche supprimé : s'il vous faut garder un en-tête de licence, écrivez-le sous l'une de ces deux formes.
• Les espaces, les retours à la ligne et les règles vides sont supprimés. Tout ce qui n'est pas nécessaire pour séparer un élément d'un autre est retiré, et un bloc de règle resté vide (un sélecteur comme .old-banner {} sans rien à l'intérieur) est supprimé entièrement au lieu d'être gardé comme poids mort.
• Certaines valeurs sont raccourcies sans changer de sens. Une couleur écrite #ffffff devient #fff, les zéros superflus sont rognés (0.500 devient .5, une valeur comme -0px devient 0), et les mots-clés normal et bold employés pour font-weight sont convertis en leurs équivalents numériques, 400 et 700.
• Les propriétés personnalisées CSS et les expressions calc() sont protégées. Les variables définies avec le préfixe -- (par exemple --brand-color) et les expressions calc() reposent sur une ponctuation et un espacement qui se casseraient si on les compressait comme une valeur ordinaire : elles sont donc mises de côté avant les étapes sur les espaces et sur les zéros, puis remises en place intactes à la fin.

Ce qu'il faut savoir avant de minifier

Cet outil ne réordonne pas, ne fusionne pas et ne dédoublonne pas vos règles : le résultat comporte les mêmes sélecteurs dans le même ordre, simplement compactés. Si vous cherchez quelque chose qui retire le CSS que votre page n'utilise pas réellement, il s'agit d'un autre type d'outil qu'un minificateur. Comme la minification repose ici sur le retrait des espaces et le raccourcissement des valeurs plutôt que sur une relecture de la structure des règles, le contenu imbriqué, comme les règles situées dans une requête @media, reste à sa place, compacté de la même façon que le reste.

Il n'y a pas de limite de taille distincte comme pour les outils de ce site qui traitent des fichiers importés : ici vous collez du texte au lieu d'importer un fichier, le plafond pratique est donc ce que votre navigateur gère confortablement dans un champ de texte, ce qui couvre n'importe quelle feuille de style sur laquelle vous travailleriez réellement à la main. Pour une feuille de style vraiment énorme, comme le paquet complet d'un framework et non les styles d'une page ou d'un projet, une étape de build intégrée à votre processus de déploiement convient généralement mieux que de la coller dans un outil en ligne.

La minification ne change pas ici ce que fait votre CSS, mais il vaut quand même la peine de jeter un œil à une page utilisant le résultat minifié avant de la publier ou de la rendre : la même habitude que de relire n'importe quoi d'autre avant de l'envoyer.

Quand c'est le bon outil

• Préparer un projet de classe ou un site personnel en vue de sa publication. Un fichier CSS plus léger se charge plus vite, et cela compte davantage qu'on ne le croit sur le réseau d'un établissement ou sur un téléphone en données mobiles.
• Voir à quoi ressemble vraiment du code en production. Afficher le source d'un vrai site montre souvent un CSS qui ne ressemble en rien à celui qu'on écrit en cours : minifier sa propre feuille de style et la comparer côte à côte avec l'original est un moyen concret de comprendre pourquoi, et cela se marie naturellement avec CSS Beautifier pour le trajet inverse.
• Réduire le poids de la page avant une échéance ou sur un hébergement à bande passante limitée. Certains espaces web fournis par les établissements ont des quotas de stockage ou de transfert serrés ; minifier les ressources avant de les importer est un moyen rapide de rester en dessous.

Si vous êtes encore en train de modifier une feuille de style, continuez à travailler sur la version lisible et ne minifiez qu'une fois, juste avant la publication : minifier est une dernière étape, pas un format de travail. Pour le tableau complet des raisons pour lesquelles la taille des fichiers compte dans la vitesse d'affichage, voir ce guide du compresseur CSS pour des sites plus rapides.

Exemple

Un élève termine un site personnel pour un cours de création web : des feuilles de style séparées pour la mise en page, le thème de couleurs et les règles adaptatives, chacune avec des commentaires restés des différentes pistes essayées en route. Avant de rendre le projet, il les réunit et colle le CSS dans cet outil. Ensuite, la page s'affiche et se comporte exactement comme avant, mais le fichier livré avec elle est plus léger et ne contient plus les commentaires d'essais écrits pendant la construction.

Questions fréquentes

La minification va-t-elle changer l'apparence de ma page ?

Non. Les règles, les sélecteurs et les valeurs sont conservés — seuls changent la mise en forme, les commentaires et une poignée de valeurs raccourcies (comme les couleurs hexadécimales et les zéros superflus), dont aucune n'influe sur l'affichage.

Que deviennent les commentaires de mon CSS ?

Les commentaires ordinaires sont supprimés. Un commentaire écrit /*! ... */, ou contenant @license ou @preserve, est conservé — c'est la convention standard pour signaler une mention de licence ou d'attribution.

Gère-t-il les variables CSS et calc() ?

Oui. Les propriétés personnalisées et les expressions calc() sont protégées pendant la minification au lieu d'être compressées comme des valeurs ordinaires.

Y a-t-il une limite de taille ?

Aucune limite fixe comme pour les outils de ce site qui traitent des fichiers importés : ici vous collez du texte, vous n'importez pas de fichier. Les collages très volumineux (le paquet complet d'une bibliothèque, par exemple) se traitent mieux avec un outil de build intégré à votre processus de déploiement.

Mon code est-il enregistré quelque part ?

Non. Le CSS collé est traité pour produire le résultat minifié et n'est ni stocké sous forme de fichier ni conservé ensuite ; seul l'usage de l'outil est enregistré, pas le code lui-même.

Puis-je minifier plusieurs feuilles de style à la fois ?

Collez et minifiez un bloc de CSS à la fois. Réunissez d'abord les fichiers s'il vous faut les minifier ensemble, ou répétez l'opération pour chacun.

Quels outils liés puis-je utiliser ?

Utilisez CSS Beautifier pour faire l'inverse et rendre un CSS minifié à nouveau lisible, ou HTML Minifier et JavaScript Beautifier pour d'autres tâches sur le code.