Formateur & Minificateur CSS

Formateur CSS - Formater et embellir du CSS en ligne

Un outil en ligne puissant pour formater, embellir et minifier du CSS. Il offre un surlignage syntaxique, une indentation personnalisable et l'expansion des sélecteurs. Parfait pour les développeurs, designers et toute personne qui manipule des feuilles de style.

Quelle est la différence entre formater et minifier le CSS ?

Formater (aussi appelé embellir ou imprimer joliment) réorganise votre feuille de styles pour la lisibilité humaine : une déclaration par ligne, indentation cohérente, lignes vides entre les blocs de règles et deux-points alignés. Minifier fait l'inverse — il supprime chaque octet dont le navigateur n'a pas besoin : espaces blancs, commentaires, le dernier point-virgule de chaque bloc, guillemets redondants et préfixes vendor inutilisés. Une feuille de styles typique de la taille de Bootstrap se réduit d'environ 180 Ko formatée à 140 Ko minifiée, et à environ 22 Ko après gzip par-dessus. Toujours commiter la version non minifiée dans le contrôle de source et minifier dans le cadre de votre pipeline de build — déboguer du CSS minifié dans les DevTools est pénible sans source maps.

De combien mon CSS sera-t-il plus petit après minification, et quelle économie gzip puis-je espérer ?

Le CSS écrit à la main se réduit généralement de 20-40% à la minification — l'économie vient de la suppression de l'indentation, des retours à la ligne, des commentaires et du dernier point-virgule de chaque bloc. Un CSS déjà compact (ou déjà minifié) économise bien moins. Après avoir cliqué sur Minifier, cet outil affiche un véritable rapport avant/après : votre taille originale, la taille minifiée, les octets et le pourcentage exacts économisés, ainsi qu'une taille gzip estimée. Le chiffre gzip est le plus important en production car les serveurs servent presque toujours le CSS compressé : un texte comme le CSS est très répétitif, donc gzip (ou Brotli) coupe généralement 70-80% supplémentaires de la taille minifiée, ce qui signifie qu'une feuille de style minifiée de 140 Ko voyage souvent en environ 20-30 Ko sur le réseau. Considérez le chiffre gzip ici comme une estimation issue d'une heuristique de répétition, et non un résultat exact à l'octet — le niveau de compression de votre serveur et le choix Brotli ou gzip le feront légèrement varier. À retenir : minifiez pour réduire le coût d'analyse et la taille source, et activez toujours gzip/Brotli sur le serveur pour l'essentiel des économies de transfert.

Cet outil change-t-il mes couleurs hex ou valeurs rgb ?

Non. Cet outil préserve vos couleurs exactement telles qu'écrites — #FFFFFF reste #FFFFFF, rgb(255, 0, 0) reste identique, et la syntaxe moderne avec slash rgb(255 0 0 / 0.5) est conservée à l'identique. Ici, formater ne fait que réaligner les espaces, l'indentation et les retours à la ligne ; minifier ne fait que retirer les octets dont le navigateur n'a pas besoin. Aucune des deux passes ne réécrit les tokens de couleur, donc vos valeurs de marque et tout formatage sensible aux diffs survivent intacts. Si vous voulez précisément une normalisation des couleurs (raccourcir #aabbcc en #abc, mettre l'hex en minuscules ou convertir rgb() en hex), utilisez un optimiseur dédié comme PostCSS avec cssnano ou csso dans votre pipeline de build — ils effectuent des optimisations que cet outil vous laisse intentionnellement décider. Rappelez-vous que l'hex à trois chiffres (#abc) n'équivaut à #aabbcc que lorsque chaque paire est identique, donc #336699 peut se raccourcir en #369 mais #336698 non.

Comment les sélecteurs CSS sont-ils formatés dans la sortie ?

Lors du Formatage, chaque sélecteur séparé par virgule va sur sa propre ligne, donc un sélecteur composé long comme h1, h2, h3, h4, h5, h6 est facile à scanner et éditer. Les combinateurs (>, +, ~) et les espaces descendants sont normalisés en espaces simples cohérents par le moteur Prettier. Les sélecteurs d'attribut conservent leur guillemetage original, et les pseudo-classes et pseudo-éléments restent attachés à leur élément précédent sans espace (a:hover, ::before). Vos sélecteurs ne sont jamais réécrits selon la spécificité : l'outil ne supprime pas les sélecteurs universels ni n'altère ce qu'un sélecteur cible, donc :where() et :is() de Selectors Level 4 sont préservés exactement tels qu'écrits (rappelez-vous que :where a une spécificité zéro tandis que :is prend la spécificité la plus élevée de ses arguments). Minifier conserve les mêmes sélecteurs et ne retire que les espaces autour d'eux.

Qu'arrive-t-il aux préfixes vendor comme -webkit- ou -moz- pendant le formatage ?

Le formatage seul n'ajoute ni ne supprime jamais les préfixes vendor — il réaligne seulement les espaces. L'outil de préfixes intégré est une passe optionnelle séparée. La recommandation moderne selon caniuse.com est de maintenir un CSS ciblant votre matrice de navigateurs supportés et de laisser Autoprefixer ou PostCSS injecter les bons préfixes au moment du build à partir de la configuration Browserslist. À partir de 2026, la plupart des préfixes -webkit- pour les transforms, transitions, animations, gradients et flexbox sont inutiles sur tout navigateur sorti après 2020 ; les préfixes -ms- étaient spécifiques à IE 10-11 et Edge Legacy, tous deux en fin de vie. Supprimer les préfixes inutilisés peut économiser 5-15% de la taille du CSS sur les bases de code héritées. Cet outil préserve chaque préfixe que vous écrivez (Formater comme Minifier laissent les déclarations -webkit-, -moz-, -ms- et -o- exactement telles qu'écrites) ; pour réellement ajouter ou retirer des préfixes selon une cible Browserslist, exécutez Autoprefixer ou PostCSS dans votre étape de build.

Devrais-je utiliser des propriétés raccourcies comme margin: 10px 20px ou longues comme margin-top, margin-right ?

Le raccourci gagne en octets et lisibilité quand vous définissez l'ensemble complet ensemble : margin: 10px 20px fait 18 octets contre 53 pour les quatre déclarations longues. Mais le raccourci a un piège caché : il RÉINITIALISE chaque longue qu'il couvre, même celles que vous n'avez pas mentionnées. Écrire background: red plus tard dans la cascade efface background-image, background-repeat, background-position — tous définis à leurs valeurs initiales. Cela rend le raccourci dangereux dans le CSS de composants où une règle parente peut avoir défini des longues individuelles. Comme règle : utilisez le raccourci dans les resets et couches de base où vous partez intentionnellement de zéro ; utilisez les longues dans les surcharges de composants où vous voulez changer un axe sans toucher aux autres. Ce formateur ne convertit pas entre raccourci et long — il préserve votre intention auteur.

Comment le formateur gère-t-il les fonctionnalités CSS modernes comme l'imbrication, les propriétés personnalisées et les container queries ?

L'imbrication CSS (devenue Baseline 2023, sans préprocesseur nécessaire) est formatée avec chaque règle imbriquée indentée d'un niveau sous son parent, et le sélecteur & préservé textuellement. Les propriétés personnalisées (--ma-couleur: bleu) et les références var() sont laissées intactes — même les valeurs inhabituelles comme calc(var(--x) + 10px) gardent leur espace blanc interne, puisque les valeurs de propriétés personnalisées CSS préservent les tokens. Les container queries (@container) reçoivent le même formatage de bloc que les queries @media et @supports, incluant toute condition container-name. Les couches de cascade (@layer base, components, utilities) préservent leur ordre de déclaration, qui est sémantiquement significatif — réordonner les couches changerait la cascade. Les enregistrements @property CSS Houdini et les blocs @scope sont reconnus et formatés avec une indentation appropriée.

Pourquoi mes commentaires disparaissent-ils ou sont-ils déplacés pendant le formatage ?

Le CSS standard ne supporte que les commentaires /* ... */ — // est invalide en CSS pur (c'est une fonctionnalité Sass/Less). Cet outil suit la convention de la plupart des minifieurs : lors de la Minification, les commentaires /* réguliers */ sont supprimés pour économiser des octets, mais les commentaires de licence commençant par /*! sont conservés à l'identique afin que les en-têtes d'attribution et de licence survivent en production. Lors du Formatage, tous les commentaires sont préservés et conservés sur leur propre ligne au-dessus ou à côté de la règle qu'ils décrivent. Si vous voyez des commentaires se comporter de manière inattendue, vérifiez si votre source inclut des template literals CSS-in-JS ou de la syntaxe Sass — ceux-ci nécessitent un outillage différent. Comme le formatage ne fait que réorganiser les espaces, formater deux fois la même entrée produit une sortie identique.

Quelle est la différence entre les fonctions calc(), clamp() et min()/max() ?

Les quatre sont des fonctions mathématiques définies dans CSS Values and Units Module 4, acceptées dans tout contexte de longueur, pourcentage, nombre ou angle. calc(100% - 20px) effectue de l'arithmétique entre unités que le navigateur ne peut pas pré-résoudre. min(50vw, 800px) retourne la plus petite de deux valeurs — utile pour plafonner les largeurs fluides. max(16px, 1rem) retourne la plus grande — utile pour les minimums d'accessibilité sur les valeurs sensibles au zoom utilisateur. clamp(16px, 4vw, 32px) est la combinaison tueuse : elle retourne la valeur du milieu quand le deuxième argument est entre le premier (minimum) et le troisième (maximum), la rendant la façon canonique d'écrire une typographie fluide sans media queries. L'imbrication est permise : calc(min(100%, 1200px) - 2rem). Le formateur préserve l'espace blanc dans ces fonctions parce que les opérateurs requièrent des espaces des deux côtés selon la spec.

Fonctionnalités clés

• Formater du CSS avec une indentation personnalisable (2, 4, 8 espaces ou tabulations)
• Minifier le CSS pour réduire la taille en production
• Rapport d'économie de minification : taille originale vs minifiée, octets économisés, pourcentage de réduction et taille gzip estimée
• Préserve les chaînes, url() et URI data: intacts lors de la minification
• Conserve les requêtes @media, @supports et @container valides
• Conserve les commentaires de licence /*! tout en retirant les commentaires normaux à la minification
• Surlignage syntaxique pour sélecteurs, propriétés, valeurs et couleurs
• Statistiques de la sortie (caractères, lignes, taille)
• Copier le CSS formaté dans le presse-papiers
• Télécharger le CSS formaté au format .css
• Téléverser des fichiers CSS à formater
• Mode sombre pris en charge
• Aucune limite de taille de fichier
• Traitement 100 % côté client - votre code ne quitte jamais le navigateur
• Fonctionne hors ligne après le premier chargement
• Interface responsive adaptée au mobile
• Préserve les préfixes navigateurs et les fonctionnalités CSS modernes