Formateur, Embellisseur et Minificateur CSS

Mettez en forme, embellissez et minifiez du CSS instantanément dans votre navigateur. Nettoyez des feuilles de style désordonnées ou compressez-les pour la production — gratuit, privé, votre CSS ne quitte jamais votre appareil.

Sans pistage Fonctionne dans le navigateur Gratuit

Entrée CSS

Indentation

CSS formaté

🔒 100 % dans le navigateur — votre CSS ne quitte jamais votre appareil.

Vérifié pour un formatage sûr pour le rendu et une minification sans perte — Go Tools Engineering Team · 5 juin 2026

Qu'est-ce que la mise en forme CSS ?

La mise en forme CSS (aussi appelée embellissement ou pretty-printing) réécrit une feuille de style avec une indentation, des sauts de ligne et des espacements cohérents afin que sa structure soit facile à lire et à réviser. Les styles s'affichent de façon identique avant et après — seuls les espaces changent. La minification fait l'inverse : elle supprime les commentaires et réduit le CSS à la plus petite taille possible pour que les pages se chargent plus rapidement. Cet outil fait les deux, entièrement dans votre navigateur.

Fonctionnalités clés

Formater et minifier

Embellissez du CSS désordonné pour la lisibilité ou compressez-le à la plus petite taille possible — en un seul outil.

Économie en octets

Voyez exactement combien d'octets la minification a économisés pour connaître l'impact sur la charge utile.

100 % privé

Tout le traitement se fait dans votre navigateur. Votre CSS n'est jamais envoyé à un serveur.

Contrôles de style

Choisissez une indentation de 2 espaces, 4 espaces ou tabulation pour correspondre aux conventions de votre équipe.

Exemples

Règles minifiées

body{margin:0;padding:0;font-family:system-ui}.card{display:flex;gap:1rem;padding:16px;border-radius:12px;background:#fff}.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}

Développez une feuille de style sur une seule ligne en règles lisibles et indentées.

Media query

@media(max-width:640px){.nav{flex-direction:column}.nav a{padding:8px 0}}

Indentez les règles at-rules imbriquées pour que les points de rupture soient faciles à parcourir.

Propriétés personnalisées

:root{--primary:#6366f1;--gap:8px}.btn{color:var(--primary);margin:var(--gap)}

Mettez en forme les variables CSS et leur utilisation avec var() proprement.

Keyframes

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

Disposez les keyframes d'animation ligne par ligne.

Cas d'utilisation courants

Nettoyer du CSS hérité: Embellissez une feuille de style minifiée ou incohérente pour pouvoir la lire et la modifier.
Revue de code: Mettez en forme le CSS avant une pull request pour que les relecteurs voient des styles cohérents et lisibles en diff.
Livrer plus léger: Minifiez le CSS de production pour réduire les octets et accélérer le chargement des pages.
Apprendre par l'exemple: Collez un extrait copié depuis un site et mettez-le en forme pour comprendre sa structure.

Détails techniques

Embellissement avec js-beautify: Utilise le même moteur éprouvé que les embellisseurs en ligne populaires pour une sortie prévisible et configurable.
Minification avec CSSO: Compresse en toute sécurité — en fusionnant les espaces blancs et en supprimant les commentaires sans modifier le rendu des styles.
Basé sur le navigateur: S'exécute entièrement côté client ; aucun CSS ne quitte jamais votre appareil ni n'atteint un serveur.

Bonnes pratiques

Formater la source, minifier pour la production: Conservez du CSS lisible dans votre dépôt et ne minifiez qu'à l'étape de build ou de déploiement.
Choisir un style d'indentation: Convenez de 2 espaces, 4 espaces ou tabulations au sein de l'équipe pour des diffs propres.
Minifier en dernier: Exécutez la minification après toutes les modifications — le CSS minifié est difficile à maintenir manuellement.

Questions fréquentes

Comment formater du CSS en ligne ?

Collez votre CSS dans la zone de saisie et cliquez sur Formater. L'outil réindente la feuille de style avec des sauts de ligne et des espacements cohérents, puis vous permet de la copier. Tout s'exécute localement dans votre navigateur — rien n'est envoyé.

Comment minifier du CSS ?

Collez votre CSS et cliquez sur Minifier. L'outil supprime les commentaires et réduit les espaces blancs pour produire la feuille de style équivalente la plus petite possible, et indique combien d'octets vous avez économisés. Le CSS minifié s'affiche exactement comme l'original.

Quelle est la différence entre formater et minifier du CSS ?

La mise en forme (embellissement) ajoute une indentation et des sauts de ligne pour rendre le CSS lisible. La minification fait l'inverse : elle supprime les commentaires et les espaces blancs pour réduire le fichier et accélérer le chargement. Les deux produisent des styles qui s'affichent de façon identique à l'original.

La mise en forme change-t-elle l'apparence de mes styles ?

Non. La mise en forme et la minification ne modifient que les espaces blancs et les commentaires — jamais les sélecteurs, propriétés ou valeurs. La page s'affiche exactement pareil avant et après.

Mon CSS est-il en sécurité avec cet outil ?

Oui. Tout le formatage et la minification se font localement dans votre navigateur en JavaScript — votre CSS n'est jamais envoyé à un serveur, journalisé ni stocké. Cela le rend sûr pour les styles propriétaires ou non publiés, contrairement aux formateurs côté serveur qui reçoivent une copie de tout ce que vous collez.

Peut-il formater du SCSS ou du Less ?

Il met en forme et minifie le CSS standard. Le SCSS/Less qui est aussi du CSS valide se formatera généralement bien, mais la syntaxe propre aux pré-processeurs (imbrication, mixins, variables avec $ ou @) est mieux gérée par le formateur de votre pré-processeur.

Quelle indentation utiliser pour le CSS ?

Deux espaces est la valeur par défaut la plus courante et garde les diffs compacts ; quatre espaces peuvent améliorer la lisibilité pour les règles profondément imbriquées ; les tabulations laissent chaque développeur choisir sa largeur. Choisissez-en une et appliquez-la de façon cohérente — cet outil prend en charge les trois.

Outils connexes

Voir tous les outils →

Formateur, Embellisseur et Minificateur HTML

Code

Mettez en forme, embellissez et minifiez du HTML instantanément dans votre navigateur. Indentez du balisage désordonné ou compressez-le pour la mise en production — gratuit, privé, votre HTML ne quitte jamais votre appareil.

Formateur et Minificateur JavaScript

Code

Mettez en forme, embellissez et minifiez du JavaScript instantanément dans votre navigateur. Nettoyez du code désordonné ou compressez-le avec Terser — gratuit, privé, votre code ne quitte jamais votre appareil.

Formateur et Embellisseur SQL

Code

Mettez en forme, embellissez et minifiez du SQL dans votre navigateur. Prend en charge PostgreSQL, MySQL, SQL Server, BigQuery, Snowflake, Oracle et SQLite. Gratuit, privé — votre SQL ne quitte jamais votre appareil.

Convertisseur de Base — Binaire, Hex, Décimal & Octal

Outils de conversion

Convertissez entre binaire, hexadécimal, décimal, octal et toute base (2-36) instantanément. Gratuit, privé, 100 % dans votre navigateur.

Décodeur et Encodeur Base64

Encodage et formatage

Décodez et encodez en Base64 en ligne gratuitement. Conversion en temps réel, support UTF-8 et émojis. 100 % privé, dans votre navigateur.

Convertisseur Base64 en Image

Encodage et formatage

Décodez une chaîne Base64 ou un URI de données en image dans votre navigateur. Aperçu, dimensions et MIME, puis téléchargement en PNG, JPG, GIF, SVG. Sans envoi.