Déminifier du CSS en ligne
Déposez une feuille de style compressée et relisez-la correctement. Les sélecteurs retrouvent leur ligne, une déclaration par ligne, les blocs et les media queries indentés comme vous les écririez à la main.
Pourquoi le CSS de production tient sur une ligne
Les feuilles de style sont minifiées pour la même raison que les scripts : le CSS bloque le rendu, donc chaque octet économisé se voit directement dans la vitesse d'affichage d'une page. cssnano, Lightning CSS et les optimiseurs intégrés à Sass et PostCSS retirent les espaces et les commentaires, raccourcissent les valeurs de couleur, fusionnent les règles en double et suppriment le dernier point-virgule de chaque bloc. Les frameworks utilitaires rendent le résultat encore plus dense, puisqu'une feuille Tailwind compilée peut contenir des milliers de toutes petites règles avec presque rien entre elles.
Relire la cascade
La principale raison d'embellir une feuille de style, c'est de comprendre pourquoi une règle s'applique ou ne s'applique pas. Une fois que chaque sélecteur occupe sa propre ligne avec ses déclarations indentées en dessous, vous pouvez suivre la cascade correctement : retrouver toutes les règles qui visent un élément, comparer leur spécificité, voir laquelle arrive en dernier, et repérer le important égaré qui écrase votre travail depuis le début. Les media queries et leur contenu redeviennent des blocs visibles, ce qui rend le comportement responsive bien plus facile à suivre que dans un fichier compressé.
Le CSS moderne est pris en charge
Le formateur comprend le CSS actuel et pas un sous-ensemble hérité. Propriétés personnalisées, expressions calc et clamp, raccourcis grid et flexbox, container queries, règles imbriquées, layers, blocs supports et keyframes sont tous formatés correctement. Les longues listes de sélecteurs sont réparties sur plusieurs lignes pour redevenir lisibles, et les commentaires qui ont survécu au build sont conservés. Si le fichier mélange du CSS standard et des propriétés préfixées, les deux sont gardés tels quels, simplement présentés clairement.
Un conseil pratique pour les frameworks compilés
Quand vous embellissez une feuille Tailwind ou Bootstrap compilée, le fichier devient très vite très long, plusieurs dizaines de milliers de lignes est un résultat normal. Activez les numéros de ligne, puis utilisez la fonction de recherche de votre navigateur sur la classe ou la propriété qui vous intéresse plutôt que de faire défiler. Et si votre objectif est de réduire le fichier plutôt que de le lire, souvenez-vous que le vrai travail se fait dans la configuration du build, puisque les règles inutilisées ont été générées avant même que la minification n'intervienne.
Questions fréquentes
Puis-je déminifier une feuille Tailwind compilée ?
Oui, et c'est l'un des usages les plus fréquents de cette page. Attendez-vous à un résultat très long, puisque le framework génère une règle par classe utilitaire. Activer les numéros de ligne et utiliser la recherche du navigateur est la façon pratique de s'y déplacer.
Les commentaires sont-ils restaurés ?
Seulement ceux qui ont survécu. La plupart des minifieurs suppriment tous les commentaires sauf les mentions légales, et une fois supprimés ils sont irrécupérables. Le formateur conserve ce qui est encore dans le fichier et le présente proprement.
Est-ce que ça marche sur du SCSS ou du Less ?
Cette page vise le CSS standard, c'est-à-dire ce que les navigateurs téléchargent réellement. Les sources de préprocesseur avec variables, mixins et syntaxe propre à SCSS ou Less ne sont pas l'entrée prévue, même si le CSS imbriqué standard est bien géré.