CSS Panel

From FirebugWiki

Revision as of 10:06, 5 May 2010 by Sebastianz (Talk | contribs)
Jump to: navigation, search



Panel options menu

Inside the panel options 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.

Panel menu


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.

Scripts menu

The scripts menu shows all the files of the current page, which include some CSS 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



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


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.

Personal tools