StyleURL : pour exporter les modifications CSS réalisées sur Chrome DevTools

Les intégrateurs web utilisent fréquemment la console DevTools de Google Chrome pour tester des modifications CSS. Ils appliquent ensuite ces changements à leurs feuilles de style. L’outil StyleURL permet de sauvegarder et partager facilement les modifications effectuées sur Chrome.

Une extension Chrome pour sauver les modifications CSS

StyleURL est une extension pour Google Chrome, vous pouvez la télécharger sur le web store. Elle devient visible lorsque vous réalisez une modification CSS depuis votre navigateur (en accédant aux DevTools). Une barre horizontale s’affiche alors en bas de l’écran pour :

• Lister les changements réalisés.
• Obtenir une URL de partage de ces changements.
• Exporter les modifications CSS sur GitHub directement.

Dans l’exemple ci-dessous, nous avons modifié la CSS de notre titre. Nous avons changé la police (Aller plutôt que Source Sans Pro), la taille (37px plutôt que 30px) et la couleur (noir plutôt que gris foncé). Ces modifications de la CSS sont résumées dans la fenêtre située en bas à droite.

Partager ou exporter les modifications du style de sa page web

Si vous êtes satisfait de ces modifications, vous pouvez les exporter directement sur GitHub. Vous n’avez plus à appliquer les changements à la main sur votre feuille de style. Vous gagnez du temps et vous sécurisez votre process. Vous pouvez aussi partager ces modifications CSS à un collègue. Vous pouvez ainsi recueillir facilement l’avis d’un designer ou d’un product owner sur les modifications envisagées. Une URL dédiée permet de switcher de l’original à la version modifiée.