Output will appear here...Qu'est-ce que CSS Minifier et Beautify ?
CSS Minifier & Beautifier est un outil de feuille de style bidirectionnelle : il comprime CSS en supprimant tout ce dont le navigateur n'a pas besoin - commentaires, espaces blancs, points-virgules redondants, couleurs hexadécimales et unités longues sur des valeurs nulles - et il peut inverser le processus, en renforçant un bundle de production à une seule ligne dans des règles lisibles et correctement endépliées. Chaque octet que vous éliminez à partir d'une feuille de style bloquant le rendu est un octet que les téléchargements et analysent plus rapidement du navigateur, qui alimente directement les mesures de base de Web Vitals comme First Contentful Paint et la plus grande peinture.
Le minificateur est délibérément conservateur. Il est pleinement conscient des chaînes littérales, des valeurs url() et des expressions calc(), de sorte qu'il ne supprime jamais l'espace blanc sur lequel dépend, calc(100% - 20px) ne réécrit jamais le texte couleur dans une chaîne de contenu et ne touche jamais l'espacement qui distingue div :hover de div:hover. Sur les feuilles de styles typiques, vous pouvez vous attendre à une réduction de taille de 25 à 40 % avant GZIP ; combinée à GZIP ou Brotli sur le fil, la minification rase toujours une tranche significative car la compression fonctionne mieux sur une entrée sans commentaire.
Tout fonctionne à 100 % du côté client dans votre navigateur. Votre CSS n'est jamais téléchargé, enregistré ou enregistré sur un serveur, ce qui signifie que vous pouvez en toute sécurité coller du code système de conception propriétaire, des styles de produits inédits ou du travail client. Cela fonctionne également hors ligne une fois la page chargée - utile lorsque vous avez besoin d'un pass rapide Minify sans câblage d'un pipeline complet de PostCSS ou ESBuild.
La minification est une syntaxe plutôt qu'un ensemble de règles de recherche et de remplacement, ce qui rend l'exécution sûre sur les feuilles de style de production : l'espace blanc dans les chaînes, les valeurs d'url() et les sélecteurs d'attributs est laissé seul, car la suppression changerait ce que le CSS correspond. Les commentaires commençant par un point d'exclamation sont conservés, qui est la convention pour les en-têtes de licence qui doivent survivre à une construction.
Comment utiliser CSS Minifier & Beautifier ?
Collez votre CSS
Déposez votre feuille de style dans la zone de saisie - une règle unique, un fichier de composants ou un ensemble de production complet. Les CSS formatés et déjà minimisés sont acceptés.
Choisissez Minify ou Embelly
Cliquez sur Minify pour compresser la production ou embellissez pour développer le code minifié en une seule déclaration par ligne avec une ligne vide entre les règles. Pour embellir, choisissez d'abord votre indentation préférée.
Vérifiez le badge d'épargne
L'outil indique la taille exacte avant/après la variation de la taille et du pourcentage (par exemple, "12,4 Ko → 8,1 Ko, −34 %"), afin que vous sachiez précisément ce que la transformation vous a acheté avant de l'expédier.
Copier ou télécharger
Copiez le résultat dans votre presse-papiers en un clic ou téléchargez-le sous la forme d'un fichier .css prêt à être déposé dans votre sortie de build ou dans votre CDN.
Principales caractéristiques
Réduction sûre et syntaxique
Respecte les chaînes de caractères, les valeurs url() et l'espacement calc() - il se comprime de manière agressive sans jamais corrompre les CSS valides
Hex et raccourcissement des valeurs nulles
Réécrit #FFFFFF à #FFF et 0px à 0 là où il est prouvé que ce soit en sécurité, en serrant les octets supplémentaires au-delà de la suppression simple des espaces blancs
Conservation des commentaires de licence
Contient les commentaires de la bannière /* ! INTACT afin que les en-têtes de licence de bibliothèque survivent à la minification, en s'appariant avec le comportement standard de construction-outil
Beauté en un clic
Élargit les bundles minifiés en règles lisibles avec l'indentation d'espace configurable 2, 4 ou 8 pour déboguer les problèmes de production
Frequently Asked Questions
Related Tools
HTML Minifier & Beautifier
Minify HTML markup for faster page loads or beautify it for readable, indented source
JSON Minifier
Minify JSON by removing whitespace, or beautify it with clean indentation, with live size-savings stats and exact parser error messages
SQL Formatter
Format messy SQL into readable, indented queries or minify SQL to a single line
CSS Formatter
Beautify messy CSS with clean indentation, or minify it to ship smaller files. Handles nested at-rules, comments, and string literals safely.
Comments
0 comments
No comments yet. Be the first to share your thoughts!