CDRN

Formater et indenter du CSS

  • Tableau de bord
  • Documentation
  • API
formate vos règles CSS pour les rendre lisibles et compréhensibles, facilitant le développement et la maintenance

Pourquoi utiliser un outil de formatage CSS ?

Le formatage du code CSS est essentiel pour les développeurs afin de maintenir un code propre et lisible. Cet outil simplifie le processus en permettant de formater rapidement et précisément le code CSS, facilitant ainsi la maintenance et la collaboration sur les projets.

Caractéristiques de l'outil de formatage CSS

Cet outil de formatage CSS vous permet d'entrer du code CSS et de le formater pour une meilleure lisibilité. Il supprime les commentaires, les espaces et les tabulations inutiles, et ajoute une indentation appropriée pour les règles et les propriétés CSS.

Comment utiliser l'outil de formatage CSS

Pour utiliser l'outil de formatage CSS, suivez ces étapes simples :

  1. Entrez votre code CSS dans le champ prévu à cet effet.
  2. Cliquez sur le bouton "Formater". L'outil formatera le code CSS pour une meilleure lisibilité.
  3. Copiez le code CSS formaté pour l'utiliser dans vos projets.

Exemple d'utilisation de l'outil de formatage CSS

Voici un exemple de code CSS avant et après le formatage : 


Avant le formatage :
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;text-align:center;}

Après le formatage :
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Questions fréquentes

Quelle différence entre un formateur CSS, un minificateur et un beautifier ?

Un formateur CSS (ou beautifier) réécrit un fichier compact en version indentée et lisible. Un minificateur fait l'inverse : il supprime espaces, retours à la ligne et commentaires pour réduire la taille du fichier servi en production. Notre outil se concentre sur le formatage : il prend une feuille CSS minifiée ou mal indentée et la remet en forme avec une indentation cohérente, propriété par propriété.

Le formatage conserve-t-il les commentaires CSS ?

Les commentaires /* ... */ sont préservés tels quels par défaut. Les commentaires de licence en tête de fichier (/*! ... */) ainsi que les annotations utilitaires (TODO, FIXME) restent intacts, sur leur propre ligne. Si vous voulez les supprimer pour produire un fichier de production, passez plutôt par un minificateur dédié.

Les préfixes vendeurs (-webkit-, -moz-) sont-ils gérés ?

Oui. Les préfixes vendeurs sont traités comme des propriétés ordinaires : ils sont indentés et alignés sur le reste du bloc. Le formateur ne génère ni ne supprime de préfixes : il se contente de mettre en forme ce qui est fourni. Pour ajouter automatiquement les préfixes manquants, utilisez Autoprefixer dans votre pipeline build.

Le formateur gère-t-il les media queries et les règles imbriquées ?

Oui. Les @media, @supports, @keyframes et autres at-rules sont indentés avec leurs règles imbriquées à l'intérieur des accolades. L'imbrication CSS native (& dans une règle parent) est aussi reconnue et formatée correctement, comme les blocs SCSS ou Less compatibles avec la syntaxe CSS standard.

Puis-je formater du SCSS, Less ou Stylus ?

L'outil cible le CSS standard. Les syntaxes étendues (mixins SCSS, variables Less avec @, syntaxe sans accolades de Stylus) ne sont pas comprises par le parseur et peuvent produire un résultat dégradé. Pour ces langages, utilisez plutôt sass --style=expanded, lessc ou un formateur dédié comme Prettier avec le bon plugin.

Le formateur valide-t-il la syntaxe CSS ?

Le formateur effectue une analyse syntaxique minimale : il repère les blocs, les sélecteurs et les déclarations. Il signale les erreurs grossières (accolade non fermée, point-virgule manquant en fin de bloc) mais ne valide pas les noms de propriétés ni les valeurs. Pour une validation complète, utilisez le service du W3C CSS Validator.

Exemple de requête

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Schéma d'entrée

Champ Type Requis Défaut
input text ✓ –

Points d'accès

  • GET https://cdrn.fr/api/v1/tools - liste tous les outils disponibles
  • GET https://cdrn.fr/api/v1/tools/css-formatter - récupère le schéma de cet outil
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - exécute cet outil avec un payload JSON