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.

Pourquoi mon formateur a-t-il changé mes couleurs hex ou valeurs rgb ?

Un bon formateur CSS normalise les formes de couleur équivalentes vers un style cohérent — typiquement hex plus court quand possible, lettres minuscules et syntaxe rgb()/rgba()/hsl() cohérente. #FFFFFF devient #fff, rgb(255, 0, 0) devient #f00, et la syntaxe moderne avec séparateur slash rgb(255 0 0 / 0.5) peut être normalisée vers la forme héritée à virgule pour la compatibilité avec les navigateurs plus anciens. Aucune de ces modifications ne change la couleur rendue. Le hex à trois chiffres (#abc) ne fonctionne que lorsque chaque paire de chiffres hex est identique (#aabbcc), donc #336699 peut devenir #369 mais #336698 non. Le hex à quatre chiffres (#abcd) étend cela aux couleurs avec alpha (CSS Color Module 4). Si votre pipeline dépend d'un format spécifique, cet outil offre une option « Préserver les couleurs originales ».

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

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 avec un padding cohérent. Les sélecteurs d'attribut conservent leur guillemetage original. Les pseudo-classes et pseudo-éléments restent attachés à leur élément précédent sans espace (a:hover, ::before). Les sélecteurs universels qui peuvent être omis en toute sécurité sont supprimés : *.btn devient .btn, *#id devient #id. Les pseudo-classes :where() et :is() de Selectors Level 4 sont préservées telles qu'écrites parce que leur comportement de spécificité diffère (:where a une spécificité zéro, :is prend la spécificité la plus élevée de ses arguments).

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 économise 5-15% de la taille du CSS sur les bases de code héritées.

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). Les commentaires de licence en haut des fichiers commençant par /*! sont préservés par la plupart des minifieurs ; les commentaires /* réguliers */ sont typiquement supprimés pendant la minification mais conservés pendant le formatage. Les commentaires en fin de ligne inline (après un point-virgule) sont normalisés sur la même ligne, tandis que les commentaires en tête flottent sur leur propre ligne au-dessus de la règle. Si vous voyez des commentaires se déplacer 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. Ce formateur préserve la relation commentaire-règle en ancrant chaque commentaire au prochain token non-commentaire.

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
• Option pour étendre les sélecteurs et améliorer la lisibilité
• Surlignage syntaxique pour sélecteurs, propriétés, valeurs et couleurs
• Statistiques en temps réel (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