Éditeur de Style

L'Éditeur de Style permet de :

• Voir et éditer les feuilles de style associées à une page.
• Créer de nouvelles feuilles de style de zéro et les appliquer à la page.
• Importer des feuilles de styles existantes et les appliquer à la page.

Pour ouvrir l'Éditeur de Style, choisissez l'option "Éditeur de Style" du menu "Développement Web" (qui lui-même est un sous menu du menu "Outils"). La Boite à outils apparaitra alors en bas de la fenêtre du navigateur, avec l'Éditeur de Style activé :

L'Éditeur de Style est divisé en deux grandes parties : Le panneau des feuilles de style à gauche et le panneau d'édition à droite.

Le panneau des feuilles de style

Le panneau des feuilles de style sur la gauche, liste toutes les feuilles de style utilisées par le document actuel. Vous pouvez Activer/Désactiver rapidement l'affichage d'une feuille en cliquant sur l’icône en forme d'œil à gauche de son nom. Vous pouvez sauvegarder toutes les modifications de la feuille de style sur votre ordinateur en cliquant sur le bouton "Enregistrer" situé en bas à droite de chaque feuille dans la liste.

Le panneau d'édition

Le panneau d'édition est au centre. C'est là que le code source de la feuille de style sélectionnée peut être lu et édité. Toutes les modifications sont automatiquement appliquées à la page. Ceci rend facile l'expérimentation, les corrections et les tests. Quand vous êtes satisfait(e) de vos modifications, vous pouvez sauvegarder une copie locale en cliquant sur le bouton sauvegarder de la feuille dans le panneau des feuilles de style.

L'éditeur affiche les numéros de ligne et la coloration syntaxique pour vous aider et rendre la lecture de vos CSS plus facile. Il supporte aussi une partie des raccourcis clavier.

L'Éditeur de Style dé-minimifie automatiquement les feuilles de style qu'il détecte, sans altérer le fichier original. Ce qui rend le travail sur des pages optimisées beaucoup plus facile.

L'Éditeur de Style supporte l’auto-complétion. Commencez simplement à taper et il vous affichera une liste de suggestions :

Vous pouvez désactiver cette fonctionnalité dans les Paramètres de l'Éditeur de Style.

Le volet media

À partir de Firefox 33, l'Éditeur de Style affiche un volet sur la partie droite dès que la feuille de style sélectionnée contient des règles @media. Le volet liste les règles et fournit un lien vers la ligne de la feuille de style définissant la règle. Cliquez sur une des entrées pour basculer sur la règle. La règle est affichée grisée, si la media query n'est pas actuellement appliquée.

Le volet media est très utile quand associé à la Vue adaptative pour créer et déboguer des mises en pages responsive :

Créer et importer des feuilles de style.

Vous pouvez créer une nouvelle feuille de style en cliquant sur le bouton "Nouveau" dans la barre d'outils. Puis vous pouvez commencer à écrire du CSS dans le nouvel éditeur et observer comment les nouveaux styles s'appliquent en temps réel de la même manière que les modifications sur les autres feuilles.

Vous pouvez charger une feuille de style depuis votre ordinateur et l’appliquer à la page en cliquant sur le bouton "Importer"

Support de "Source map"

Les développeurs web créent souvent des fichiers CSS en utilisant un préprocesseur comme Sass, Less, ou Stylus. Ces outils génèrent des fichiers CSS depuis une syntaxe plus riche et plus déclarative. Ainsi, être capable de modifier le CSS généré n'est pas très utile, car le code maintenu est le code écrit dans la syntaxe du préprocesseur, pas le CSS généré. Il faudrait alors éditer le CSS généré puis se débrouiller pour réappliquer manuellement les changements au code source d'origine.

Les "Source maps" permettent aux outils de remonter depuis le CSS généré jusqu’à la syntaxe d'origine, pour pouvoir afficher et donner la possibilité d'éditer les fichiers dans la syntaxe d'origine. Depuis Firefox 29, l'Éditeur de style peut comprendre les "CSS source maps".

Cela veut dire que si vous utilisez par exemple Sass, l'éditeur affichera et permettra d'éditer les fichiers Sass plutôt que le CSS généré grâce à eux.

Pour que cela fonctionne, il est nécessaire de :

• Utiliser un préprocesseur de CSS qui respecte la proposition de "Source Map" Revision 3. Aujourd’hui cela signifie utiliser la version 3.3.0 de Sass, ou la version 1.5.0 de Less. D'autres préprocesseurs sont actuellement en train de travailler pour devenir compatible ou considèrent le faire.
• Ordonner au préprocesseur de générer une "source map" par exemple passer le paramètre  --sourcemap à l’outil de ligne de commande Sass.

Voir les sources d'origine

Si vous activez "Montrer les sources d'origine" dans les options de l'Éditeur de Style, les liens dans volet des règles CSS de l'outil Inspecteur Web pointeront sur le fichier d'origine, dans l'Éditeur de style.

Depuis Firefox 35, les sources originales sont affichées par défaut.

Éditer les sources d'origine

Il est également possible d'éditer les sources d'origine dans l'Éditeur de style et voir les résultats appliqués à la page immédiatement. Pour que cela fonctionne, il y a deux étapes supplémentaires.

Premièrement, configurer le préprocesseur pour qu'il surveille les sources d'origine et régénère automatiquement le CSS. Quand les sources changent. Avec Sass c'est possible simplement en passant le paramètre --watch :

sass index.scss:index.css --sourcemap --watch

Deuxièmement, il faut sauvegarder les sources d'origine dans l'Éditeur de Style. en cliquant sur le bouton "Enregistrer" à côté du fichier CSS.

Il est alors possible de faire des modifications du fichier source dans l'Éditeur de Style, le CSS est régénéré automatiquement et les changements sont visibles immédiatement.

Raccourcis clavier

Éditeur de source

Cette liste présente les raccourcis par défaut pour l'éditeur de code source.

Dans les options liées à l'éditeur, vous pouvez choisir d'utiliser les raccourcis Vim, Emacs, ou Sublime Text.

Pour les sélectionner, rendez-vous dans about:config, sélectionnez le paramètre devtools.editor.keymap et lui affecter la valeur « vim », « emacs », ou « sublime ». Ainsi, les commandes sélectionnées seront utilisées pour tous les outils de développement qui utilisent l'éditeur de source. Il vous faudra réouvrir l'éditeur pour que ce changement soit pris en compte.

A partir de Firefox 33, cette option de raccourcis clavier est directement disponible dans la section des préférences de l'éditeur dans le panneau « Options des outils » (plutôt que de passer par about:config).