Formateur CSS pour embellir ou minifier CSS, SCSS et LESS avec Prettier, trier et dédupliquer les propriétés, le tout traité localement, vos styles ne quittent jamais votre appareil.
Formateur CSS en ligne
Formateur CSS pour embellir ou minifier CSS, SCSS et LESS avec Prettier, trier et dédupliquer les propriétés, le tout traité localement, vos styles ne quittent jamais votre appareil.
Votre CSS est formaté localement dans votre navigateur et rien n'est envoyé à un serveur.
Ce formateur css embellit ou minifie CSS, SCSS et LESS avec Prettier, avec des options pour trier les déclarations par ordre alphabétique et supprimer les propriétés en double. Utilisez-le comme embellisseur css pour nettoyer des feuilles de style désordonnées, ou comme formateur scss et formateur less lorsque vous travaillez avec des préprocesseurs. Passez en mode minify pour retirer les commentaires et les espaces et produire un CSS de production compact. Conçu pour les développeurs front-end, designers et ingénieurs QA qui ont besoin de styles cohérents et lisibles ou d'un moyen rapide de formater css en ligne avant un commit ou une revue de code. Vous pouvez choisir tabulations ou espaces pour l'indentation, choisir la syntaxe correspondant à votre fichier et réutiliser la sortie prettier css partout. Tout est traité localement dans votre navigateur, vos feuilles de style ne quittent jamais votre appareil et rien n'est envoyé à un serveur.
Fonctionnalités
Embellit ou minifie CSS, SCSS et LESS avec Prettier
Choisissez le mode de syntaxe (CSS, SCSS ou LESS) pour une analyse fidèle
Trie les propriétés par ordre alphabétique dans chaque règle (CSS pur)
Supprime les déclarations en double du CSS pur
Choisissez tabulations ou espaces pour l'indentation
Le mode minify retire les commentaires et les espaces pour la production
Reformate les règles imbriquées et les media queries de façon cohérente
Tout s'exécute dans votre navigateur
Comment utiliser Formateur CSS / SCSS
Collez votre CSS, SCSS ou LESS dans la zone de saisie.
Choisissez le mode de syntaxe (CSS, SCSS ou LESS) correspondant à votre fichier.
Sélectionnez Embellir pour formater ou Minifier pour compacter la sortie.
Activez Trier les propriétés, Dédupliquer ou Tabulations pour affiner le résultat.
Copiez ou téléchargez le CSS formaté depuis le panneau de sortie.
Exemple
Entrée
.btn{color:#FFF;padding:8px;color:#fff;}
Sortie
.btn {
color: #fff;
padding: 8px;
}
Mode embellir avec les déclarations en double supprimées.
Erreurs courantes et dépannage
Le tri ou la déduplication des propriétés n'a aucun effet sur SCSS ou LESS. — Le tri et la suppression des doublons s'appliquent au CSS pur ; passez le mode de syntaxe en CSS si vous voulez que ces options s'exécutent.
Les boutons Trier les propriétés et Dédupliquer sont absents de la barre d'outils. — Ces boutons n'apparaissent qu'en mode Embellir avec la syntaxe CSS sélectionnée ; désactivez Minifier et choisissez CSS pour les afficher.
Le CSS minifié est difficile à éditer ensuite. — Conservez votre fichier source original ; la sortie minifiée est destinée à la production, pas à une édition ultérieure.
La sortie ne se formate pas car la mauvaise syntaxe est sélectionnée. — Faites correspondre le mode de syntaxe à votre code, par exemple choisissez SCSS pour l'imbrication et les variables, afin que Prettier l'analyse correctement.
L'indentation ne correspond pas au style de votre projet. — Activez l'option Tabulations pour basculer entre tabulations et espaces avant de copier.
Foire aux questions
Qu'est-ce que le Formateur CSS d'ArrayKit ?
C'est un formateur css basé sur le navigateur qui embellit ou minifie CSS, SCSS et LESS avec Prettier, et peut trier les propriétés par ordre alphabétique et supprimer les déclarations en double dans le CSS pur.
Comment minifier du CSS avec le Formateur CSS ?
Collez votre feuille de style, choisissez le mode de syntaxe correspondant, puis sélectionnez Minifier pour retirer les commentaires et les espaces et produire un CSS de production compact à copier ou télécharger.
Le Formateur CSS prend-il en charge SCSS et LESS ?
Oui. Choisissez la syntaxe (CSS, SCSS ou LESS) et il l'analyse en conséquence. Le tri des propriétés et la déduplication s'appliquent au CSS pur.
Le Formateur CSS peut-il trier les propriétés par ordre alphabétique ?
Oui. En mode Embellir avec CSS sélectionné, activez Trier les propriétés pour réordonner les déclarations par ordre alphabétique dans chaque règle.
Quel moteur formate le CSS ?
L'embellissement utilise Prettier, la sortie correspond donc aux mêmes conventions que Prettier applique dans votre éditeur et vos outils de build.
Mon CSS est-il envoyé quelque part par le Formateur CSS ?
Non. Le formateur css s'exécute entièrement dans votre navigateur, vos feuilles de style sont traitées localement et ne quittent jamais votre appareil.
Outils associés
Formateur JS / TS — Embellissez JavaScript, TypeScript et JSX/TSX avec les options de Prettier, ou minifiez du JavaScript simple.
Formateur HTML — Embellit ou minifie le HTML, met en forme le CSS/JS en ligne et prévisualise le résultat.
Formateur XML — Embellit, minifie et valide le XML, et convertit XML ↔ JSON.
Formateur SQL — Met en forme le SQL pour MySQL, PostgreSQL, SQL Server, SQLite, BigQuery et Oracle.