CSS Beautifier et formateur en ligne
Formatez, réduisez et organisez instantanément les feuilles de style CSS désordonnées ou compressées en temps réel. Notre formateur de machine à états CSS indente avec précision les requêtes @media imbriquées, les URL @keyframes, les variables CSS (--var), les URL https:// et les données SVG inline. URIs — et inclut un minificateur CSS CSS en un clic lorsque vous êtes prêt à expédier en production.
Comment embellir et déminifier CSS en ligne
- Collez votre CSS: Collez votre
.min.csscompressé ou votre feuille de style désordonnée dans l'éditeur Input CSS sur la gauche, ou cliquez sur Load Sample pour tester les requêtes, variables,@mediaimbriquées. et les URL. - Choisissez un préréglage ou personnalisez les paramètres : Choisissez Espaces 2, Espaces 4, Nettoyer et trier A–Z ou Minifier (.min.css) dans la barre des préréglages rapides, ou ajuster l'indentation, l'accolade placement, fractionnement du sélecteur et compression des couleurs sur la droite.
- Inspect Live Statistics : Regardez les compteurs Input, Output, Rules et Lines se mettre à jour immédiatement lorsque vous tapez ou basculez les options.
- Copier ou télécharger : Cliquez sur Copier dans le Clipboard ou Télécharger .css pour enregistrer votre feuille de style formatée sous
styles.beautified.css(oustyles.min.cssdans Minify mode).
Explication des options de formatage et d'optimisation du CSS
| Options | Ce qu'il fait | Avant | Après |
|---|---|---|---|
| Réduire et mettre en retrait | Développe les règles sur une seule ligne et les blocs @media / @keyframes imbriqués avec 2, 4 ou 8 espaces ou tabulations. |
@media(max-width:768px){.box{width:100%}} |
@media (largeur maximale : 768 px) { |
| Un sélecteur par ligne | Divise les listes de sélection séparées par des virgules sur des lignes individuelles tout en ignorant les virgules à l'intérieur de :is() ou :not(). |
.btn, .card, .modal { ... } |
.btn, |
| Compresser les valeurs de couleur | Convertit rgb() et les codes hexadécimaux à 6 chiffres en codes hexadécimaux à 3 chiffres à l'intérieur de n'importe quelle valeur de déclaration tout en préservant les jetons environnants. |
border : 1px RVB solide (255, 0, 0); |
Bordure : 1px solide #f00 ; |
| Trier les propriétés (A à Z) | Alphabète les déclarations à l'intérieur de chaque bloc pour normaliser les révisions de code et révéler les propriétés en double. | Indice z : 5 ; affichage : flexible ; aligner les éléments : centre ; |
align-items : centre ; |
Pourquoi utiliser une machine à états CSS Beautifier ?
De nombreux formateurs CSS en ligne simples divisent le code sur chaque deux-points (:), point-virgule (;) ou accolade (}). Cette approche échoue dès que votre feuille de style inclut des fonctionnalités modernes de CSS telles que :
- Règles At imbriquées et imbrication native CSS : requêtes
@media, requêtes de fonctionnalités@supports, animations@keyframes, blocs@layeret sélecteurs d'enfants imbriqués nécessitent plusieurs niveaux suivi des empreintes. - URL externes et URI de données SVG en ligne : Propriétés telles que
background : url("https://...")ouurl("data:image/svg+xml;utf8,contiennent des deux-points et des points-virgules qui ne doivent jamais être divisés en tant que délimiteurs de propriété CSS.") - Chaînes de contenu de pseudo-éléments : Des déclarations telles que
content : "Item : 1 ; Status : OK"conservent intacts leurs caractères internes exacts et leurs espaces. - W3C - Raccourcissement précis des couleurs : Les couleurs nommées ne sont raccourcies que lorsque l'équivalent hexadécimal est strictement plus court et identique dans la spécification CSS (par exemple,
white→#fffetblack→#000, tout en laissantgreencommegreenpuisque#008000est plus long et#0f0est en faitlime).
Foire aux questions
Comment puis-je déminifier un fichier .min.css en ligne ?
Collez votre code .min.css compressé dans la zone Input CSS sur la gauche. L'outil analyse automatiquement les sélecteurs, les déclarations, les requêtes @media et @keyframes en CSS multiligne proprement indenté en temps réel.
Ce CSS beautifier prend-il en charge les requêtes @media, @keyframes et les URI data: ?
Oui. Contrairement aux simples formateurs basés sur le fractionnement, cet outil utilise un analyseur de machine à états CSS qui préserve les blocs imbriqués (@media, @supports, @keyframes, @layer et l'imbrication native CSS) ainsi que les deux-points. et des points-virgules à l'intérieur des URI url("https://..."), data:image/svg+xml et des chaînes content entre guillemets.
Est-il sécuritaire de trier les propriétés CSS par ordre alphabétique ?
Le tri alphabétique facilite l'analyse des règles volumineuses et permet de repérer les déclarations en double. Cependant, si une règle repose sur une propriété abrégée suivie d'un remplacement plus spécifique (ou vice versa, comme background-color contre background), la modification de l'ordre de déclaration peut modifier la propriété qui l'emporte. Activez le tri lorsque vos règles ne dépendent pas de l'ordre de remplacement des raccourcis.
Puis-je également réduire CSS avec cet outil ?
Oui. Cliquez sur le bouton Minify CSS (ou sélectionnez Minify (Single-Line .min.css) dans le panneau des paramètres) pour supprimer les commentaires, les espaces et les points-virgules de fin et compresser les valeurs de couleur dans une feuille de style de production compacte.
Mon code CSS est-il téléchargé sur n'importe quel serveur ?
Non. Tous les formats et minifications CSS s'exécutent à 100 % localement dans votre navigateur à l'aide de JavaScript. Vos feuilles de style ne quittent jamais votre ordinateur.