Emmet LiveStyle synchronise le style du navigateur et l’éditeur de code
Pour modifier l’aspect d’un site, on utilise traditionnellement un éditeur de code qui permet de travailler sur une feuille de style (fichier .css), que l’on publiera ensuite sur son serveur. Depuis plusieurs années, les navigateurs sont capables d’inspecter n’importe quelle page web et de modifier la feuille de style à la volée. Mais jusque-là, on ne pouvait pas passer facilement de l’un à l’autre : ce que l’on fait dans l’éditeur de code devait être synchronisé d’une manière ou d’une autre avec le site, et ce que l’on fait dans l’inspecteur d’éléments est perdu dès lors qu’on ferme la page en cours.
Emmet LiveStyle est un outil qui permet précisément de lier les deux. Réservé à Chrome côté navigateur, et à Sublime Text côté éditeur de code, il prend la forme d’une application et de deux extensions. Une fois en place, il met à jour instantanément la page web quand on modifie le code CSS — inutile de sauvegarder le fichier, la mise à jour se fait dès que l’on tape quelque chose. Et toutes les modifications appliquées depuis l’inspecteur web de Chrome sont reportées immédiatement dans la feuille de style en local.
Pour fonctionner, cet utilitaire nécessite d’ouvrir Sublime Text et les fichiers CSS correspondants à ceux utilisés sur le site. On active ensuite la synchronisation depuis Chrome, en utilisant le menu de l’extension et on a le choix dans le sens d’édition : du navigateur à l’éditeur, de l’éditeur au navigateur ou les deux. Ensuite, tout fonctionne en toute transparence, comme on s’y attend. Ce que l’on modifie d’un côté est modifié de l’autre, on a un rendu visuel immédiat dans le navigateur et si on utilise l’inspecteur pour changer le style et que l’on est satisfait du résultat, on peut récupérer directement les changements en local.
Par défaut, Emmet LiveStyle ne fonctionne qu’en local, sur l’ordinateur. Mais si vous voulez tester un style sur des appareils mobiles, ou dans un autre navigateur, vous pouvez aussi opter pour un mode distant. Dans ce cas, l’utilitaire génère une URL spécifique qui sera, elle aussi, mise à jour dès que vous changerez le code CSS.
Cet utilitaire est libre et gratuit et il fonctionne sur OS X et Windows. Son fonctionnement est expliqué en détails dans la documentation et le code source est disponible intégralement sur GitHub.
Vraiment intéressant : il existe déjà des outils de synchronisation de l'éditeur vers le navigateur, intégré (dans Brackets) ou en plug-in (live reload), mais aucun à ma connaissance du navigateur et de ses outils de développement vers l'éditeur. En même temps, je me demande dans quel scénario ou dans quel workflow c'est utile… la bonne nouvelle c'est qu'on peut le régler dans les deux sens et voir à l'usage.
@pat3 :
Le fait de travailler régulièrement sur des machines différentes m'empêche d'utiliser des solutions de ce genre facilement, et il faut aussi dire franchement que aucun développeur web sérieux n'utilise brackets...
L'inspecteur CSS de tous les navigateurs est extrêmement utile lors du déboggage du CSS... J'active/désactive constamment des propriétés pour voir ce qui cloche ou j'en ajoute simplement jusqu'à ce que le problème soit réglé puis je fais un copier-coller dans mon CSS quand tout est réglé !
Très intéressant cette feature. Je cours l'installer.
C'était il y a des années de ça le veux pieux de WebDAV
cette extension au protocole HTTP avait pour but de permettre au navigateur d'éditer directement en ligne les pages HTML.
Netscape avait alors adopté un menu édit qui permettait de modifier la page courante et d’enregistrer directement les changements sur le serveur.
Cela na jamais vraiment été utilisé comme tel.
WebDAV (Distributed Authoring and Versioning) a rapidement été vu comme un moyen de faire l'équivalent d'un disque partagé sur HTTP (like AFP or SMB).
De plus le V pour versioning a rarement été implémenté. svn le protocole de subversion en est une émanation.
et donc depuis on retombe régulièrement sur ce vieux problème. pourtant les techno ayant évolué ont a tout ce qu'il faut pour que le navigateur soit lui-même un éditeur. Il manque juste un consensus.
A+JYT