Minifie le CSS en supprimant commentaires et espaces superflus et en fusionnant les règles en double, ou fait l'inverse en le remettant en forme à raison d'une déclaration par ligne. Les deux sens s'appuient sur de vrais analyseurs (csso et js-beautify), si bien qu'un texte ressemblant à un commentaire dans une chaîne content:, les espaces dans calc() et les URI data: restent intacts.
Minifier vs. Embellir
Minifier supprime les commentaires et les espaces superflus et fusionne en toute sécurité les règles en double pour produire le CSS le plus compact possible — pratique pour réduire une feuille de style avant sa mise en production. Embellir fait l'inverse : cela ré-indente tout avec une déclaration par ligne pour qu'un fichier minifié ou désordonné redevienne lisible. Les deux s'appuient sur de vrais analyseurs CSS (csso et js-beautify), de sorte que les contenus délicats comme un texte ressemblant à un commentaire à l'intérieur d'une chaîne content:, les espaces dans calc() et les URI data: sont préservés au lieu d'être cassés par un simple rechercher-remplacer.
Comment utiliser le Minificateur CSS
- Coller — collez le CSS à minifier ou à embellir dans la zone de saisie ci-dessus.
- Choisir l'indentation — 2 espaces, 4 espaces ou tabulation (appliquée uniquement au résultat de l'embellissement, sans effet sur la minification).
- Exécuter — appuyez sur « Minifier » ou « Embellir » et le traitement se fait instantanément dans le navigateur.
- Copier — consultez l'indicateur de taille économisée et copiez le résultat dans le presse-papiers avec le bouton « Copier ».
La minification risque-t-elle de modifier mes styles ?
Non. Cet outil ne remplace pas aveuglément du texte : il utilise un véritable analyseur CSS (csso) qui comprend la feuille de style sous forme d'arbre syntaxique avant de l'optimiser en toute sécurité. Ainsi, un texte ressemblant à un commentaire à l'intérieur de content:, les espaces significatifs de calc(), les URI data: et les préfixes vendeurs sont préservés, et le rendu reste identique.
De combien la taille est-elle réduite ?
Cela dépend de l'état de la source, mais un CSS lisible par un humain, riche en commentaires et en indentation, diminue généralement de 30 à 60 %. Pour un fichier déjà minifié, le gain est faible. Une fois la conversion terminée, l'indicateur de taille affiche immédiatement le nombre d'octets et le pourcentage économisés par rapport à l'original. Avec la compression gzip ou brotli au moment de l'envoi par le serveur, le volume réellement transféré est encore plus réduit.
Quand utiliser l'embellissement (beautify) ?
L'embellissement est utile lorsque vous devez lire ou modifier un CSS déjà compacté sur une seule ligne ou dont l'indentation est désordonnée. Il réorganise chaque déclaration sur sa propre ligne avec une indentation cohérente, ce qui est pratique pour déboguer une feuille de style déployée ou comprendre le code d'autrui. Pour redéployer, revenez à « Minifier ».
Mon CSS est-il envoyé quelque part ?
Non. Le minificateur et l'embellisseur s'exécutent entièrement dans votre navigateur à l'aide de bibliothèques auto-hébergées — votre CSS n'est jamais envoyé ni stocké sur un serveur. Après la conversion, l'indicateur de taille montre combien d'octets la minification a permis d'économiser, et le bouton Copier place le résultat directement dans votre presse-papiers.