1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
title: Éditeur de Style
slug: Outils/Éditeur_de_style
tags:
- CSS
- Stylesheets
- Tools
- Web Development
- 'Web Development:Tools'
translation_of: Tools/Style_Editor
---
<div>{{ToolsSidebar}}</div>
<p>L'Éditeur de Style permet de :</p>
<ul>
<li>Voir et éditer les feuilles de style associées à une page.</li>
<li>Créer de nouvelles feuilles de style de zéro et les appliquer à la page.</li>
<li>Importer des feuilles de styles existantes et les appliquer à la page.</li>
</ul>
<p>{{EmbedYouTube("7839qc55r7o")}}</p>
<p>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 <a href="/fr/docs/Tools/DevTools_Window" title="/fr/docs/Tools/DevTools_Window">Boite à outils</a> apparaitra alors en bas de la fenêtre du navigateur, avec l'Éditeur de Style activé :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; height: 238px; margin-left: auto; margin-right: auto; width: 816px;"></p>
<p>L'Éditeur de Style est divisé en trois grandes parties :</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">Le panneau des feuilles de style à gauche</a></li>
<li><a href="/fr/docs/Tools/Style_Editor#The_editor_pane">Le panneau d'édition à droite</a></li>
<li><a href="/fr/docs/Tools/Style_Editor#The_media_sidebar">Le volet média</a></li>
</ul>
<h2 id="Le_panneau_des_feuilles_de_style">Le panneau des feuilles de style</h2>
<p>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.</p>
<p>Depuis Firefox 40, le panneau des feuilles de styles inclut également un menu contextuel qui permet d'ouvrir la feuille de style sélectionnée dans un nouvel onglet.</p>
<h2 id="Le_panneau_d'édition">Le panneau d'édition</h2>
<p>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.</p>
<p>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 <a href="#Raccourcis_clavier">raccourcis clavier</a>.</p>
<p>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.</p>
<p>L'Éditeur de Style supporte l’autocomplétion. Commencez simplement à taper et il vous affichera une liste de suggestions :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Vous pouvez désactiver cette fonctionnalité dans les <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Paramètres de l'Éditeur de Style</a>.</p>
<h2 id="Le_volet_média">Le volet média</h2>
<p>L'éditeur de Style affiche un volet sur la partie droite dès que la feuille de style sélectionnée contient des <a href="/fr/docs/Web/CSS/Media_queries">règles <code>@media</code></a>. 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 média query n'est pas actuellement appliquée.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8649/editeur-style-media.png" style="height: 320px; width: 900px;"></p>
<p>Le volet média est très utile quand associé à la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> pour créer et déboguer des mises en pages responsive :</p>
<p>{{EmbedYouTube("aVUXmvLSwoM")}}</p>
<p>Depuis Firefox 46, si une règle <code>@media</code> contient une taille d'écran dans une condition, alors il est possible de cliquer dessus. Cela redimensionne l'écran à la taille en question en utilisant la Vue Adaptative :</p>
<p>{{EmbedYouTube("XeocxoW2NYY")}}</p>
<h2 id="Créer_et_importer_des_feuilles_de_style.">Créer et importer des feuilles de style.</h2>
<p>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.</p>
<p>Vous pouvez charger une feuille de style depuis votre ordinateur et l’appliquer à la page en cliquant sur le bouton "Importer"</p>
<h2 id="Support_de_Source_map">Support de "Source map"</h2>
<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
<p>Les développeurs web cré<span class="vert">ent </span>souvent des fichiers CSS en utilisant un préprocesseur comme <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, ou <a href="http://learnboost.github.io/stylus/">Stylus</a>. 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.</p>
<p>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".</p>
<p>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.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">Pour que cela fonctionne, il est nécessaire de :</p>
<ul>
<li>Utiliser un préprocesseur de CSS qui respecte la <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">proposition de "Source Map" Revision 3</a>. Aujourd’hui cela signifie utiliser la version 3.3.0 de <a href="http://sass-lang.com/">Sass</a>, ou la <a href="http://roots.io/using-less-source-maps/">version 1.5.0 de Less</a>. D'autres préprocesseurs sont actuellement en train de travailler pour devenir compatible ou considèrent le faire.</li>
<li>Ordonner au préprocesseur de générer une "source map" par exemple passer le paramètre <code>--sourcemap</code> à l’outil de ligne de commande Sass.</li>
</ul>
<h3 id="Voir_les_sources_d'origine">Voir les sources d'origine</h3>
<p>Si vous activez "Montrer les sources d'origine" dans les <a href="/en-US/docs/Tools_Toolbox#Style_Editor">options de l'Éditeur de Style</a>, les liens dans volet des règles CSS de l'outil Inspecteur Web pointeront sur le fichier d'origine, dans l'Éditeur de style.</p>
<p>Depuis Firefox 35, les sources originales sont affichées par défaut.</p>
<h3 id="Éditer_les_sources_d'origine">Éditer les sources d'origine</h3>
<p>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.</p>
<p>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 <code>le paramètre --watch</code> :</p>
<pre>sass index.scss:index.css --sourcemap --watch</pre>
<p>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.</p>
<p>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.</p>
<h2 id="Raccourcis_clavier">Raccourcis clavier</h2>
<h3 id="Éditeur_de_source">Éditeur de source</h3>
<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
|
