CSS Beautifier gratuit
Ce CSS beautifier gratuit transforme les feuilles de style minifiées ou désordonnées en code lisible avec une déclaration par ligne, un espace après chaque deux-points et des règles indentées. Les blocs imbriqués comme les media queries sont indentés d'un niveau supplémentaire. Les commentaires, les chaînes et les valeurs url() sont conservés exactement comme écrits. Il convient aux développeurs qui ont besoin de lire ou modifier une feuille de style reçue minifiée.
CSS Beautifier
Generators and Converters
À propos de cet outil
Le CSS minifié est écrit pour les navigateurs, pas pour les humains : chaque règle se trouve sur une seule ligne et trouver une couleur ou une marge signifie scanner des milliers de caractères. La beautification restaure la mise en page qui rend une feuille de style facile à examiner.
L'outil lit la feuille de style caractère par caractère, donc les points-virgules à l'intérieur des adresses de données url() et les accolades à l'intérieur des chaînes ne le confondent pas. Chaque sélecteur commence un nouveau bloc, chaque déclaration obtient sa propre ligne avec un seul espace après le deux-points, et les règles à l'intérieur des blocs media ou supports sont indentées d'un niveau plus profond. Les commentaires restent où ils étaient. Vous pouvez choisir deux espaces, quatre espaces ou des tabulations.
Le formatage ne change pas ce que fait le CSS et ne corrige pas les erreurs : une accolade manquante apparaît comme une indentation qui ne revient jamais. Associez-le au CSS minifier quand vous voulez compresser le fichier à nouveau avant la publication. Rien de ce que vous collez n'est stocké.
Questions fréquentes
La beautification change-t-elle le fonctionnement de mon CSS ?
Non. Seul l'espace blanc entre les règles et les déclarations change, donc le navigateur lit exactement les mêmes instructions. Les chaînes, les commentaires et les valeurs url() sont copiés inchangés, ce qui protège également les images de données en ligne.
Peut-il formater SCSS ou LESS ?
Le CSS simple est la cible. Les blocs SCSS et LESS imbriqués simples s'indenteront généralement correctement car les accolades sont traitées de la même manière, mais les fonctionnalités telles que les mixins avec une syntaxe inhabituelle ne sont pas comprises, donc vérifiez le résultat avant de vous y fier.
Pourquoi une accolade fermante ne revient-elle pas à gauche ?
Le formateur suit vos accolades exactement. Si une règle manque une accolade fermante, l'indentation reste profonde jusqu'à la fin du fichier. C'est un moyen rapide de trouver la règle cassée, mais vous devez ajouter l'accolade manquante vous-même.
Comment le rendre petit à nouveau ?
Conservez la version beautifiée pendant que vous travaillez, puis exécutez-la via le CSS minifier avant de la publier. Le minifier supprime les commentaires et l'espace blanc à nouveau, vous obtenez une source lisible pour l'édition et un fichier compact pour les visiteurs.