Comment utiliser le formateur CSS
- Collez votre CSS dans la zone de saisie : une feuille de style minifiée, un extrait copié depuis les outils de développement ou un fichier entier.
- Cliquez sur Embellir pour placer chaque déclaration sur sa propre ligne avec une indentation cohérente.
- Cliquez sur Minifier pour supprimer les commentaires et les espaces ; l'outil indique combien d'octets vous avez économisés.
- Copiez le résultat dans votre projet.
Tout le traitement se fait dans votre navigateur, et vos feuilles de style ne sont jamais envoyées ni stockées.
Pourquoi formater ou minifier du CSS ?
Le CSS (Cascading Style Sheets) décrit comment le HTML est affiché. Une feuille de style est une liste de règles, chacune composée d'un sélecteur et d'un bloc de déclarations (propriété: valeur;). Les navigateurs ignorent la plupart des espaces, si bien que les mêmes règles peuvent être écrites de façon lisible ou compressées sur une seule ligne.
Embellir est utile quand vous devez lire ou modifier du CSS arrivé minifié, par exemple un thème tiers ou une feuille de style que vous déboguez sur un site en ligne. Minifier sert à la production : supprimer les commentaires, les retours à la ligne, l'indentation et le dernier point-virgule de chaque bloc allège les fichiers, qui se téléchargent donc plus vite. La minification complète la compression gzip ou Brotli côté serveur, sans la remplacer.
Voici la même règle dans les deux formes :
.btn-primary:hover,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-primary:hover,
.btn-primary:focus {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}Erreurs CSS courantes et comment les corriger
Les navigateurs ne s'arrêtent pas à une erreur CSS. Ils ignorent la déclaration ou la règle invalide et continuent, c'est pourquoi une faute de frappe empêche souvent un seul style de s'appliquer, « en silence ». Un CSS formaté rend ces problèmes bien plus faciles à repérer.
Point-virgule manquant. La déclaration qui suit est absorbée dans la valeur précédente et les deux deviennent invalides :
.title {
color: #222
margin-bottom: 1rem;
}Ajoutez le point-virgule après #222. Dans la sortie embellie, deux propriétés qui se retrouvent sur la même ligne logique sont un indice révélateur.
Accolades non équilibrées. Un } manquant fait que les règles suivantes deviennent une partie du bloc précédent. Si l'indentation saute soudain d'un niveau après le formatage, cherchez l'accolade manquante juste au-dessus.
Unités manquantes. Hormis le zéro, les longueurs ont besoin d'une unité : margin: 10; est invalide, margin: 10px; est correct. Les valeurs sans unité ne sont valides que pour les propriétés qui acceptent des nombres simples, comme line-height, opacity ou z-index.
Sélecteurs invalides dans une liste. Si un seul sélecteur d'une liste séparée par des virgules est invalide, toute la règle est abandonnée. Cela arrive souvent avec les pseudo-éléments propres à un navigateur :
/* Si l'un des sélecteurs n'est pas pris en charge, aucun ne reçoit le style */
input::-webkit-input-placeholder, input::-moz-placeholder { color: #888; }Écrivez des règles séparées, ou utilisez le standard ::placeholder.
La minification est-elle sûre ?
La suppression des espaces est sûre dans presque tous les cas, mais quelques détails comptent :
| Situation | À savoir |
|---|---|
calc() | Les espaces autour de + et de - sont obligatoires. calc(100% - 2rem) fonctionne ; calc(100%-2rem) non. Un minificateur correct les conserve. |
| Commentaires de licence | Les commentaires commençant par /*! sont conservés par convention par de nombreux minificateurs, pour les licences. Vérifiez la sortie si vous comptez là-dessus. |
Chaînes et content | Les espaces à l'intérieur des chaînes entre guillemets font partie de la valeur et doivent être conservés. |
| Hacks | Les anciens hacks pour navigateurs qui dépendent d'une syntaxe exacte peuvent ne pas survivre à la minification. |
Conseils et bonnes pratiques
- Gardez la source lisible dans le contrôle de version et générez les fichiers minifiés pendant le build, idéalement avec des source maps pour le débogage.
- Regroupez les déclarations apparentées de façon cohérente (mise en page, modèle de boîte, typographie, visuels) pour que les règles se parcourent facilement.
- Utilisez les propriétés personnalisées CSS (
--brand: #0b5ed7;) plutôt que de répéter les valeurs de couleur. - Pour les blocs
<style>intégrés au balisage, le Formateur HTML peut être plus pratique.
Questions fréquentes
Minifier le CSS change-t-il l'apparence de mon site ?
Non. Un minificateur correct ne supprime que les caractères dont le navigateur n'a pas besoin, comme les commentaires et les espaces en dehors des chaînes. La page affichée doit être identique.
De combien mon CSS sera-t-il réduit ?
Cela dépend de la façon dont le fichier a été écrit. Les feuilles de style très commentées et généreusement indentées diminuent davantage que celles déjà compactes. L'outil affiche la taille exacte avant et après pour votre fichier.
Peut-on « déminifier » du CSS ?
Oui, c'est ce que fait la fonction Embellir. L'indentation et les retours à la ligne sont restaurés, mais les commentaires supprimés pendant la minification ne peuvent pas être récupérés.
Prend-il en charge SCSS ou Less ?
L'outil est conçu pour le CSS standard. Le SCSS simple se formate souvent de façon acceptable, mais des fonctionnalités comme les règles imbriquées avec des mixins ou les opérations Less peuvent ne pas être gérées correctement.
Mis à jour