Pour le développement web, CSS est la technique la plus efficace pour embellir les pages et définir leur mise en page. Mais le problème est que CSS est un langage de balisage avec une structure syntaxique très souple et imprécise. Les programmeurs WEB trouvent souvent beaucoup de code redondant, des erreurs ou des zones pouvant être considérablement optimisées dans leurs propres fichiers CSS ou ceux d'autres personnes. Si vous utilisez souvent des langages de programmation statiques (comme Java, C), vous constaterez que des outils IDE pratiques apportent une énorme efficacité à la programmation. Un environnement de développement intégré comme Eclipse, capable d'analyser automatiquement les problèmes de code en temps réel, en est un exemple typique. Alors, les programmeurs CSS disposent-ils d'outils aussi utiles ?

Les 10 outils présentés ci-dessous sont tous des applications en ligne. Vous n'avez pas besoin de les installer sur votre ordinateur. Tant que vous avez accès à Internet, vous pouvez les utiliser. La plupart de ces outils sont très simples à utiliser, mais certains exigent une certaine maîtrise.

Outil de vérification des problèmes CSS :CSS Lint

CSS Lint est un outil open source pour valider la qualité des fichiers CSS. Il a été initialement écrit par Nicholas C. Zakas et Nicole Sullivan, et la version initiale a été publiée lors de la conférence Velocity en juin 2011. Les règles de détection de CSS Lint incluent des erreurs et des avertissements. Lorsque des sélecteurs ou des propriétés sont mal écrits, que des accolades sont manquantes ou que des points-virgules sont ajoutés de manière redondante, il signale des erreurs d'analyse, et les erreurs d'analyse sont affichées en priorité.

Outil d'analyse et de statistiques de code CSS :CSS Stats

Css Stats est un outil d'analyse de code CSS en ligne. Vous pouvez analyser le code CSS en saisissant l'URL CSS du site web. Css Stats est un outil puissant pour les designers web front-end afin d'analyser le code CSS d'un site web. Il peut compter les règles, les tailles de police, les largeurs et hauteurs, le nombre de couleurs, etc. dans le code CSS.

Pour les web designers, partager le code CSS d'une page web est indispensable. Pour analyser l'effet de la conception d'un site web entier, vous avez besoin de statistiques détaillées sur le nombre de polices, tailles de police, couleurs et couleurs d'arrière-plan utilisées dans la conception du site. Css Stats fournit également des données d'analyse CSS pour des sites web populaires, tels que Google, Yahoo, Twitter, Facebook, Tumblr, etc.

Outil d'optimisation et de compression de code CSS:CSS Shrinks

CSS Shrinks peut considérablement compresser la taille de votre CSS. De nombreux programmeurs Web écrivent du code CSS avec beaucoup de syntaxe redondante et d'espaces blancs. Cet outil peut optimiser la syntaxe CSS, supprimer les espaces inutiles et les lignes vides, compresser considérablement la sortie CSS et réduire fortement le gaspillage de bande passante sans affecter l'exactitude de votre CSS.

Outil de formatage de code CSS:ProCSSor

ProCSSor ne fournit pas seulement des fonctions de base d'optimisation de code CSS, mais offre également un grand nombre d'options de personnalisation. Par exemple, il vous permet de définir des options d'optimisation pour les règles CSS, les propriétés CSS et la syntaxe CSS. Il fournit également des solutions de repli pour l'incompatibilité des nouvelles propriétés et règles CSS3 dans divers navigateurs.

Référence de syntaxe CSS Codrops

La référence CSS de Codrops est riche et complète, et l'interface est épurée et simple. Vous pouvez utiliser cet outil pour maîtriser les connaissances les plus importantes et les plus complètes de CSS. Sa base de connaissances CSS est divisée en plusieurs catégories, notamment les pseudo-classes, les propriétés, les fonctions, les types de données, les concepts, les règles, etc.

Outil de requête de compatibilité des navigateurs CSS3:Can I Use

"Can I Use" - Vous trouverez ici la compatibilité de toutes les nouvelles fonctionnalités web entre différentes marques de navigateurs et différentes versions de chaque marque. Lorsque vous savez quels navigateurs vos utilisateurs cibles utilisent, ces tableaux vous seront d'une grande aide pour construire votre site web. Ouvrez caniuse.com, la page d'accueil répertorie toutes les fonctionnalités HTML5, CSS3 et autres nouvelles fonctionnalités web. Si vous souhaitez consulter la compatibilité d'une fonctionnalité dans différents navigateurs, cliquez simplement dessus. Par exemple, pour voir la compatibilité des polices web @font-face dans divers navigateurs, cliquez sur le premier élément de la zone CSS et vous verrez un tableau listant toutes les versions de navigateurs, avec différentes couleurs représentant la prise en charge de @font-face par chaque navigateur. Le rouge indique aucune prise en charge, le vert clair indique une prise en charge partielle. Les navigateurs listés dans la figure incluent également certains navigateurs de téléphones mobiles et tablettes, comme le navigateur du système Android. Avec des informations aussi complètes, lors de la conception d'un site web, vous pouvez utiliser de manière sélective des fonctionnalités CSS et JavaScript avancées en fonction des utilisateurs cibles du site afin d'améliorer l'expérience utilisateur.

Vérifiez si votre code est conforme aux normes CSS :Service de validation CSS du W3C

Cet outil sert à vérifier si votre syntaxe CSS est correcte et si elle est conforme aux normes CSS du W3C. Nous savons que depuis les premiers IE, divers navigateurs ont implémenté leurs propres dialectes, qui sont incompatibles entre eux d'un navigateur à l'autre. Cependant, lors du développement de pages web, nous devons autant que possible tenir compte de la compatibilité des navigateurs. La meilleure façon est de suivre les spécifications standard CSS du W3C. Le service de validation CSS du W3C sert à valider les problèmes dans votre CSS. Il vous indiquera quelle syntaxe, quelles propriétés et quelles règles posent problème.

CodePad

Codepad.org est un site web très intéressant. Sa page d'accueil est très simple : à gauche se trouvent les langages de programmation qui peuvent être compilés et exécutés, à droite se trouve la zone de saisie pour entrer votre programme, et sous la zone de saisie se trouvent une case à cocher « Run Code » et un bouton « Submit ».

Il est également très simple à utiliser. Sélectionnez d'abord le langage de programmation que vous souhaitez compiler et exécuter, puis collez ou saisissez le code source du programme dans la zone de saisie, puis cliquez sur « Submit ». Vous pouvez voir les messages d'erreur de compilation ou les résultats d'exécution.

Peut-être que vous trouvez cela ennuyeux, mais je pense que cela peut être très utile à certains moments, surtout lorsque vous ne pouvez pas trouver de compilateur et que vous voulez vérifier un morceau de code. Ces situations sont assez courantes. En particulier, il est difficile d'avoir un ordinateur capable d'exécuter tous les langages. S'il y en a un, ce doit être votre propre ordinateur personnel. Lorsque vous n'utilisez pas votre propre ordinateur, vous serez anxieux. De plus, je trouve ce service très intéressant car, de cette façon, vous pouvez même écrire des programmes dans n'importe quel langage sur votre téléphone portable.

Actuellement, ce site web prend en charge les langages suivants - C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Plain Text, Python, Ruby, Scheme, Tcl.

Outil de génération d'animations CSS :Gradient Animator

Il s'agit d'un outil de génération d'arrière-plan dynamique implémenté à l'aide des technologies CSS Gradient et CSS Animation. L'outil est très facile à utiliser. En quelques clics de souris, un code d'arrière-plan dynamique en dégradé moderne est généré. Il peut faire bouger en douceur l'arrière-plan dégradé CSS. Vous pouvez définir l'angle de déplacement, la vitesse de déplacement et l'angle du dégradé. Il prend en charge tous les navigateurs modernes et IE 10+. Il est très adapté pour réaliser des splash screens de pages web.

Outil de couleurs web :CSS Colours

Comme son nom l'indique, cet outil permet aux web designers de trouver facilement des couleurs. Il fournit les effets visuels de diverses couleurs, ainsi que les noms anglais des couleurs, les valeurs RGB et les valeurs hexadécimales, ce qui le rend très pratique à utiliser.

Source : http://www.webhek.com/10-css-tools