Style Side Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Added description of options menu)
m (Added categories)
 
(17 intermediate revisions not shown)
Line 1: Line 1:
-
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 lie in different files) while the CSS Panel shows all styles of a CSS containing file.
+
[[Image:Style_Side_Panel.png|thumb|400px|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.
-
Furthermore the Style Side Panel gives you the cascading info, meaning styles, that are overwritten by other style definitions will be shown lined-through.
+
== Options Menu ==
 +
This menu is reachable via the little arrow in the panel tab ( [[File:StyleSidePanelOptionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug Release Notes#Firebug 1.9|Firebug 1.9]]).
-
== Options Menu==
 
{| class="wikitable" style="width:100%; vertical-align:top;"
{| class="wikitable" style="width:100%; vertical-align:top;"
-
|- bgcolor=lightgrey
 
! style="width:180px;" | Option || Preference || Description
! style="width:180px;" | Option || Preference || Description
|-  
|-  
| Only Show Applied Styles || <code>extensions.firebug.onlyShowAppliedStyles</code> || Toggles the display of overwritten styles
| Only Show Applied Styles || <code>extensions.firebug.onlyShowAppliedStyles</code> || Toggles the display of overwritten styles
|-  
|-  
-
| Show User Agent CSS || <code>extensions.firebug.showUserAgentCSS</code> || Toggles display of user agent specific CSS styles (all styles prefixed by "-moz-")
+
| Show User Agent CSS || <code>extensions.firebug.showUserAgentCSS</code> || Toggles display of CSS styles specified by the user agent; these styles will be marked with <span style="color: red;">&lt;System&gt;</span>
|-  
|-  
| Expand Shorthand Properties || <code>extensions.firebug.expandShorthandProps</code> || 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")
| Expand Shorthand Properties || <code>extensions.firebug.expandShorthandProps</code> || 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 || <code>extensions.firebug.colorDisplay</code> || Display color values in hexadecimal format
 +
|-
 +
| Colors As RGB || <code>extensions.firebug.colorDisplay</code> || Display color values in RGB(A) format
 +
|-
 +
| Colors As HSL || <code>extensions.firebug.colorDisplay</code> || Display color values in HSL(A) format
 +
|-
| :active || - || Toggles display of styles defined in the <code>:active</code> pseudo-class applying to the currently selected HTML element
| :active || - || Toggles display of styles defined in the <code>:active</code> pseudo-class applying to the currently selected HTML element
|-
|-
| :hover || - || Toggles display of styles defined in the <code>:hover</code> pseudo-class applying to the currently selected HTML element
| :hover || - || Toggles display of styles defined in the <code>:hover</code> pseudo-class applying to the currently selected HTML element
 +
|-
 +
| :focus || - || Toggles display of styles defined in the <code>:focus</code> pseudo-class applying to the currently selected HTML element
|}
|}
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
 +
 +
== Panel ==
 +
=== Styles display ===
 +
==== Element styles ====
 +
The ''Style'' side panel also shows styles set inside the <code>style</code> attribute of an element inside an <code>element.style</code> "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 <span style="color: red;">&lt;System&gt;</span> 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 (<code>#2</code>, <code>#3</code>, ...) enumerate the internal stylesheets defined via <code>&lt;style&gt;</code> 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 ==
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
 +
! style="width:180px;" | 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]]
 +
|-
 +
| Inspect in CSS Panel || CSS rule || Lets you inspect the current CSS rule inside the [[CSS Panel]]
 +
|-
 +
| Inspect in DOM Panel || CSS rule || Lets you inspect the current CSS rule inside the [[DOM Panel]]
 +
|-
 +
| Open in external editor || CSS rule || Opens the CSS file containing the current rule in an external editor
 +
|}
 +
 +
[[Category:Firebug]]
 +
[[Category:UI]]
 +
[[Category:Panels]]

Latest revision as of 23: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.

Contents

[edit] Options Menu

This menu is reachable via the little arrow in the panel tab ( StyleSidePanelOptionsMenuArrow.png ) 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

For more info about tweaks available in Firebug please see the full list of preferences.

[edit] Panel

[edit] Styles display

[edit] Element styles

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

[edit] Inherited rules

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

[edit] 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.

[edit] Overwritten styles

Styles being overwritten by others will be striked out.

[edit] 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.

[edit] 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.

[edit] Rendered font highlighted

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

[edit] 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
Inspect in CSS Panel CSS rule Lets you inspect the current CSS rule inside the CSS Panel
Inspect in DOM Panel CSS rule Lets you inspect the current CSS rule inside the DOM Panel
Open in external editor CSS rule Opens the CSS file containing the current rule in an external editor
Personal tools