Formateur et minificateur CSS

Qu’est-ce qu’un formateur CSS ?#

Un formateur CSS fait deux choses qui ont l’air opposées mais résolvent le même problème : il déploie du CSS compact et généré par machine dans quelque chose qu’une personne peut lire, et il comprime une feuille de style tentaculaire jusqu’aux octets qui comptent vraiment. La raison pour laquelle vous en saisissez un est presque toujours que le CSS est arrivé dans la mauvaise forme pour ce que vous faites — un outil de construction a déversé une seule ligne minifiée et vous devez inspecter une règle précise, ou un fichier rédigé à la main a gonflé et vous voulez l’amincir avant la mise en production.

Cette page gère les deux sens avec de vrais moteurs. Formater utilise css_beautify de js-beautify, qui réindente les sélecteurs et les déclarations de façon prévisible. Compresser utilise CSSO, qui est un véritable optimiseur structurel plutôt qu’un retireur d’espaces : il fusionne les règles adjacentes aux déclarations identiques, replie les propriétés longues en propriétés raccourcies, retire les déclarations surchargées, et seulement alors condense les espaces restants. Le résultat est typiquement plus petit que ce que produit un compacteur naïf, et sémantiquement équivalent à l’entrée. Cette distinction compte quand vous vous souciez de chaque octet sur le réseau.

Mode d’emploi#

1. Collez votre CSS dans le panneau CSS à gauche. Exemple charge une courte feuille de style si vous voulez d’abord observer le comportement.
2. Choisissez une Indentation dans la barre d’outils : 2, 4 ou tabulation. Deux espaces est la convention moderne courante ; quatre est plus agréable pour lire des fichiers denses.
3. Cliquez sur une action :
   • Formater — réindenter et ajouter des sauts de ligne via js-beautify. Les sélecteurs vont sur leur propre ligne, les déclarations s’alignent à l’intérieur des accolades.
   • Compresser — exécuter l’optimisation structurelle de CSSO, puis émettre une sortie compacte. Les commentaires sont retirés, les règles en double fusionnent, les propriétés longues se replient en raccourcis quand c’est sûr.
4. Lisez le résultat dans le panneau Sortie et utilisez Copier pour le récupérer. Effacer réinitialise les deux panneaux.

Si votre entrée comporte une règle non terminée ou une déclaration cassée, la barre d’état signale l’erreur au lieu de deviner.

Principales fonctionnalités#

• Formater et compresser sont des moteurs différents. Embellir, c’est js-beautify ; compresser, c’est CSSO. Chacun fait le seul travail qu’il maîtrise, plutôt qu’une routine compromis qui tenterait les deux.
• Vraie optimisation à la compression. CSSO restructure la feuille de style — fusionnant .a { color: red } .b { color: red } en une règle partagée, repliant margin: 0 0 0 0 en margin: 0, retirant une déclaration qu’une règle ultérieure surcharge déjà. La suppression des espaces est la dernière étape, pas la seule.
• Trois styles d’indentation. 2 espaces, 4 espaces ou tabulations, basculés par un seul menu.
• Côte à côte, prêt à copier. Entrée éditable, sortie en lecture seule avec un bouton de copie en un clic.
• Strictement côté client. CSSO et js-beautify sont embarqués dans la page et chargés seulement quand vous ouvrez cet outil. Votre feuille de style est traitée dans le navigateur et jamais téléversée.

Exemple détaillé#

Une petite feuille de style où deux règles répètent du travail et où une propriété longue pourrait être plus courte :

Entrée :

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

Cliquez sur Formater avec 2 espaces :

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

La répétition saute aux yeux — exactement à quoi sert un formateur. Cliquez maintenant sur Compresser sur la même entrée et CSSO la réécrit structurellement :

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

Trois choses se sont produites à la fois. Le padding à quatre valeurs s’est réduit à une seule parce que les quatre côtés étaient égaux ; les quatre propriétés longues margin-* se sont repliées dans le raccourci margin ; et les deux règles color: #ff0000 ont fusionné en une seule règle avec un sélecteur groupé (et l’hexa est devenu le red plus court). Un simple retireur d’espaces aurait conservé chaque octet de redondance — seul un optimiseur restructurant trouve ces gains.

FAQ#

La compression changera-t-elle l’apparence de ma page ?#

Non, pas quand l’entrée est du CSS valide. CSSO n’applique que des transformations qui préservent la cascade : fusionner des règles aux déclarations identiques, replier les propriétés longues dont les valeurs sont toutes identiques, abandonner les déclarations qu’une règle plus spécifique ou ultérieure surcharge. Si une transformation serait ambiguë, elle est sautée. Formater est purement cosmétique et ne change jamais le sens.

La compression conserve-t-elle mes commentaires ?#

Non. Les commentaires sont retirés pendant la compression, y compris les bannières façon /* !important */. Si vous avez besoin qu’un en-tête de licence ou un marqueur de construction survive, conservez votre source commentée et réinsérez la bannière dans votre pipeline de construction après la compression.

Pourquoi la sortie compressée est-elle parfois plus grande que mon entrée ?#

Presque toujours parce que l’entrée était déjà minifiée. CSSO doit quand même l’analyser et la réémettre, et sur une entrée déjà compacte et optimisée il n’y a plus rien à gagner — la sortie fait essentiellement la même taille. Donnez-lui du CSS rédigé à la main ou déployé et les gains sont réels.

Mon CSS est-il envoyé à un serveur ?#

Non. Les deux moteurs s’exécutent dans votre navigateur. Les bibliothèques sont chargées à la demande depuis le propre bundle de la page, donc il n’y a aucune requête réseau emportant votre feuille de style quelque part.