Minifier CSS en ligne — Minificateur CSS

Minifiez du CSS instantanément avec notre outil en ligne gratuit. Sélectionnez, réordonnez, concaténez et minifiez plusieurs fichiers .css comme un seul bundle avec vos options courantes. Tout le traitement reste dans votre navigateur.

Chargement…

Minification CSS

Minifiez du CSS en ligne avec CSSO. Compressez vos feuilles de style pour la production.

Fonctionnalités

Réduisez la taille de votre code CSS en supprimant les espaces, commentaires et caractères inutiles.

Minifier

Réduisez la taille de votre code CSS en supprimant les espaces, commentaires et caractères inutiles.

Package utilisé

CSSO

v5.0.5

CSSO (CSS Optimizer) est un outil puissant pour optimiser les fichiers CSS en supprimant les redondances et en compressant le code.

Exemple de base

CSS source

.container {
  margin: 20px;
  padding: 10px;
  background-color: #ffffff;
}

.button {
  color: #000000;
  font-size: 16px;
  border: 1px solid #cccccc;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

CSS minifié

.container{margin:20px;padding:10px;background-color:#fff}.button{color:#000;font-size:16px;border:1px solid #ccc}.card{display:flex;flex-direction:column;gap:12px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12)}

Guide d'optimisation CSS

Ce que fait la minification CSS

La minification CSS réécrit une feuille de style sous une forme plus courte qui peint toujours pareil. Sélecteurs, cascade et noms de classes restent le contrat avec votre HTML — un minifier ne renomme pas .header comme le mangling JavaScript raccourcit les variables locales. Le résultat est encore du CSS, pas un zip : une source plus dense, pas une archive encodée. Sur du CSS écrit à la main, on gagne souvent 20–40 % des octets d’origine avant gzip ou Brotli. Les octets restants sur le réseau sont une autre couche ; gzip et Brotli comptent encore après le déploiement. Ce n’est pas la suppression du CSS inutilisé. PurgeCSS, le scan de contenu Tailwind ou des pipelines similaires retirent les règles que votre markup n’utilise jamais — c’est une étape de build, pas cet outil. Voir tree shaking vs minification et le guide de minification CSS. Ce n’est pas non plus l’extraction de critical CSS : extraire les règles above-the-fold, les inliner, puis charger le reste en asynchrone est un workflow à part. Cette page minifie le CSS que vous collez, y compris un bloc critique déjà extrait. Compiler du SCSS ou du LESS est un autre outil. Le minificateur HTML FastMinify ne passe pas CSSO sur les éléments style ni les attributs style inline — il préserve ce CSS tout en compactant le markup.

Comment FastMinify minifie le CSS

Cette page exécute CSSO (CSS Optimizer) entièrement dans votre navigateur. CSSO parse avec CSSTree, compresse (couleurs plus courtes, 0px → 0, commentaires retirés si vous le demandez), puis restructure éventuellement les blocs. La barre d’outils a deux contrôles minify. Le niveau de compression correspond aux flags restructure et merge de CSSO. Conservateur désactive la restructure puis réinsère des retours à la ligne — l’aperçu le plus sûr, pas le plus petit fichier. Normal minifie et fusionne sans réécrire l’ordre de cascade. Agressif active restructure, qui peut fusionner et découper des rulesets ; c’est plus petit, mais les hypothèses d’ordre source peuvent bouger. Laissez Agressif désactivé si votre cascade est fragile. Supprimer les commentaires est l’autre interrupteur. Activé (défaut), les commentaires disparaissent. Désactivé, FastMinify conserve le texte des commentaires en remplaçant le résultat CSSO par une copie de la source aux espaces compactés — vous gardez /* */ au prix d’un gain plus faible. CSSO raccourcit tout de même couleurs, sélecteurs dupliqués adjacents et espaces de sélecteurs ; ce ne sont pas des toggles. Coller-minifier sert un fichier ou quelques fichiers ; la concaténation fusionne d’abord, puis lance le même pipeline. Les apps de production restent dans le build. Pour Webpack, Vite ou la CI, voir le guide de minification CSS.

Options de minification

Niveau de compression

Contrôle l'agressivité de la compression CSS

ConservativeConservateur — pas de fusion ni de restructure ; sortie réindentée pour la lisibilité

NormalNormal — minify et fusion, ordre de cascade conservé

AggressiveAgressif — restructure les rulesets ; plus petit, l’ordre source peut changer

Supprimer les commentaires

Supprime tous les commentaires CSS du code

Comparaison avec/sans l'option :

Code original

/* Header styles */
.header {
    background: #fff;
    padding: 20px;
}

/* Navigation */
.nav { display: flex; }

Avec removeComments: true

.header{background:#fff;padding:20px}.nav{display:flex}

Avec removeComments: false

/* Header styles */.header{background:#fff;padding:20px}/* Navigation */.nav{display:flex}

Différence

Les commentaires CSS sont supprimés

Ce que CSSO fait tout seul

Ce ne sont pas des interrupteurs supplémentaires. Raccourcissement des couleurs et compactage des sélecteurs tournent avec CSSO ; la fusion de règles adjacentes suit le niveau de compression (désactivée en Conservateur).

Couleurs plus courtes

Les couleurs nommées, hex, rgb() et hsl() sont réécrites vers un équivalent plus court lorsque CSSO peut le prouver sans changer le rendu.

Source

.button {
    background: #ff0000;
    color: rgb(255, 255, 255);
    border: 1px solid hsl(0, 100%, 50%);
}

Après CSSO

.button{background:red;color:#fff;border:1px solid red}

Sélecteurs identiques adjacents

Deux blocs avec le même sélecteur peuvent être fusionnés en Normal et Agressif. Conservateur les laisse séparés.

Source

.header {
    background: #fff;
    padding: 20px;
}
.header {
    margin: 10px;
}

Après CSSO

.header{background:#fff;padding:20px;margin:10px}

Espaces dans les sélecteurs

Combinateurs et espaces autour des sélecteurs sont compactés. Les noms de classes et d’identifiants ne sont pas renommés.

Source

div.container > ul li:first-child {
    color: red;
}

div.container > ul li:last-child {
    color: blue;
}

Après CSSO

div.container>ul li:first-child{color:red}div.container>ul li:last-child{color:blue}

Voir les options d’indentation Beautify →

En savoir plus sur cette action →

Concaténer des fichiers CSS

Sur Minifier CSS, sélectionnez ou déposez plusieurs fichiers .css, réordonnez-les, puis concaténez et minifiez le bundle complet une seule fois avec vos options courantes. Tout le traitement reste dans votre navigateur. Les marqueurs de fichiers, commentaires et espacements ajoutés avant la minification peuvent disparaître du résultat final.

Questions fréquentes — Minification

Tout savoir sur la minification

Pourquoi minifier du CSS ?

La minification réduit la taille en supprimant espaces, commentaires et redondances. Gains typiques : 20–40 % des octets d’origine avant gzip.

Besoin de déminifier du CSS ?

Utilisez Déminifier CSS pour restaurer une mise en forme lisible.

Besoin de beautifier du CSS ?

Utilisez Beautifier CSS pour formater vos feuilles de style.

Mon CSS est-il traité en toute sécurité ?

Tout le traitement se fait dans votre navigateur.

Comment concaténer et minifier plusieurs fichiers CSS ?

Sur Minifier CSS, utilisez le bouton de concaténation ou déposez au moins deux fichiers .css dans le panneau d'entrée, réordonnez-les, puis concaténez et minifiez le bundle complet une seule fois avec vos options courantes. Tout s'exécute dans votre navigateur. Ce workflow n'est pas disponible sur Beautifier CSS ni Déminifier CSS, et les marqueurs, commentaires ou espacements peuvent être supprimés pendant la minification.

Vérifiez par vous-même

FastMinify traite vos données dans le navigateur. Inspectez l'onglet Réseau ou consultez notre porte de validation pour confirmer qu'aucune donnée ne quitte votre appareil.

Ouvrir la porte de validation →

Minifier

Réduisez code et assets pour la production — minifiez JS, CSS, HTML, JSON, XML et SVG avant gzip ou déploiement CDN.

Minifier JS

Minifier JSON

Minifier HTML

Minifier XML

Minifier SVG

Minifier SQL

Minifier YAML

Minifier TOML

Découvrez les autres catégories d'outils

Beautifier

Rendez le code lisible avec une indentation cohérente — beautifiez JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML et plus encore dans votre navigateur.

Déminifier

Développez du code minifié ou compressé — déminifiez JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML et d'autres formats pour déboguer ou relire.

Conversion

Transformez des données entre JSON, YAML, XML et CSV localement — sans envoi serveur.

Préprocesseurs CSS

Compilez SCSS ou LESS en CSS standard dans le navigateur — complétez avec beautify ou minify pour un workflow feuille de style complet.

Outils JSON

Validez, formatez, comparez et explorez des payloads JSON — complémentaires aux minificateurs et convertisseurs.

Outils SVG

Prévisualisez, optimisez avec SVGO, exportez en Data URI, redimensionnez, formatez, convertissez en JSX et validez vos SVG — tout dans le navigateur.

DevOps & Infra

Format/validate/minify HCL, format & lint Dockerfile, validation Compose et .env.

CI/CD

GitHub Actions et GitLab CI — formater le YAML et vérifier la structure des workflows/jobs dans le navigateur.

Logs & observabilité

JSON/NDJSON ligne à ligne et access logs Nginx/Apache — format, filtre, validation et CSV/TSV.

Kubernetes

Manifestes multi-docs, validation structurelle, starters Ingress/Deployment et formatage values Helm.

Réseau / IP

CIDR, sous-réseaux et helpers IPv4/IPv6 — dans le navigateur.

Sécurité & tokens

JWKS, certificats X.509 et scan de secrets — locaux navigateur.

API & schémas

Outils OpenAPI pour formater, valider et analyser vos specs.

Outils HTTP

cURL, messages HTTP et URLs collés dans le navigateur — formater et inspecter, jamais envoyé.

Encodage

Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.

Utilitaires développeur

Timestamps, UUID, ULID, Nanoid, cron, mots de passe, regex, slugify, bases, casse, diff texte et chmod — tout côté client.

Texte & Markdown

Comptez, générez un sommaire Markdown et nettoyez des listes de lignes — dans le navigateur.

IA & LLM

Comptage de tokens, estimation des coûts et fenêtre de contexte — 100 % local.

Données de test

Valeurs de champs synthétiques pour fixtures et seed DB — d'abord des numéros de téléphone en plages réservées.

Sérialisation

Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.