Aller au contenu principal
LibraTool logoLibraTool

Embellisseur CSS — outil gratuit

Mettez en forme du CSS minifié avec une indentation cohérente, ou minifiez-le. Tri alphabétique des propriétés en option pour des diffs prévisibles.

Fonctionne hors ligne une fois chargé

Déposez un fichier ici ou cliquez pour parcourir

CSS · traité sur votre appareil

ou appuyez sur Ctrl+V pour coller depuis le presse-papiers

Parcourir les fichiers
CSS formaté
La sortie apparaîtra ici…

Utilisations courantes

  • Déboguer le CSS de productionAffichez le CSS minifié des sites de production au format lisible pour trouver et inverser les styles d'ingénierie.
  • Appliquer le style CSS d'équipeExécutez le CSS soumis par l'équipe via un beautifier cohérent afin que les diffs soient sur le contenu, pas la mise en forme.
  • Formater le CSS avec préfixe de fournisseurLe CSS avec préfixe de fournisseur (sortie autoprefixer) a souvent beaucoup de variantes -webkit-, -moz-, -ms-. Formatez pour inspecter.
  • Apprendre du CSS professionnelÉtudiez le CSS des systèmes de conception célèbres en formatant leur sortie compilée.
  • Formater le CSS pour les rapports de bugsLors du dépôt de bugs CSS, le CSS formaté est beaucoup plus facile à lire et à comprendre pour les examinateurs.

Comment ça marche

Cet outil met en forme le CSS avec un analyseur récursif écrit à la main intégré directement dans la page — sans bibliothèque tierce, sans appel serveur. L'analyseur parcourt votre CSS caractère par caractère, gérant correctement les chaînes entre guillemets, les valeurs url(), les at-rules imbriquées et les commentaires qui perturberaient des approches plus simples basées sur des expressions régulières.

  1. 1
    Tokenisation au niveau caractère
    La fonction walkCss analyse l'entrée brute un caractère à la fois, suivant l'état des guillemets et la profondeur des parenthèses afin que les points-virgules ou accolades dans url(), les valeurs de chaîne, ou les commentaires ne soient jamais confondus avec des délimiteurs structurels.
  2. 2
    Séparation des blocs et des déclarations
    Quand le scanner trouve une accolade ouvrante de premier niveau, il extrait le prélude (le sélecteur ou le mot-clé de l'at-rule) et traite récursivement le corps du bloc — qui peut lui-même contenir des règles imbriquées (@media, @supports, imbrication CSS native) traitées à une profondeur de récursion plus grande.
  3. 3
    Tri des propriétés et indentation
    Les déclarations au sein de chaque bloc sont collectées en un ensemble, puis optionnellement triées alphabétiquement par nom de propriété avant d'être écrites avec la largeur d'indentation choisie (2 ou 4 espaces). Le mode minifier saute entièrement les espaces et retire les commentaires.
  4. 4
    Résultat instantané dans le navigateur
    Les résultats apparaissent pendant que vous tapez via un hook useMemo — rien n'est envoyé nulle part. Le CSS mis en forme ou minifié peut être copié dans le presse-papiers ou téléchargé en fichier .css, et le panneau affiche la différence de taille par rapport à l'original.

Outils associés

🌐

Embellisseur et minifieur HTML

Mettez en forme ou minifiez le HTML avec une indentation d'imbrication correcte. Préserve le contenu dans les blocs <pre>, <script>, <style>.

Essayer
🗄️

Formateur et embellisseur SQL

Mettez en forme les requêtes SQL avec une indentation correcte, une casse des mots-clés configurable et des sauts de ligne sur les principales clauses. Fonctionne avec tous les dialectes SQL.

Essayer
🗜️

Minifieur et embellisseur CSS

Minifiez le CSS pour réduire la taille du fichier ou embellissez le CSS minifié pour la lisibilité. Instantané, dans votre navigateur.

Essayer

Questions fréquemment posées