Embellisseur CSS et amp; Minificateur
Formatez les CSS désordonnés ou réduits en feuilles de style propres et lisibles – ou compressez les CSS formatés pour réduire la taille du fichier. Ajustez l’indentation, le formatage du sélecteur et la gestion des commentaires. Tout s'exécute dans votre navigateur ; votre code n'est jamais téléchargé.
Comment embellir et amp; Réduire CSS en ligne
Comprendre les deux modes
Les feuilles de style CSS se retrouvent souvent dans deux états : minifié (pas d'espace, une ligne, difficile à lire) ou formaté de manière incohérente (indentation mixte, sauts de ligne bizarres). Cet outil gère les deux sens :
- Embellir étend le CSS compressé en une mise en page lisible en utilisant le format mature
js-beautifybibliothèque. L'indentation, le formatage du sélecteur et l'espacement entre les règles sont tous configurables. - Réduire supprime les commentaires et les espaces inutiles pour réduire le nombre d'octets servis à vos utilisateurs - utile pour expédier le CSS de production lorsque vous n'avez pas d'étape de construction.
Comment utiliser cet outil
- Collez votre CSS dans le volet de saisie à gauche.
- Choisissez vos options d’indentation et de formatage dans la barre d’outils.
- Cliquez Embellir formater, ou Réduire compresser.
- Copiez le résultat, téléchargez-le sous forme de
.cssfichier, ou cliquez sur Utiliser comme entrée pour enchaîner les opérations.
L'outil gère le CSS standard ainsi que la syntaxe imbriquée de type SCSS, les requêtes multimédias, les images clés et les variables CSS. Tout le traitement s'effectue localement dans votre navigateur.
FAQ
Mon CSS est-il téléchargé quelque part ?
Non. L'embellisseur et le minificateur fonctionnent entièrement dans votre navigateur à l'aide de JavaScript côté client. Votre code ne quitte jamais votre appareil et rien n'est enregistré.
Combien la minification permet-elle réellement d’économiser ?
Pour les feuilles de style typiques écrites à la main ou non minifiées, attendez-vous à une réduction de taille de 20 à 40 % après la minification, principalement en supprimant les commentaires, l'indentation et les nouvelles lignes. Sur les CSS déjà compacts, les économies sont moindres. Le volet de sortie affiche le delta exact des octets.
Le minifier va-t-il casser mon CSS ?
Le minificateur supprime uniquement les espaces, les commentaires et le point-virgule final à la fin de chaque bloc de règles. Il ne réécrit pas les sélecteurs, ne fusionne pas les règles et ne réorganise pas les propriétés, de sorte que la sortie est comportementalement identique à l'entrée.
Est-ce qu'il prend en charge SCSS ou LESS ?
Il formate les règles imbriquées et les commentaires de ligne de style SCSS (//) assez bien pour une utilisation occasionnelle, mais ce n'est pas un compilateur SCSS. Pour les vrais workflows SCSS/LESS, compilez d'abord en CSS, puis formatez ici si nécessaire.
Prend-il en charge les variables CSS, @supports, et une syntaxe moderne ?
Entièrement pris en charge. Propriétés personnalisées (--var), @supports, @container, nidification, :is()/:where(), et color-mix() tous passent correctement dans les modes d'embellissement et de réduction.