Style Editor

  • Revision slug: Tools/Style_Editor
  • Revision title: Style Editor
  • Revision id: 31313
  • Created:
  • Creator: yyss
  • Is current revision? No
  • Comment 19 words added, 1 words removed

Revision Content

{{ fx_minversion_header("11.0") }}

Firefox 10 introduced the Style panel, which let you view and change styles using a friendly interface. Some folks are more in tune with their inner CSS superpowers and would prefer to edit their CSS free-form. This capability is provided by the Style Editor added to Firefox 11. The Style Editor is available in the Web Developer menu (Tools->Web Developer->Style Editor on the Mac). When you open the Style Editor, you're presented with a two-pane window that also has a toolbar.

style-editor.png

On the left (or the top, if your window is very narrow) is a list of all the style sheets used by the document, and on the right (or the bottom, if your window is narrow) is the source for the style sheet you've currently selected in that style sheet pane.

The style sheet pane

The style sheet pane, on the left, lists all the style sheets being used by the current document. You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. You can save any changes you've made to the style sheet to your local computer by clicking the Save button in the bottom-right corner of each sheet's entry in the list.

The editor pane

On the right is the editor pane; this is where the source for the selected style sheet is available for you to read and edit. Any changes you make are applied to the page in real time. This makes it really easy to experiment with, revise, and test changes to your page's appearance. Once you're satisfied with your changes, you can save a copy locally, as mentioned previously, by clicking the Save button on the sheet's entry in the sheet pane.

The editor provides line numbers and syntax highlighting to help make it easier to read your CSS.

You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles apply in real time just like changes to the other sheets. You can even load a style sheet from disk and apply it to the page by clicking the Import button.

A particularly handy feature to the Style Editor: it automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.

See also

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

Revision Source

<p>{{ fx_minversion_header("11.0") }}</p>
<p>Firefox 10 introduced the <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel</a>, which let you view and change styles using a friendly interface. Some folks are more in tune with their inner CSS superpowers and would prefer to edit their CSS free-form. This capability is provided by the Style Editor added to Firefox 11. The Style Editor is available in the Web Developer menu (Tools-&gt;Web Developer-&gt;Style Editor on the Mac). When you open the Style Editor, you're presented with a two-pane window that also has a toolbar.</p>
<p><img alt="style-editor.png" class="internal default" src="/@api/deki/files/6124/=style-editor.png" style=""></p>
<p>On the left (or the top, if your window is very narrow) is a list of all the style sheets used by the document, and on the right (or the bottom, if your window is narrow) is the source for the style sheet you've currently selected in that style sheet pane.</p>
<h2>The style sheet pane</h2>
<p>The style sheet pane, on the left, lists all the style sheets being used by the current document. You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. You can save any changes you've made to the style sheet to your local computer by clicking the Save button in the bottom-right corner of each sheet's entry in the list.</p>
<h2>The editor pane</h2>
<p>On the right is the editor pane; this is where the source for the selected style sheet is available for you to read and edit. Any changes you make are applied to the page <strong>in real time</strong>. This makes it really easy to experiment with, revise, and test changes to your page's appearance. Once you're satisfied with your changes, you can save a copy locally, as mentioned previously, by clicking the Save button on the sheet's entry in the sheet pane.</p>
<p>The editor provides line numbers and syntax highlighting to help make it easier to read your CSS.</p>
<p>You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles apply in real time just like changes to the other sheets. You can even load a style sheet from disk and apply it to the page by clicking the Import button.</p>
<p>A particularly handy feature to the Style Editor: it automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.</p>
<h2>See also</h2>
<ul> <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> <li><a href="/en/Tools/Page_Inspector/3D_view" title="3D view">3D view</a></li> <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li> <li><a href="/en/Tools" title="Tools">Tools</a></li> <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
</ul>
<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
Revert to this revision