Traitement local

OUTILS POUR DÉVELOPPEURS

Minifier CSS

Ramenez la feuille de style à sa taille minimale en retirant tout ce dont le navigateur n'a pas besoin pour l'interpréter.

Utiliser cet outil

CODE EDITOR

CSS Minifier

Local processing · professional engine · your code is never sent

CSS · ready to process
CSSinput.css
0 linesCSS
CSSminified.cssPreview
0 linesRead onlyCSS

Pourquoi le CSS bloque le rendu

Contrairement à un script différé, la feuille de style bloque le premier affichage : le navigateur ne montre rien tant qu'il ne l'a pas. Son poids compte donc davantage que sa taille sur disque ne le laisse croire, et c'est là que la minification rapporte plus que sur du JavaScript.

Ce qui est supprimé

Commentaires, espaces entre sélecteurs et déclarations, sauts de ligne et point-virgule final de chaque bloc. Les noms de classe et les valeurs restent intacts : aucun renommage, aucune réécriture de propriétés.

La plus grosse économie n'est pas ici

Autant le dire franchement : dans une vraie feuille de style, ce qui pèse le plus, ce sont généralement les règles que plus personne n'utilise. La minification compresse aussi le CSS mort. Pour une amélioration sérieuse, retirez d'abord l'inutilisé, puis minifiez le reste.

FOIRE AUX QUESTIONS

Ma feuille de style est-elle envoyée à un serveur ?

Non. Elle est traitée dans votre navigateur : vous pouvez minifier le CSS d'un projet privé sans qu'il quitte votre poste.

Cela change-t-il l'apparence de la page ?

Non. Seul ce que le navigateur ignore en interprétant le CSS est retiré.

Peut-on revenir en arrière ?

Vous pouvez réindenter avec le formateur, mais les commentaires ne sont pas récupérés.

Supprime-t-il les règles inutilisées ?

Non. Cela suppose d'analyser le HTML qui consomme la feuille, ce qui relève d'un autre outil.