Mes outils

CSS FORMATTER / CSS · SCSS · MOINS

Formateur CSS

Coller CSS, SCSS ou moins pour obtenir une déclaration par ligne avec des requêtes claires de nichage et de médias.

Exécute localement · code n'est pas téléversé
Options

ÉTAPE PROCHAINE

Connectez des outils utiles au flux de travail de votre entreprise

Créer un compte d'entreprise pour configurer la surveillance du site Web, les courriels d'affaires et les notifications, et inviter votre équipe à travailler ensemble.

Les nouvelles entreprises reçoivent un essai Pro de 7 jours, sans carte requise. Les essais excluent la subvention de crédit mensuelle payée.

Vous avez déjà un compte ? Ouvrir votre espace de travail →

Comment l'utiliser

  1. Coller le code, déposer un fichier ou charger l'échantillon; la langue est prédéfinie pour cette page et peut être modifiée.
  2. Choisissez le format ou minifiez et ajustez le tiret, la largeur et d'autres options ; le résultat apparaît à droite lorsque vous tapez.
  3. Copiez ou téléchargez le résultat; sur une erreur, utilisez "Aller à l'erreur", corrigez-le et exécutez à nouveau.

Options de style de code

Conventions communes
OptionsRecommandation
Détenteur2 espaces (communs à l'avant) / 4 espaces / onglet
Largeur de la ligneEnveloppe à 80; 100 ou 120 pour les écrans larges
CitationsDouble (par défaut) ou simple
Semi-colonSur par défaut pour éviter les surprises ASI
Des virgules traînantesAjouté sur les listes multi-lignes pour les diffs plus propres

Langues et moteurs

Formatage utilise les mêmes moteurs open-source que les éditeurs populaires, de sorte que les résultats correspondent à Prettier dans VS Code et votre équipe peut garder un style. Chaque moteur charge à partir de ce site et fonctionne dans votre navigateur.

Langue
LangueFormatCompresseur
HTMLJuste 3✓ commentaires et espace blanc
XMLMoteur XunL XML✓
CSS / SCSS / MoinsJuste 3✓ Restructuration de la CSSO
JavaScript / TypeScriptHôtel 3 (Babel)✓ Terser (JavaScript seulement)
JSONJuste 3✓ les grands nombres gardent la précision
YAMLJuste 3— (observations tenues)
SQLsql-formater (14 dialectes)—

Foire aux questions

Le formatage changera-t-il les styles?

C'est pas vrai. Seuls les espaces blancs, les lignes se brisent et l'espacement autour des colones et des semi-colons changent ; les sélecteurs, les propriétés et les valeurs restent les mêmes.

Mon code est-il téléversé ?

C'est pas vrai. Les moteurs télécharger à partir de ce site et fonctionner dans votre navigateur; votre code ne passe jamais à travers nos serveurs ou n'importe quel tiers, il est donc sûr pour le code interne et la configuration.

Quelle taille les fichiers peuvent-ils être ?

Jusqu'à 5 Mo par fichier; au-dessus de 300 Ko la page attend le bouton au lieu de formater que vous tapez, pour garder le navigateur réactif.

CSS guide pratique et questions communes

Que fait une matière CSS ?

L'analyseur PostCSS de Prettier 3 prend en charge CSS, SCSS et Less : une déclaration par ligne, un sélecteur par ligne, des règles imbriquées et @media indentées par la profondeur, les couleurs et les valeurs telles qu'écrites.

C'est pour qui, et quand est-ce utile ?

Les développeurs de première ligne, les personnalisations de thème et les annonceurs éditant des styles de site qui ont besoin de lire une feuille de style en une ligne ou bien SCSS et Less.

Comment utiliser cette matière CSS ?

Coller CSS, SCSS ou moins pour obtenir une déclaration par ligne avec des requêtes claires de nichage et de médias.

Comment interpréter les résultats?

Mise en page seulement; la validité de la propriété n'est pas vérifiée, et les accoudoirs cassés ou les semi-colons manquants sont signalés avec la ligne et la colonne.

Où le travail est-il effectué et quels services reçoivent les données?

Les feuilles de style sont formatées dans votre navigateur et ne sont jamais téléversées.