CSS Scan simplifie l’analyse du style des sites dans Chrome et Firefox
CSS Scan est une nouvelle extension pour les navigateurs qui simplifie nettement l’analyse du style des sites. Tous les navigateurs modernes intègrent un inspecteur qui permet, entre autres choses, de consulter les feuilles de style CSS de chaque page. Mais cette extension va plus loin, puisqu’elle affiche directement le code CSS correspondant à n’importe quel élément survolé sur la page dans un petit pop-up. Au passage, le code CSS est « nettoyé » pour un affichage plus clair, notamment concernant les propriétés de survol.
Outre cette fonction d’affichage, CSS Scan simplifie la vie des designers et développeurs web en permettant de copier le contenu CSS affiché d’un clic. La barre d’espace permet aussi de bloquer le bloc actuellement à l’écran et d’en afficher un deuxième en survolant un autre élément de la page. D’autres options sont proposées dans le menu dédié, l’une pour afficher la grille qui sépare chaque élément, l’autre pour gérer ce qui sera copié exactement (uniquement les propriétés ou aussi les noms de classe, par exemple).
Pour le moment, l’extension CSS Scan est proposée dans Chrome et Firefox, mais son créateur nous a indiqué qu’une version pour Safari allait suivre prochainement. Dans tous les cas, l’extension ajoute son interface en haut ou en bas de la page en cours et vous pouvez l’activer d’un clic ou en utilisant le raccourci clavier ⌘⇧S sur macOS.
Contrairement à la majorité des extensions de navigateurs, CSS Scan est payante. Vous pouvez la télécharger sur le Web Store de Chrome, mais elle sera inutile sans une licence, et vous pourrez télécharger l’extension Firefox après achat. L’extension est vendue 25 $ HT en temps normal, mais elle est proposée pour quelques heures encore à 10 $ HT seulement, soit environ 10,7 € TTC.
Il n’y a pas vraiment de démonstration limitée dans le temps, mais vous pouvez tester gratuitement CSS Scan sur son site officiel. Cliquez sur le bouton « Try it yourself on this page » en haut et vous activerez une interface similaire à celle des extensions Chrome et Firefox, mais dans le navigateur en cours. Et cela fonctionne même dans Safari.
Cette extension a vraiment l’air géniale, je vois tout de suite son potentiel d’exploitation didactique. J’ai tiqué au concept d’extension payante, mais pourquoi pas, au regard de son utilité, par rapport aux outils de développement classiques intégrés au navigateur.
Mais le tarif ? C’est le prix d’un app, pas d’un hack. Il adresse certes une fonction qui manquait de commodité, mais dans un secteur où les outils gratuits sont plutôt pléthoriques (les éditeurs de code, de nombreux IDE, les innombrables tutoriels accessibles en ligne avec code téléchargeable, sans compter les outils de développement des navigateurs eux-mêmes). Et je suis persuadé qu’il en aurait vendu des tas s’il l’avait limité à un prix sans barrière psychologique, genre 5€ tout de suite et 10 si vous réfléchissez trop.
En tout cas l’idée me paraît excellente, et je souhaite bon courage à son développeur.
+1
Il devrait parier sur le volume plutôt que sur un prix élevé…
les navigateurs le font déjà bien, le faire très bien ou de manière plus pratique ne vaut pas 10 ou 15 euros selon moi.
@pat3
D'accord avec toi. Je trouve l'extension très intéressante mais le prix est rédhibitoire face aux solutions gratuites.
Entre l'actu pour ne rien dire (ce qui pourrait être les couleurs des futurs...) et de la pub déguisée, macge est tombé bien bas, a l'instar d'Apple ?
@pombour
Je ne devrais probablement pas répondre, mais des fois que ce soit un commentaire sincère et pas un troll…
Tous nos articles payés/publicitaires sont clairement indiqués comme tel. Cet article n'est pas de la publicité, j'ai contacté le créateur de l'extension pour avoir des infos et tester gratuitement son travail. C'est ce que l'on fait systématiquement et cela n'a aucun impact sur mon avis.
Cher Nicolas, votre intégrité et votre rigueur journalistique, que je ne remets pas en doute, aurait dû cependant vous enjoindre à acheter le produit et non pas le tester gratuitement. Votre indépendance n'aurait pas été discutée. Quelle utilité pour nous, lecteurs, que vous l'ayez testé donc uniquement sur leur site, puisque la version gratuite ne permet que cela ? Vous conviendrez du biais potentiel dans votre article maintenant que l'on sait que vous avez contacté le développeur. À moins que vous l'ayez fait sous un pseudo ? Aviez-vous besoin de contacter le développeur alors que tout le contenu de votre article sont des informations disponibles sur leur site. Donc, sans nécessairement prendre la défense de @pombour, acceptez que certains de vos lecteurs ont parfois des doutes. Pas difficile d'être transparent et de dire : on a acheté le produit sous pseudo, on l'a testé, (éventuellement) on s'est fait rembourser après la période de test (si vous avez des problèmes de trésorerie). Néanmoins, merci pour ce que vous faites sur macg.
@jocool
"Quelle utilité pour nous, lecteurs, que vous l'ayez testé donc uniquement sur leur site, puisque la version gratuite ne permet que cela ?"
Qu’est-ce qui te dit qu’il a testé l’application gratuite ? Si une rédaction devait acheter tous les logiciels dont elle parle, elle mettrait tout bonnement la clé sous la porte. Non, tous les devs offrent des licences à qui leur chantent, et d’autant plus si c’est organe de presse qui les contacte parce qu’il trouve leur produit intéressant.
Même Apple prête/donne du matériel à des porte-voix triés sur le volet quand ça l’arrange, mais la plupart de la presse mac doit se payer tous les objets dont elle parle.
Je veux bien qu’on émette des doutes mais se renseigner avant, voir si le deal a un quelconque intérêt, c’est bien.
@pat3
"Non, tous les devs offrent des licences à qui leur chantent, et d’autant plus si c’est organe de presse qui les contacte parce qu’il trouve leur produit intéressant."
Dans ce cas, c'est du publi-reportage si l'organe de presse accepte. Ben non, on ne doit pas accepter de cadeaux.
Je ne vois pas le problème d'acheter, tester, et se faire rembourser. Y'a des règles et des usages de commerce sur ce dernier point.
"Qu’est-ce qui te dit qu’il a testé l’application gratuite ?"
Laissons Nicolas répondre si vous voulez bien.
@jocool
Des gars même pas abonnés à MacG qui affirment qu’il ne faut pas accepter de cadeaux ???
On est en train de trouver que 10 balles c’est trop cher.....
Pour des infographistes qui s'intéressent au CSS c'est vraiment pas mal.
Je détesterais critiquer un magazine gratuit.
Cela dit l'article sur Clean My Mac X était présenté sous la rubrique Logiciels et non Sponsors, alors que son style rédactionnel ne ressemblait à rien de ce que j'ai pu lire sur Mac G.
Le plus fou, sachant cela, c'est que j'ai téléchargé puis testé puis finalement acheté CleanMyMac X. Pourtant, ce soft fait beaucoup de choses que d'autres utilitaires gratuits ou payants que je possède déjà. Mais il le fait à une vitesse très élevée. Comme si on exécutait des commandes Shell dans Terminal. Et comme je ne parvenais pas à déterminer ce qui freeze périodiquement une application ou l'autre sur mon ordi, je suis passé de l'allopathie au charlatanisme (?) de CleanMyMac. L'effet placebo donne de bons résultats sur la machine en tout cas.
"Mais cette extension va plus loin, puisqu’elle affiche directement le code CSS correspondant à n’importe quel élément survolé sur la page dans un petit pop-up."
C'est déjà le cas dans chrome v74
Par le lien ci-dessous il semble encore possible de l’acheter dans les 10€
https://getcssscan.com/?ref=producthunt