Xylescope, An Innovative CSS Tool for Analysis, Debugging, and Fine-tuningIl est beau, il est ergonomique, il est sous Mac uniquement, il vous permet de gérer comme jamais les styles CSS d’un site : c’est Xylescope.

Les fonctionnalités les plus marquantes, au delà de la superbe ergonomie de ce logiciel, sont les suivantes :

  • l’analyse des CSS grâce à des outils de visualition multiples (par sélecteur, par cascade, par aperçu HTML…),
  • le debuggage des feuilles de styles (outils de correction automatique)
  • l’optimisation des CSS (alléger et structurer ses CSS devient un plaisir),
  • la création de design strucurés respectant les normes d’accessibilité les plus élevées.


Comparé à un lecteur de rayon-X pour les styles CSS, Xylescope est un outil étonnant par bien des aspects. Tout d’abord, il s’agit d’un logiciel uniquement dédié à la création, l’analyse et l’optimisation des CSS. L’unique réel équivalent auquel on peut penser, côté PC, est le plus connu TopStyle de Bradbury récemment racheté par NewsGator. Mais la comparaison s’arrête là, tant l’interface et la qualité technique de Xylescope est exceptonnelle.

Xylescope, un outil innovant pour l'analyse, le debuggage et l'optimisation des styles CSS

Tout y est : les outils de visualisation du code, des sélecteurs et le design HTML en prévisualisation permanente. Ce qui est particulièrement impressionant, et c’est là que la différence se fait, c’est l’expertise technique offrte par le logiciel. Dave Shea, le pape de CSS Zen Garden, en parle également en termes élogieux dans son article Xylescope paru le 26 juin dernier.

Pour 20$, Xylescope vous permet de re-travailler des feuilles de styles sur lesquelles vous n’avez pas travaillées depuis plusieurs mois ou années ; ou de pendre très facilement en main un design CSS créé par un autre. En effet, il n’est pas toujours aisé, dans les schémas CSS complexes de deviner ou de se rappeler de l’ID ou de la class ui permettait de positionner ce fichu bandeau…

De plus, cet outil vous permet de découvrir ce qui se cache derrière les somptueux design de grands webdesigners CSS tels qu’on peut les découvrir sur Style Gala, CSS Vault, CSS Beauty ou encore CSS Zen Garden.

Enfin, petite cerise sur le gâteau (comme s’il en fallait une), l’édition des styles est directement intégrée à Xylescope par l’utilisation de son éditeur HTML/CSS préférée (BBEdit, TextMate, SKedit ou celui de votre choix).