Formatez une feuille de styles avec un sélecteur par ligne, ou minifiez-la en retirant les espaces et les commentaires que le navigateur ignore. Les deux opérations sont des réécritures de texte dans cette page : rien n’est envoyé, et chaînes de caractères, contenu des url() et propriétés personnalisées reviennent intacts.
Fonctionne localement dans votre navigateurCollez une feuille de styles et cliquez sur Formater pour obtenir un sélecteur par ligne avec une indentation par tabulation, ou sur Minifier pour retirer les espaces et les commentaires que le navigateur ignore de toute façon. Les deux opérations réécrivent du texte dans cette page : le CSS n’est envoyé nulle part et il n’y a rien à installer ni de compte à créer.
La réécriture reste volontairement prudente. Les valeurs sont reprises telles qu’elles sont écrites —chaînes de caractères, contenu des url() comme les URI data:, sélecteurs d’attribut, séquences d’échappement et propriétés personnalisées ne sont jamais remis en forme— et rien n’est ajouté : ni point-virgule manquant, ni préfixe constructeur, ni règle fusionnée. Vous récupérez votre propre feuille de styles, simplement disposée autrement.
Formater écrit un sélecteur par ligne, indente chaque niveau d’imbrication avec une tabulation et place chaque déclaration sur sa propre ligne à l’intérieur de sélecteur { … }. Les listes de sélecteurs gardent leurs virgules, les règles @ telles que @media et @supports gardent leurs blocs et une règle vide reste vide. Une déclaration saisie sans point-virgule n’en reçoit pas, et plusieurs point-virgules consécutifs sont réduits à un seul.
C’est une passe sur les espaces, pas sur le style : les lignes longues ne sont pas coupées à une colonne, les déclarations et les règles ne sont pas réordonnées, les déclarations en double et les raccourcis ne sont pas fusionnés, et aucun préfixe constructeur n’est ajouté. Une feuille indentée avec huit espaces et une autre coupée à la main ressortent avec la même indentation par tabulation.
Minifier ramène chaque suite d’espaces à un seul espace là où le CSS en a besoin et la supprime là où il n’en faut pas : .a > .b devient .a>.b et red !important devient red!important, tandis que calc(100% - 20px), 1px solid #000 et la liste de valeurs de rgba(0, 0, 0, .5) conservent les espaces et les virgules porteurs de sens. Les tabulations et les retours à la ligne disparaissent partout, sauf dans les chaînes de caractères et le contenu des url().
Le gain ne vient que des espaces, des commentaires et des point-virgules répétés. Un fichier déjà minifié ne bouge presque pas : la feuille de Bootstrap 3.3.7, qui pèse 121 Ko, perd ici 333 octets, faute de matière à retirer. Un fichier indenté à la main avec des bandeaux de commentaires gagne quelques points de plus. Renommer les classes, fusionner les règles et supprimer les sélecteurs inutilisés ne font pas partie de cet outil.
Supprimer le commentaire est décochée par défaut. Cochée, elle retire les blocs /* … */ avant le reste du travail, y compris les bandeaux de licence /*! … */ — le seul cas où Minifier modifie un fichier qu’une licence demande de conserver. Propriétés en minuscules est cochée par défaut et ne concerne que les noms de propriété : COLOR:RED devient color:RED. Les valeurs gardent leur casse, donc url(X.PNG) reste intact, et les noms des règles @ ne sont pas touchés non plus.
Les propriétés personnalisées échappent volontairement à cette mise en minuscules. --MainColor et var(--MainColor) désignent la même variable tant que l’orthographe correspond : réécrire la définition en --maincolor casserait toutes les références. Disposition horizontale assemble la sortie formatée pour que chaque règle tienne sur une seule ligne, avec un retour après l’accolade fermante ; Minifier ignore ce réglage.
Il n’y a pas d’analyseur CSS derrière les deux boutons : rien n’est validé ni réparé. Une accolade fermante manquante ressort telle qu’elle a été saisie, une accolade en trop est conservée et un texte qui n’est pas du CSS —HTML, JavaScript, prose— revient inchangé. Une feuille qu’un navigateur accepte déjà sera acceptée ici ; une feuille cassée revient cassée, au même endroit.
Rien n’est envoyé : l’outil tient dans un script livré avec la page, aucune requête ne part pendant le travail et il continue de fonctionner sans connexion. La taille reste la limite pratique. Une feuille de 1,2 Mo est réécrite en 130 ms environ, mais la coloration du résultat à l’écran coûte à peu près 1,7 s, et c’est ce temps que vous attendez.