OnlineConverTools
Se connecter

Formateur CSS

Formatez ou minifiez du CSS

À propos de l’outil Formateur CSS

L’outil Formateur CSS propose deux boutons pour une même feuille de style. « Formater » lance js-beautify, le moteur de beautifier.io : une déclaration par ligne, une indentation de 2 espaces, au plus une ligne vide gardée entre les règles, et les commentaires et les valeurs url(data:…) laissés intacts. « Minifier » lance CSSO : les commentaires (sauf les commentaires de licence /* !) et les espaces disparaissent, les règles identiques sont fusionnées (a et button avec les mêmes déclarations deviennent a,button), les couleurs et les valeurs à zéro sont raccourcies. js-beautify et CSSO s’exécutent tous deux dans votre navigateur. Aucun des deux ne valide le CSS : un CSS invalide est formaté tel quel, et « Minifier » peut supprimer sans avertissement ce qu’il ne sait pas analyser.

Exemple

« Minifier » : deux règles aux mêmes déclarations sont fusionnées et #ff0000 devient red.

Entrée

a{color:#ff0000;margin:0px 0px}
button{color:#ff0000;margin:0px 0px}
/* end */

Sortie

a,button{color:red;margin:0}

Comment formater ou minifier du CSS

  1. 1Collez une feuille de style dans « Entrée ».
  2. 2Cliquez sur « Formater » pour obtenir un CSS indenté, ou sur « Minifier » pour la version compacte.
  3. 3Comparez « Sortie » avec votre original avant de le remplacer.
  4. 4Cliquez sur « Copier » ou « Télécharger » ; le fichier s’appelle « formatted.css », que vous ayez utilisé « Formater » ou « Minifier ».

Formats et limites

Entrée
Texte CSS, règles @ comme @media comprises
Formater
js-beautify : indentation de 2 espaces, une seule ligne vide à la suite au plus
Minifier
CSSO : fusionne les règles identiques, raccourcit les couleurs et les zéros, retire les espaces et les commentaires (sauf les /* !)
Validation
Aucune : les erreurs de syntaxe ne sont pas signalées

Où votre CSS est traité

Les deux moteurs sont des bibliothèques JavaScript que votre navigateur charge au premier clic ; le CSS que vous collez est traité sur votre appareil et n’est pas envoyé. Si une erreur s’affiche, son texte est envoyé à notre journal des erreurs avec le nom de l’outil ainsi que le nom et la version de votre navigateur, épuré des passages entre guillemets, des nombres longs et des adresses.

Questions fréquentes

La minification peut-elle casser mon CSS ?

Non, pour un CSS valide : CSSO n’applique que des changements qui donnent le même résultat, comme la fusion de règles identiques. Un CSS invalide, c’est autre chose : CSSO peut supprimer sans avertissement la partie qu’il ne sait pas lire, alors vérifiez la sortie.

« Formater » modifie-t-il mes valeurs ?

Non. « Formater » ne change que les espaces : les retours à la ligne, l’indentation de 2 espaces et l’espace après chaque deux-points. Les chaînes, les commentaires et les valeurs url(data:…) sont gardés caractère pour caractère.

Que retire « Minifier » ?

Les commentaires autres que les commentaires de licence /*!, les retours à la ligne, les espaces, le dernier point-virgule de chaque règle et les unités des valeurs à zéro ; « Minifier » change aussi #ff0000 en red et réunit les règles qui ont les mêmes déclarations, comme dans l’exemple ci-dessus.

Trucs et astuces

  • ✓Formatez d’abord une feuille de style tierce minifiée pour trouver la règle qu’il vous faut, puis modifiez votre propre fichier source.
  • ✓Pour SCSS ou LESS, utilisez l’outil Formateur de code, qui formate les deux avec Prettier.

Outils associés