Retirez commentaires et espaces superflus

Les développeurs web utilisent Minificateur CSS lorsqu’ils préparent un code compact pour une livraison ou une comparaison contrôlée.

Retirez les commentaires et les espaces superflus du CSS, puis récupérez un code compact pour la suite. Utilisez-le sans compte dans votre navigateur.

Mode d’emploi

Déposez votre feuille de style dans la zone de saisie, ou importez le fichier concerné pour éviter de tout recopier.
Lancez la minification : les commentaires disparaissent et les espaces sans rôle syntaxique sont retirés.
Comparez la longueur du résultat avec celle de votre fichier d'origine pour voir ce qui a été gagné.
Copiez le code compact dans votre projet et rechargez la page pour vérifier que le rendu n'a pas bougé.
Conservez toujours la version lisible quelque part : la version compactée est faite pour être livrée, pas pour être relue.

Exemple

L'exemple fourni contient deux règles écrites sur plusieurs lignes, avec des marges, un fond et un espacement dispersés. Après minification, comparez la taille des deux textes et vérifiez que chaque sélecteur, chaque propriété et chaque valeur se retrouve bien dans la version compacte.

Entrée

body {
    color: #17211d;
    margin: 0;
}

.card {
    padding: 12px;
    background: #ffffff;
}

Résultat

body{color:#17211d;margin:0} .card{padding:12px;background:#ffffff}

Limites et formats

L'outil retire les commentaires : si vous y aviez laissé des notes utiles, elles ne reviendront pas dans le résultat.
Un code compact est difficile à relire et à corriger, gardez donc la version d'origine pour les modifications futures.
La minification ne supprime pas les règles inutilisées et ne réécrit pas les valeurs, le gain vient surtout des espaces et des commentaires.
Testez le résultat sur les navigateurs que vous visez, en particulier si votre feuille contient des sélecteurs rares ou un commentaire jamais fermé.

Où le traitement a lieu

La transformation se produit dans votre navigateur : le CSS que vous collez y reste, il n'est envoyé nulle part et il disparaît à la fermeture de l'onglet. Vous pouvez donc comprimer la feuille de style d'un client sans la faire sortir de votre poste.

Questions fréquentes

Le fichier minifié est-il plus rapide à charger ?

Il est plus léger, puisque les espaces et les commentaires ont disparu, et un fichier plus petit se télécharge plus vite. Le gain dépend surtout de la taille de votre feuille de style et du reste des ressources de la page.

Puis-je revenir en arrière après la minification ?

Non, le processus n'est pas réversible depuis cette page : les commentaires et l'indentation d'origine sont perdus. Travaillez sur une copie, ou conservez votre fichier lisible dans votre gestionnaire de versions avant de le remplacer.

Pourquoi mon code contient-il encore des espaces ?

Les espaces qui séparent deux valeurs, deux sélecteurs ou les mots d'une propriété sont nécessaires à la lecture du CSS. Seuls ceux qui n'ont aucune fonction syntaxique sont retirés, le résultat reste donc un code valide.