11 outils utiles pour vérifier, nettoyer et optimiser votre fichier CSS

Réduire la taille de fichier de la feuille de style CSS a été considéré par beaucoup comme un bon moyen d’accroître la vitesse de chargement de votre site. En effet, en réduisant le fichier CSS de plusieurs kilo-octets, le serveur prendra moins de temps à charger et donnera une page Web plus rapide..

Si vos articles apparaissent en première page de Digg, cela pourrait également être l’un des rares facteurs déterminants (il en existe bien plus) que votre serveur tombe en panne ou non..

Certaines des méthodes les plus courantes utilisées pour minimiser / optimiser une feuille de style CSS impliquent l’élimination des sélecteurs inutilisés, des espaces non désirés, des tabulations, des commentaires et la modification de la déclaration longhand en notation abrégée..

Je sais que certains d’entre vous n’êtes pas assez au fait des technologies pour éditer votre propre code CSS. Je vais donc vous fournir ici quelques-uns des outils utiles que vous pouvez utiliser pour optimiser votre code CSS, même si vous n’avez absolument aucune connaissance de Codage CSS.

Vérifiez votre code CSS

W3C CSS Validator

Le validateur CSS du W3C est un outil que vous pouvez utiliser pour valider votre code CSS. Vous pouvez soit télécharger le validateur Java sur votre ordinateur et l’utiliser hors ligne, soit utiliser le formulaire en ligne pour vérifier votre code CSS..

Module de validation CSS pour Firefox

Pour faciliter la validation de votre code CSS, il existe cette extension Firefox - CSS Validator - que vous pouvez installer sur votre navigateur. Une fois installé, vous pouvez facilement et rapidement vérifier votre code avec un clic droit de la souris.

CSSCheck

Même si votre code CSS est validé, cela ne signifie pas qu'il est exempt d'erreur. La validation signifie seulement qu’elle est conforme aux normes CSS définies par le W3C. Si vous souhaitez valider et examiner quelques problèmes de compatibilité de navigateur avec votre feuille de style, CSSCheck est un bon outil pour vous..

Analyseur CSS

CSS Analyzer est un outil utile qui vous permet de valider votre feuille de style par rapport à la norme du W3C, d'effectuer un test de contraste de couleur et un test pour vous assurer que les tailles appropriées sont spécifiées en unités de mesure relatives..

Si vous vous le demandez, le test de contraste de couleur permet de vérifier que les combinaisons de couleurs de premier plan et d'arrière-plan fournissent un contraste suffisant lorsqu'elles sont visionnées par une personne déficiente en couleur ou sur un écran noir et blanc..

Nettoyez votre code CSS

Sélecteurs Dust-Me

Dust-Me Selectors est une extension de Firefox qui trouve des sélecteurs CSS inutilisés sur la page que vous consultez. Lorsque vous testez les pages suivantes du même domaine, le résultat est recoupé avec les données précédentes et tous les sélecteurs rencontrés sont rayés de la liste. Vous pouvez l'utiliser pour tester des pages individuelles ou le faire parcourir tout le site..

En fin de compte, vous obtiendrez un rapport sur les sélecteurs qui ne sont utilisés nulle part sur le site. Vous pouvez ensuite supprimer ces sélecteurs de votre feuille de style (moins de code signifie plus petite taille de fichier).

Vérificateur de redondance CSS

Semblable aux sélecteurs Dust-Me, cet outil vérifie sur votre site les sélecteurs CSS inutilisés et redondants. La seule différence est que vous devez entrer manuellement l'URI de chaque page à tester..

Optimiser et compresser votre code CSS

Une fois que vous avez terminé de vérifier la validité de votre CSS et nettoyé le code inutile, il est temps d'optimiser le fichier CSS et de le réduire à la taille minimale..

CSS Tidy

CSS Tidy est un logiciel open source que vous pouvez utiliser pour optimiser et compresser votre fichier CSS. Il est disponible au format .exe (Windows uniquement) et au format de script php compressé (toutes les plateformes, pour les développeurs Web). CSS Tidy supprime principalement les commentaires, les espaces inutiles et modifie une partie du code en abrégé. Pendant la compression, vous pouvez choisir entre la lisibilité du code et la compression maximale. En fonction de la longueur de votre code, vous pouvez facilement atteindre un taux de compression allant jusqu'à 30% ou plus..

Depuis que CSS Tidy est un projet open source, plusieurs sites Web ont utilisé le code et l’ont transformé en un outil en ligne que les utilisateurs peuvent utiliser. En voici quelques uns:

• CLEAN CSS
• Code Beautifier
• Formateur et optimiseur CSS de CSS Portal

Autres optimiseurs CSS

FlumpCakes CSS Optimizer

Un optimiseur simple comprenant plusieurs options parmi lesquelles vous pouvez choisir.

Robson CSS Compressor

Bien que cela puisse paraître identique à d’autres, j’ai trouvé que le taux de compression de Robson CSS Compressor était le plus élevé parmi tous. Bien que plusieurs options vous soient proposées pour modifier le réglage, le fait de laisser toutes les options intactes (toutes les options cochées) produit toujours le meilleur résultat..

Lecteur CSS Compresseur CSS

CSS Compressor proposé par CSS Drive existe en deux modes que vous pouvez utiliser: Normal et Avancé. En mode Normal, il vous suffit de sélectionner le niveau de compression souhaité (Léger, Normal ou Super Compact) et le compresseur CSS fera le reste. En mode Avancé, vous disposez de plus d'options et vous avez plus d'influence sur la façon dont vous souhaitez optimiser votre feuille de style..

Optimiseur CSS

L'optimiseur CSS de mabblog.com est une application en ligne de commande pour Mac et Linux. Il est destiné à ceux qui sont plus à l'aise avec le terminal qu'avec une interface en ligne. Il existe également une version en ligne simple disponible pour ceux qui veulent le faire rapidement avec.

Espérons que les outils énumérés ici sont suffisants pour vous permettre de peaufiner et d’optimiser votre feuille de style CSS. Si vous avez utilisé d'autres outils plus utiles que ceux mentionnés ci-dessus, partagez-les avec nous dans les commentaires..

En savoir plus sur: Design Web, Développement Web, Outils pour les webmasters.