Minifier ou formater
Le mode Minifier supprime les espaces inutiles et optimise le CSS. Le mode Formater ajoute une indentation et des sauts de ligne pour faciliter la lecture d’une feuille de style compressée.
Minifier et formater du CSS
Réduisez la taille d’un fichier CSS ou ajoutez une indentation pour le lire plus facilement. Comparez le résultat à votre feuille de style d’origine.
Mode de traitement
Autres actions
Outils associés
Vos statistiques
0
Traitements
0
Octets économisés
0%
Compression moyenne
Aucun
Mode favori
0
Copies
100%
Score d’activité
Comment minifier et formater du CSS
Impossible de charger la vidéo. Vous pouvez suivre les instructions ci-dessous.
La vidéo présente l’interface en anglais.
Choisissez Minifier pour obtenir du CSS compact, ou Formater pour rendre du CSS compressé plus lisible. Le mode Formater ne restitue pas les commentaires déjà supprimés. Gardez une copie de la feuille de style d’origine avant de la remplacer.
Options de minification et de formatage CSS
Optimisation de la structure
CSSO peut raccourcir les valeurs, supprimer les règles vides et fusionner les structures répétées. Le gain dépend de votre feuille de style et de l’activation de la restructuration des règles.
Ouvrir un fichier CSS
Utilisez Importer pour ouvrir un fichier .css, ou déposez-le dans la zone de saisie. Son contenu sera traité selon le mode choisi.
En afficher 3 de plusAfficher moins
Avertissements de syntaxe
Le mode Minifier indique la ligne et la colonne des erreurs détectées par l’analyseur. Consultez ces messages avant d’utiliser le CSS obtenu.
Commentaires et restructuration
Conservez les commentaires marqués /*! lorsqu’ils contiennent une licence ou des notes importantes. Désactivez la restructuration pour éviter de fusionner ou de réordonner les règles.
Traitement automatique
Lorsque l’option Traitement automatique est activée, le résultat se met à jour pendant la saisie. Si le réglage est visible, vous pouvez le désactiver et lancer le traitement avec Minifier ou Formater. Sur téléphone, ces deux commandes restent accessibles, mais le réglage Traitement automatique n’est pas affiché.
Questions fréquentes
Qu’est-ce que la minification CSS ?
La minification CSS supprime les espaces et commentaires inutiles. Elle peut aussi raccourcir des valeurs, par exemple #ffffff en #fff. Cet outil utilise CSSO, qui optimise également les règles et déclarations répétées lorsque la restructuration est activée.
De combien la minification réduit-elle mon fichier CSS ?
Le gain dépend du code d’origine. Une feuille de style contenant des règles répétées ou beaucoup de commentaires peut être davantage réduite qu’un fichier déjà compressé. Dans une fenêtre de plus de 768 pixels de large, les tailles d’origine et de sortie s’affichent sous les éditeurs. Elles sont masquées dans une fenêtre plus étroite. La taille gzip est mesurée dans ce navigateur. Le serveur peut donc envoyer un volume différent.
Minifier le CSS améliore-t-il la vitesse du site ou son référencement ?
Réduire une feuille de style peut diminuer le volume de CSS téléchargé par vos visiteurs. L’effet sur le chargement dépend aussi du reste de la page, du cache et de la manière dont le serveur fournit les fichiers. La minification seule ne garantit ni de meilleurs Core Web Vitals ni un meilleur classement dans les recherches.
Quelle est la différence entre minifier et formater du CSS ?
Le mode Minifier produit du CSS compact pour réduire la taille du fichier. Le mode Formater ajoute des sauts de ligne et une indentation pour faciliter la lecture et la modification. Formater du CSS compressé ne restitue pas les commentaires ni la mise en forme d’origine qui ont été supprimés.
En afficher 4 de plusAfficher moins
Comment rendre du CSS minifié plus lisible ?
Choisissez Formater, collez le CSS et sélectionnez une indentation de 2 ou 4 espaces. Le code formaté apparaît dans l’éditeur de sortie. Vous pouvez ensuite le copier ou le télécharger.
La minification peut-elle modifier le comportement de mon CSS ?
Examinez et testez le résultat sur votre site avant de remplacer l’original. La restructuration peut fusionner ou réordonner les règles. Désactivez-la si leur ordre est important et consultez les avertissements de syntaxe de l’analyseur.
L’outil peut-il détecter les erreurs dans mon CSS ?
Le mode Minifier affiche la ligne et la colonne des erreurs de syntaxe détectées par l’analyseur. Celui-ci peut parfois poursuivre malgré un code mal formé. Le formatage ne constitue donc pas une validation complète du CSS. Vérifiez le résultat dans les navigateurs pris en charge par votre site.
Dois-je envoyer mon CSS à un serveur ?
Non. La commande Importer lit un fichier local dans l’éditeur, puis le CSS est traité dans votre navigateur. La feuille de style n’est pas envoyée à un serveur de conversion.
Détails techniques
Minification avec CSSO
Le mode Minifier charge CSSO et analyse la feuille de style avec css-tree. L’optimiseur supprime les espaces inutiles et peut raccourcir les valeurs, supprimer les règles vides et fusionner des structures. Les deux réglages contrôlent la conservation des commentaires importants et la restructuration des règles.
Traitement dans le navigateur
Les moteurs de minification et de formatage se chargent à la première utilisation du mode correspondant. Ils traitent le CSS dans votre navigateur. La commande Importer lit le texte d’un fichier local sans envoyer la feuille de style à un serveur de conversion.
En afficher 4 de plusAfficher moins
Résultat et comparaison des tailles
Les tailles d’origine et de sortie sont mesurées en octets de texte. Si CompressionStream est disponible, l’outil mesure aussi la taille du résultat compressé avec gzip dans le navigateur. La commande Télécharger crée un fichier .css dont le nom correspond au mode choisi.
Diagnostics de l’analyseur
Le mode Minifier recueille les erreurs de css-tree et affiche leur ligne et leur colonne. L’analyseur peut poursuivre malgré un code mal formé. Obtenir un résultat ne prouve donc pas que chaque déclaration est valide ou fonctionne comme prévu.
Formatage CSS
Le mode Formater utilise @projectwallace/format-css avec l’indentation choisie de 2 ou 4 espaces. Les deux modes signalent aussi les erreurs de syntaxe détectées par css-tree. Le formatage ne restitue pas les commentaires supprimés et ne garantit pas la validité de chaque déclaration CSS.
Statistiques locales d’utilisation
Les totaux de traitement, les octets économisés et l’utilisation des modes comptabilisent les opérations lancées avec Minifier ou Formater. Les mises à jour automatiques ne s’ajoutent pas à ces totaux. Les copies du résultat sont comptées séparément. Ces statistiques sont enregistrées dans IndexedDB si le stockage du navigateur est disponible. Le score d’activité combine les taux de compression et de copie avec les modes utilisés. Il ne mesure ni la validité du CSS ni la vitesse de chargement.