Comment ça marche
Le minificateur supprime /* commentaires */, réduit les espaces en un seul espace, supprime les espaces autour de la ponctuation structurelle telle que { } : ; , >, et supprime le point-virgule final avant une accolade fermante. Il ne renomme pas les sélecteurs, ne fusionne pas les règles et ne réorganise pas la cascade.
- Un minificateur conservateur : il ne supprime pas les règles inutilisées ni ne réécrit les valeurs. Testez toujours à nouveau la feuille de style par la suite.
Pourquoi c'est important
Chaque kilo-octet de CSS bloquant le rendu retarde la première peinture. La minification est la victoire la moins chère disponible après la suppression des règles inutilisées, et un outil qui ne touche que les caractères manifestement redondants peut être fiable lors d'une étape de construction sans redéfinir votre feuille de style.
Un exemple concret
Une règle écrite sous la forme .card { color: red; remplissage : 10px 20px ; } devient .card{color:red;padding:10px 20px}, économisant quelques dizaines d'octets par règle et bien plus encore sur une vraie feuille de style.
Erreurs courantes
- Suppression des espaces autour de + et - à l'intérieur de calc(), ce que la spécification exige.
- Réduire SCSS ou LESS au lieu du CSS compilé.
- Ignorer le contrôle visuel après la réduction.
Conseils pratiques
Conservez la source non minifiée dans le contrôle de version et réduisez-la en tant que sortie de build. Si vous utilisez des propriétés personnalisées avec des solutions de secours, comparez les styles calculés dans DevTools avant et après : la cascade est préservée, mais un seul espace perdu peut modifier la façon dont une valeur est analysée.
Comment l'utiliser
- Ouvrez l'outil. Tout se déroule dans l'onglet de votre navigateur.
- Collez ou saisissez votre saisie, puis choisissez l'action dont vous avez besoin.
- Vérifiez le résultat et copiez-le en un clic.
Questions courantes
Est-ce que cela supprime les règles CSS inutilisées ?
Non, il supprime les commentaires et les espaces redondants. La détection des règles inutilisées nécessite un audit complet.
Pourquoi calc() a-t-il cessé de fonctionner après la réduction ?
Les espaces autour de + et - à l'intérieur de calc() sont requis par la spécification CSS. Testez à nouveau la feuille de style après la réduction.
Peut-il minimiser SCSS ou LESS ?
Non, il s'attend à du CSS simple ; les préprocesseurs ont leurs propres étapes de construction.
Cet outil est-il vraiment gratuit ?
Oui. Il n'y a pas de compte, pas de paywall et pas de limite d'utilisation. Tools App est financé par aumenso, le studio derrière elle.
Est-ce que quelque chose que j'entre est téléchargé ?
Non. L'outil s'exécute dans l'onglet de votre navigateur ; ce que vous saisissez ne nous est jamais envoyé et n'est jamais stocké.