FR

Minifier CSS : réduire, formater et inliner le CSS dans le HTML

Avec cet outil pour minifier CSS, réduisez une feuille de style, formatez-la pour la lire ou inlinez-la dans des attributs style pour vos newsletters. Commentaires, espaces et zéros inutiles disparaissent sans changer le rendu. Les erreurs de syntaxe indiquent la ligne, et votre code reste dans le navigateur.

Source : W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Mise à jour : .

Ma boîte à outilsVos saisies sont enregistrées uniquement dans ce navigateur.

Le code est traité uniquement dans votre navigateur. En mode inline, collez un document HTML complet ou un fragment contenant <style>.

Votre texte reste dans votre navigateur : il n’est ni envoyé, ni enregistré, ni ajouté à l’adresse de la page.

Traité comme un bloc style de plus à la fin, par exemple issu d’un fichier CSS séparé.

Résultat

Résultat
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Taille
214 → 144 caractères (33 % de moins).
Supprimé : 1 commentaires, 0 règles vides. Les commentaires commençant par /*! sont conservés.

Comment le calcul est fait

Cet outil propose trois choses pour les feuilles de style : minifier pour des fichiers légers, formater pour un code lisible et inliner pour les e-mails HTML, où certains programmes ignorent ou tronquent les blocs style.

Minifier le CSS

  1. Choisissez « Minifier » et collez votre CSS.
  2. Copiez le résultat ou téléchargez-le sous style.min.css. En dessous, vous voyez de combien le fichier a diminué.

Seules les transformations sans effet sur le rendu sont appliquées : les commentaires (sauf /*! … */) et les espaces disparaissent, ainsi que le dernier point-virgule avant }, 0.50em devient .5em, #aabbcc devient #abc et 0px devient 0. Les zéros avec unité restent là où ils sont nécessaires : dans calc(), min(), max(), clamp(), dans le raccourci flex, pour les durées, angles et pourcentages et dans les propriétés personnalisées. Les chaînes et url() restent inchangées.

Formater le CSS

Un CSS compressé devient un code lisible : une déclaration par ligne, listes de sélecteurs ligne par ligne, blocs indentés et une ligne vide entre les règles. Les commentaires sont conservés.

Inliner le CSS dans le HTML

Collez un document HTML avec un bloc style. Pour chaque élément, les règles correspondantes sont évaluées, triées par spécificité et par ordre, puis écrites dans l’attribut style. Un attribut style existant l’emporte sur les règles normales, et !important sur tout. Ce qui ne peut pas être écrit dans un élément, comme :hover, les pseudo-éléments, @media et @font-face, reste dans un bloc style.

Bon à savoir

Votre code reste dans votre navigateur et n’est ni envoyé ni enregistré.

Questions fréquentes

Comment minifier du CSS ?

Choisissez le mode « Minifier » et collez le CSS. Commentaires, espaces et zéros inutiles sont supprimés, et le résultat peut être copié ou téléchargé en fichier.

La minification change-t-elle l’affichage ?

Non, elle n’applique que des transformations sûres. Les zéros avec unité restent par exemple dans calc() et dans le raccourci flex, car ils y sont nécessaires. Les chaînes et url() ne sont pas touchés.

À quoi sert l’inlining du CSS ?

Certains programmes de messagerie ignorent les blocs style en tout ou en partie. L’inlining écrit chaque règle dans l’élément sous forme d’attribut style, pour que la mise en forme arrive.

Que deviennent :hover et @media lors de l’inlining ?

Ils ne peuvent pas être écrits dans un élément et restent donc dans un bloc style dans le head. Les programmes qui les prennent en charge les appliquent toujours.

Comment l’outil tranche-t-il entre des règles contradictoires ?

Selon la cascade CSS : !important d’abord, puis la spécificité la plus élevée, et à égalité la règle la plus tardive. Un attribut style existant compte comme un sélecteur de spécificité maximale.

Mon code est-il envoyé ?

Non. Tout se passe dans votre navigateur ; le code n’est ni envoyé, ni enregistré, ni ajouté à la barre d’adresse.

Sources et références juridiques

Dernière mise à jour : · Principes éditoriaux

Outils similaires