| Open in external editor || CSS rule || Opens the CSS file containing the current rule in an external editor

| Open in external editor || CSS rule || Opens the CSS file containing the current rule in an external editor

|}

|}

+

+

[[Category:Firebug]]

+

[[Category:UI]]

+

[[Category:Panels]]

Revision as of 15:49, 21 November 2013

Style Side Panel

Inside the Style side panel you can see the CSS styles, that are currently assigned to the selected node inside the HTML Panel. It also offers you similar possibilities of CSS manipulation like the CSS Panel. The difference between them is organizational. The Style side panel is a live view of the styles assigned to the selected node inside the HTML Panel (which can be in different CSS files) while the CSS panel shows all styles of a CSS containing file.

Options Menu

This menu is reachable via the little arrow in the panel tab ( ) or by right-clicking on on the panel tab (since Firebug 1.9).

Option

Preference

Description

Only Show Applied Styles

extensions.firebug.onlyShowAppliedStyles

Toggles the display of overwritten styles

Show User Agent CSS

extensions.firebug.showUserAgentCSS

Toggles display of CSS styles specified by the user agent; these styles will be marked with <System>

Expand Shorthand Properties

extensions.firebug.expandShorthandProps

If activated, all shorthand properties will be separated into the different styles, that make up the combined style (e. g. "margin" will be separated into "margin-top", "margin-right", "margin-bottom" and "margin-left")

Colors As Hex

extensions.firebug.colorDisplay

Display color values in hexadecimal format

Colors As RGB

extensions.firebug.colorDisplay

Display color values in RGB(A) format

Colors As HSL

extensions.firebug.colorDisplay

Display color values in HSL(A) format

:active

-

Toggles display of styles defined in the :active pseudo-class applying to the currently selected HTML element

:hover

-

Toggles display of styles defined in the :hover pseudo-class applying to the currently selected HTML element

:focus

-

Toggles display of styles defined in the :focus pseudo-class applying to the currently selected HTML element

Panel

Styles display

Element styles

The Style side panel also shows styles set inside the style attribute of an element inside an element.style "rule"

Inherited rules

For inherited styles according to the CSS cascading mechanism are having the ancestor element will be shown as title.

User agent rules

Styles coming from the user agent will be displayed when the option Show User Agent CSS is checked. For these rules there will be <System> shown below the source link.

Overwritten styles

Styles being overwritten by others will be striked out.

Source Links

Source links with a number behind them (#2, #3, ...) enumerate the internal stylesheets defined via <style> tags inside the page. For external CSS files the number sign means that the same file is included several times.

Inline editing

The Style side panel allows inline-editing of the selectors, property names and values. To do so just click on the item you want to edit.

Rendered font highlighted

The actually used font is displayed highlighted to easily allow to see errors in font definitions.

Context Menu

Option

Context

Description

Copy Rule Declaration

CSS selector

Copies the current CSS rule including the selector and all styles formatted to the clipboard

Copy Style Declaration

CSS selector

Copies all styles of the current CSS rule formatted to the clipboard

Copy Property Declaration

CSS property

Copies the current CSS property declaration to the clipboard

Copy Property Name

CSS property

Copies the current CSS property's name to the clipboard

Copy Property Value

CSS property

Copies all the current CSS property's value to the clipboard

Copy Location

source link

Copies the URL of the file containing the current CSS rule

Open in New Tab

source link

Opens the file containing the current CSS rule in a new Tab

Edit Element Style...

everywhere

Enables editing of the element's inline style

New Property...

CSS rule

Allows adding new styles to the current CSS rule

Edit "<property name>"...

CSS property

Starts inline-editing of the current CSS property

Delete "<property name>"...

CSS property

Deletes the current CSS property from the rule

Disable "<property name>"...

CSS property

Disables the current CSS property

Refresh

everywhere

Reloads the contents of the panel

Inspect Declaration

web font

Lets you inspect the declaration of the current web font inside the CSS Panel