Mettez en forme une feuille de style ou minifiez-la, avec le gain de taille affiché
Fonctionne dans votre navigateur. Rien de ce que vous saisissez n'est envoyé nulle part.Formater du CSS l'indente pour que la feuille de style soit lisible, et le minifier retire chaque espace et commentaire pour la production. Les octets gagnés sont affichés, si bien que le gain sur un fichier de 2 KB se voit avant de décider. Tout s'exécute dans votre navigateur et rien n'est envoyé.
Cette page a été traduite automatiquement à partir de l'original anglais. Aucune personne n’a encore relu la traduction : c’est la version anglaise qui fait foi. Lire l'original en anglais
Collez la feuille de style dans la zone CSS ou appuyez sur Essayer un exemple.
Gardez Embellir pour une déclaration par ligne, ou choisissez Minifier pour le fichier le plus petit.
Avec Embellir, choisissez 2 espaces, 4 espaces ou Tab sous Indentation.
Appuyez sur Copier ou Télécharger pour récupérer le résultat.
Ce formateur CSS a deux modes. Embellir présente une feuille de style avec une déclaration par ligne, une indentation régulière et un espacement cohérent autour des deux-points et des accolades. Minifier retire les commentaires et les espaces, raccourcit les couleurs et les unités, et peut fusionner les règles qui partagent le même bloc, puis affiche la taille avant, la taille après et le pourcentage gagné.
On y a recours aux deux bouts d'un travail. Au début, une feuille de style arrive minifiée depuis un CDN ou une sortie de build et vous devez lire la règle qui cause un problème de mise en page. À la fin, vous avez un fichier écrit à la main et voulez la version la plus petite à livrer. Ici, les deux tiennent en un collage et un clic.
La minification utilise csso. L'option de restructuration est la partie agressive : elle fusionne les règles aux blocs identiques, supprime les déclarations qu'une règle ultérieure remplace et réordonne là où c'est sans risque. Elle fait généralement gagner quelques points de plus et le résultat est équivalent, mais si vous examinez un diff ou si votre CSS dépend de l'ordre du code d'une façon qu'un outil ne peut pas voir, désactivez-la et seuls les espaces et les commentaires disparaissent. Les commentaires qui commencent par un point d'exclamation, là où se trouvent les en-têtes de licence, peuvent être conservés.
Au-dessus du résultat, vous obtenez le nombre de règles, de sélecteurs, de déclarations et de règles @. Si une accolade, un commentaire ou un guillemet reste ouvert, vous obtenez la ligne et la colonne où il commence et ce qu'il faut ajouter, plutôt qu'une sortie brute de l'analyseur. Tout s'exécute dans votre navigateur, donc une feuille de style d'un projet non publié n'est jamais envoyée nulle part.
Oui. Sans inscription, sans limite de taille de fichier et sans plafond sur le nombre de feuilles de style traitées. La page est financée par quelques publicités affichées en dehors de l'outil, et votre résultat n'est jamais touché par elles.
Non. L'embellissement comme la minification s'exécutent dans votre navigateur avec JavaScript. Une feuille de style d'un design non publié ou d'un outil d'administration interne ne quitte jamais votre appareil, et rien n'est conservé une fois l'onglet fermé.
Une feuille de style écrite à la main, avec commentaires et indentation, perd généralement 15 à 30 pour cent, et la restructuration ajoute quelques points en fusionnant les règles en double. La page affiche le nombre exact d'octets avant et après, vous n'avez donc jamais à deviner.
La restructuration fusionne les règles aux blocs identiques, supprime les déclarations qu'une règle ultérieure remplace et réordonne les sélecteurs là où c'est sans risque. Le gain supplémentaire est généralement de quelques pour cent par rapport à la simple minification. Désactivez-la si vous voulez retirer uniquement les espaces et les commentaires, par exemple pour obtenir un diff lisible entre deux builds.
Oui. Choisissez Embellir et collez le fichier minifié. Il revient avec un sélecteur par ligne, une déclaration par ligne et les media queries indentées dans leur bloc. Les noms de sélecteurs, les valeurs et l'ordre restent exactement tels quels.
La minification ne devrait pas casser une feuille de style valide. csso analyse réellement le CSS au lieu de remplacer du texte, donc les chaînes, les data URI et les propriétés personnalisées sont préservées. Si le fichier ne peut pas être analysé, vous obtenez la ligne et la colonne au lieu d'un résultat cassé, et rien n'est copié.
Toujours bloqué ? Poser une question sur Formateur et minificateur CSS et toute personne qui connaît la réponse peut répondre. Aucun compte nécessaire.