Le CSS définit l’apparence d’une page web. Cet outil peut supprimer les espaces inutiles avant la publication ou en ajouter pour faciliter la lecture et la modification des règles.
Minifier votre CSS
Choisissez
Minifierau-dessus des éditeurs.Utilisez Coller pour coller votre CSS dans l’éditeur d’entrée, ou
Importerpour choisir un fichier.cssà ouvrir.Si l’option Traitement automatique est activée, le résultat se met à jour pendant la saisie. Lorsque ce réglage est visible, vous pouvez le désactiver et cliquer sur Minifier une fois vos modifications terminées. Sur téléphone, utilisez Minifier chaque fois que vous souhaitez actualiser le résultat.
Utilisez
Copierpour copier le résultat, ouTéléchargerpour l’enregistrer dans un fichier CSS.
Par exemple, le CSS ci-dessous affiche un titre en rouge. Après minification, il devient h1{color:red}. Le titre reste rouge.
h1 {
color: red;
}Rendre du CSS compressé plus lisible
Choisissez Formater si le CSS est difficile à lire parce que tout est regroupé. Le résultat place les déclarations sur des lignes distinctes et les indente de deux ou quatre espaces, selon le réglage choisi.
Le formatage ajoute des espaces. Le résultat peut donc être plus volumineux que l’original. Il ne restitue ni les commentaires ni la mise en forme supprimés lors d’une minification précédente.
Intervertir place le résultat dans l’éditeur d’entrée et bascule entre Minifier et Formater. Si l’option Traitement automatique est désactivée, relancez le traitement avec le bouton principal pour obtenir le nouveau résultat.
Choisir les modifications autorisées
| Réglage | Effet |
|---|---|
| Conserver les commentaires importants | Conserve les commentaires qui commencent par /*!. Les commentaires ordinaires sont supprimés. Désactivez cette option uniquement si vous souhaitez aussi supprimer les commentaires marqués. |
| Restructurer et fusionner les règles | Autorise la fusion et la réorganisation des règles compatibles. Désactivez cette option pour empêcher ces modifications de structure. |
| Traitement automatique | Actualise le résultat après une modification du code ou des réglages. Si l’option est désactivée, l’ancien résultat est effacé dès qu’il ne correspond plus à la saisie. Ce réglage n’est pas affiché sur téléphone. |
| Indentation du résultat | En mode Formater, choisissez deux ou quatre espaces par niveau d’indentation. |
| Retour à la ligne | Affiche les lignes longues sur plusieurs lignes dans les éditeurs. Ce réglage modifie l’affichage du code à l’écran, pas le fichier téléchargé. |
Testez la feuille de style obtenue sur votre site avant de remplacer l’original, surtout si la restructuration est activée. Gardez le fichier d’origine pour pouvoir y revenir.
Importer, copier et télécharger
La commande Importer accepte un seul fichier CSS à la fois. Vous pouvez aussi déposer un fichier CSS sur la page. Si l’éditeur contient déjà du code, l’import d’un autre fichier demande confirmation avant de le remplacer. Annuler conserve votre travail.
Le bouton Coller remplace le contenu de l’éditeur d’entrée par le texte du presse-papiers. Le navigateur peut demander une autorisation. Vous pouvez aussi cliquer dans l’éditeur et utiliser votre raccourci habituel pour coller.
Les commandes Copier et Télécharger utilisent le contenu de l’éditeur de sortie. Le fichier téléchargé porte l’extension CSS et contient minified ou beautified dans son nom. Enregistrez le résultat avant de quitter la page, car le contenu des éditeurs n’est pas restauré au rechargement.
Sur téléphone, la barre d’actions garde le bouton de traitement principal et la commande Copier à portée de main. Ouvrez Plus pour accéder aux autres commandes et aux réglages de commentaires, de restructuration ou d’indentation du mode choisi. Le réglage Traitement automatique n’est pas disponible dans cette présentation.
Comprendre les tailles affichées
Les tailles s’affichent sous les éditeurs dans une fenêtre de plus de 768 pixels de large. Elles sont masquées dans une fenêtre plus étroite. Les tailles d’origine et de sortie mesurent le texte CSS en octets. La réduction compare ces deux valeurs. Le formatage peut augmenter la taille du fichier, même si le pourcentage de réduction affiché ne devient pas négatif.
La taille gzip estime le volume après compression gzip dans ce navigateur. Le serveur web peut compresser le fichier différemment. Cette valeur ne correspond donc pas nécessairement au volume téléchargé par chaque visiteur.
Si le résultat ne correspond pas à vos attentes
En mode Minifier, l’avertissement de syntaxe indique la ligne et l’emplacement à vérifier. Assurez-vous qu’un deux-points sépare chaque propriété de sa valeur et que les parenthèses, crochets et accolades sont bien fermés. La minification peut parfois produire un résultat à partir de CSS partiellement incorrect. Un résultat visible ne prouve donc pas que toutes les règles sont correctes.
Le mode Formater réorganise le texte pour faciliter sa lecture et signale aussi les erreurs de syntaxe détectées par l’analyseur. Aucun des deux modes ne vérifie que chaque déclaration fonctionne comme prévu.
Si le résultat disparaît après une modification, cliquez à nouveau sur Minifier ou Formater. Lorsque le réglage Traitement automatique est visible, activez-le pour actualiser le résultat pendant la saisie. La commande Effacer efface le contenu des deux éditeurs après confirmation. Annuler le conserve.
Le CSS est traité dans votre navigateur. Les statistiques d’utilisation sous l’outil peuvent rester enregistrées sur cet appareil, mais elles ne conservent pas votre feuille de style. Les totaux comptabilisent les traitements lancés avec Minifier ou Formater. Les mises à jour automatiques ne s’y ajoutent pas.