hideout-lastation.com
5 outils pour aider à vérifier et optimiser vos codes CSS
Une fois que votre site Web commence à croître, votre code le sera également . Au fur et à mesure que votre code se développe, CSS peut devenir soudainement difficile à maintenir et vous risquez d'écraser une règle CSS par une autre. Cela complique les choses et vous finirez probablement avec beaucoup de bugs.
Si cela vous arrive, il est temps pour vous de vérifier les CSS de votre site . L'audit de votre CSS vous permettra d'identifier les parties de votre CSS qui ne sont pas optimisées. Vous pouvez également réduire la taille de fichier de la feuille de style en éliminant les lignes de code qui ralentissent les performances de votre site.
Voici 5 bons outils pour vous aider à vérifier et optimiser les CSS.
1. Type-o-matic
Type-o-matic est un plugin Firebug pour analyser les polices utilisées sur un site web. Ce plugin donne un rapport visuel dans une table, portant les propriétés de police telles que la famille de police, la taille, le poids, la couleur, et aussi le nombre de fois que la police est utilisée dans la page Web. Grâce au tableau de rapport, vous pouvez facilement optimiser l'utilisation de la police, supprimer ce qui est inutile ou combiner des styles trop similaires.
2. CSS Lint
CSS Lint est un outil de filtrage qui analyse la syntaxe CSS en fonction de paramètres spécifiques qui concernent la performance, l'accessibilité et la compatibilité de votre CSS. Vous seriez surpris des résultats, attendez-vous à beaucoup d'avertissements dans votre CSS. Cependant, ces erreurs finiront par vous aider à corriger la syntaxe CSS et à la rendre plus efficace. De plus, vous serez également un meilleur écrivain CSS.
3. CSS ColorGuard
CSS ColorGuard est un outil relativement nouveau. Il est construit en tant que module Node et fonctionne sur toutes les plateformes: Windows, OS X et Linux. CSS ColorGuard est un outil de ligne de commande qui vous avertira si vous utilisez des couleurs similaires dans votre feuille de style; Par exemple, #f3f3f3 est assez proche de #f4f4f4, donc vous pourriez envisager de fusionner les deux. CSS ColorGuard est configurable, vous pouvez définir le seuil de similarité et définir les couleurs que vous voulez que l'outil ignore.
4. CSS Dig
CSS Dig est un script Python et fonctionne localement sur votre ordinateur. CSS Dig exécutera un examen approfondi dans votre CSS. Il lira et combinera les propriétés, par exemple toutes les déclarations de couleur d'arrière-plan iront sous la section d'arrière-plan. De cette façon, vous pouvez facilement prendre des décisions en fonction du rapport lorsque vous essayez de standardiser votre syntaxe CSS, par exemple vous pouvez trouver la couleur dans les styles avec la déclaration de couleur suivante.
couleur: #ccc; couleur: #cccccc; couleur: #CCC; couleur: #CCCCCC;
Ces déclarations de couleurs font la même chose. Vous pourriez aussi bien aller avec le #ccc ou avec le capital #CCC comme standard. CSS Dig peut exposer cette redondance pour d'autres propriétés CSS, et vous serez en mesure de rendre votre code plus cohérent.
5. Dust-Me
Dust-Me est un add-on pour Firefox et Opera qui montrera les sélecteurs inutilisés dans votre feuille de style. Il va saisir toutes les feuilles de style et les sélecteurs qui se trouvent dans votre site Web et trouver les sélecteurs que vous utilisez réellement dans la page Web. Cela sera montré dans un rapport, vous pouvez alors appuyer sur le bouton Nettoyer et il va nettoyer ces sélecteurs inutilisés et l'enregistrer dans un nouveau fichier CSS.
Vous pouvez télécharger ces outils depuis la page Firefox Addons ou le site du développeur, et si vous êtes fans d'Opera, vous pouvez l'obtenir à partir de la page Opera Extensions Gallery.
Style de case à cocher avancé avec CSS Grid
Le module CSS Grid Layout Module peut non seulement résoudre un mammouth d'un problème de mise en page, mais aussi quelques bons vieux problèmes de mulass auxquels nous avons eu affaire depuis longtemps, tels que le stylisation d'une étiquette de case à cocher .Bien qu'il existe une méthode relativement simple pour styler l'étiquette lorsqu'elle apparaît après la case à cocher, ce n'est pas si simple lorsque l'étiquette apparaît devant elle .Style de ca
Galeries d'images et curseurs jQuery gratuits - Best Of
Les galeries d'images et les curseurs sont parmi les cas d'utilisation les plus populaires de jQuery. Ils vous permettent de présenter la bonne quantité d'informations visuelles à vos visiteurs tout en économisant un espace précieux sur votre site Web.En conséquence, votre page semblera moins encombrée mais vous pouvez toujours ajouter toutes les images dont vous avez besoin pour transmettre votre message. Les g
