Ouvrir le menu principal

MacGeneration

Recherche

Emmet LiveStyle synchronise le style du navigateur et l’éditeur de code

Nicolas Furno

mardi 29 décembre 2015 à 13:30 • 4

Logiciels

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.

Ici, on modifie un attribut CSS directement dans le navigateur à gauche, le fichier en local modifié dans l’éditeur de code à droite est mis à jour aussitôt. Cliquer pour agrandir

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.

Rejoignez le Club iGen

Soutenez le travail d'une rédaction indépendante.

Rejoignez la plus grande communauté Apple francophone !

S'abonner

Le métro parisien de nouvelle génération rajeunit l'USB-A

16:30

• 26


De nouveaux problèmes de compatibilités entre macOS Sequoia et Microsoft Exchange ?

15:00

• 12


Sosh : le forfait 20 Go en Série limitée va augmenter sauf refus de votre part

12:40

• 51


Western Digital divorce de SanDisk (et veut fabriquer des disques de 100 To)

11:00

• 17


Arm vendrait son premier processeur clé en main à Meta

10:07

• 3


Incogni : on l'a testé, notre bilan après 12 mois d'utilisation 📍

09:55


Spotify lancerait en 2025 une option payante pour les super fans de musique

09:32

• 28


Des écrans, mais surtout des robots humanoïdes. Futur joyeux ou apocalyptique ? La semaine de Gurman

16/02/2025 à 20:30

• 31


Promo : le MacBook Air M3 16 Go à 1099 € (+ une cagnotte de 109 € chez Leclerc)

16/02/2025 à 18:16

• 20


Easter Egg : quand Apple cache des petites blagues dans ses produits

16/02/2025 à 10:00

• 17


Plans commence à rebaptiser le Golfe du Mexique 🆕

16/02/2025 à 09:45

• 169


Avec visionOS 2.4, le Vision Pro devrait s'ouvrir à Apple Intelligence

16/02/2025 à 09:01

• 23


DockKit, la technologie Apple dont vous ignorez probablement l'existence, s'améliore encore

15/02/2025 à 12:37

• 12


Sortie de veille : le premier produit Apple de l’année fait-il battre notre cœur ?

15/02/2025 à 08:00

• 12


iPhone SE 4 : les chiffres de vente devraient cartonner, selon Ming Chi-Kuo

15/02/2025 à 07:30

• 52


Le site gouvernemental DOGE.gov monté à l’arrache... et piraté en quelques heures

14/02/2025 à 20:30

• 227