Output will appear here...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 réduisant un bundle de production à une ligne dans des règles de production lisibles et correctement en retrait. 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.
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.
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.
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.
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.
Respecte les littéraux de chaîne, les valeurs url() et l'espacement calc() - il comprime de manière agressive sans jamais corrompre les CSS valides
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
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
É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
Minify HTML markup for faster page loads or beautify it for readable, indented source
Format messy SQL into readable, indented queries or minify SQL to a single line
Format, validate, and minify JSON data
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!