Difference between revisions of "CSS Panel"

From FirebugWiki
Jump to: navigation, search
(Added CSS Panel screenshot)
(Replaced description of Options Mini Menu by table explaning all preferences in detail)
Line 3: Line 3:
== Options Mini Menu ==
== Options Mini Menu ==
Inside the panel's Options Mini Menu you have two options. One for refreshing the displayed styles and one for expanding shorthand properties. Enabling latter seperates combining properties like "background" into the different single-style properties. In the case of "background" the CSS rule will then have seperate styles for "background-attachment", "background-color", "background-image" etc.
{| class="wikitable" style="width:100%; vertical-align:top;"
|- bgcolor=lightgrey
! style="width:180px;" | Option || Preference || Description
| Expand Shorthand Properties || <code>extensions.firebug.expandShorthandProps</code> || Toggles between the display of shorthand CSS styles like they are defined and seperating them into their single-value equivalents (e. g. <code>padding -> padding-top, padding-right, padding-bottom, padding-left</code>)
| Refresh || - || Reloads the CSS styles display
== Panel Toolbar ==
== Panel Toolbar ==

Revision as of 14:18, 1 July 2010

CSS Panel

When you want to manipulate CSS rules the CSS panel is the right place for this. It offers options for adding, editing and removing CSS styles of the different files of a page containing CSS. Furthermore it offers an editing mode, in which you can edit the content of the CSS files directly via a text area.

Options Mini Menu

Option Preference Description
Expand Shorthand Properties extensions.firebug.expandShorthandProps Toggles between the display of shorthand CSS styles like they are defined and seperating them into their single-value equivalents (e. g. padding -> padding-top, padding-right, padding-bottom, padding-left)
Refresh - Reloads the CSS styles display

Panel Toolbar


The "Edit" option opens a text editor, in which you can edit the styles and rules of the currently selected CSS file directly. Clicking the "Edit" button again switches back to the formatted display mode.

CSS Location Menu

The CSS Location Menu shows all the files of the current page, which include CSS rules and lets you choose between them. When switching to another file the panel shows the contained CSS rules of that file.


Color and image preview

When hovering images or colors inside the styles the panel offers you a little popop preview of them, which helps finding the right color or investigating, if an image could be loaded.

Editing rules

For editing rules the CSS panel offers you different helping features including an auto-completion, a Color and image preview and an option to toggle styles. To edit a rule, a style property or its value simply click on it. An inline text field appears at that position and you can start typing. When you finished editing hit Enter. To edit the next style just hit Tab instead of Enter. When you want to create a new property you have three possibilities to do so: Double-click on the white area besides a style definition, editing the last value of a style block and hit Tab or right-click at a style and choose "New Property...". To add a new rule choose the appropriate option from the context menu or click on the very last value of a style sheet and hit Tab.


An auto-completion feature supports you while entering or editing styles. This means it completes the command while you are typing. If there are several commands starting with the same phrase like "bol" for the font weight you can switch through the different possible values by pressing the up and down key. If a numeric value is entered like "10px" pressing Up/Down increases resp. decreases the value by 1 keeping the unit. Holding the key increases/decreases the value continuously. For a bigger step size press the Page Up/Page Down key. This changes the value by 10. When editing shorthand properties you can toggle through each individual value seperately. Just set the cursor to one of the values before pressing the Up/Down resp. the Page Up/Page Down key.

Toggling styles

You can toggle off the application of a specific style by clicking on the disable icon, which appears when you hover a style. When it's disabled a red disabled symbol is shown. For re-enabling the style simply click on it again.

Context options

Right-clicking inside the CSS panel offers you at least three functions: Adding a new rule to the CSS, refreshing the display of the styles and opening the clicked rule in the DOM tab. Besides this general functionality there are other options shown depending on what was right-clicked. The context menu for a rule offers the possibility to add a new property. Right-clicking on a property furthermore offers editing, deleting or disabling it. When right-clicking on a URL or imported file the context menu offers the possibility to open it inside a new tab and to copy the file's location. And inside the context menu of a color value you find an option for copying the value to the clipboard.