CSS Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Adjusted terminology according to the terminology page)
m (Editing rules: Minor grammatical changes)
(16 intermediate revisions not shown)
Line 1: Line 1:
 +
[[Image:CSS_Panel.png|thumb|400px|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.
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 ==
+
== Options 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.
+
This menu is reachable via the little arrow in the panel tab ( [[Image:CSSPanelOptionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug Release Notes#Firebug 1.9|Firebug 1.9]]).
 +
 
 +
{| 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 separating them into their single-value equivalents (e. g. <code>padding -> padding-top, padding-right, padding-bottom, padding-left</code>)
 +
|-
 +
| 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
 +
|-
 +
| Refresh || - || Reloads the CSS styles display
 +
|}
 +
 
 +
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
== Panel Toolbar ==
== Panel Toolbar ==
-
=== Edit ===
+
=== Edit Button ===
-
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.
+
The Edit Button allows you to switch to the Edit Mode to change the CSS using 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.
 +
There are two edit modes available:
 +
 
 +
==== Source Edit ====
 +
Displays the CSS as it came from the CSS source including its formatting, comments etc.
 +
 
 +
==== Live Edit ====
 +
Displays the CSS as it is currently interpreted by the browser. It is formatted for better readability, but there aren't any comments.
=== CSS Location Menu ===
=== 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.
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.
 +
 +
Internal stylesheets are thereby numbered. So if you have two &lt;style&gt; tags inside your HTML defining some rules, the second will have <code>#2</code> after it's name, the third one <code>#3</code> and so on.
== Panel ==
== Panel ==
-
=== Color and image preview ===
+
=== Infotips ===
-
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.
+
When hovering images, colors, gradients or fonts inside the style values a little popup preview will be shown for them, which helps finding the right color or gradient, investigating, if an image could be loaded or checking if a chosen font is the right one.
=== Editing rules ===
=== Editing rules ===
-
For editing rules the CSS panel offers you different helping features including an [[#Auto-completion|auto-completion]], a [[#Color and image preview|Color and image preview]] and an option to [[#Toggling styles|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.
+
For editing rules the CSS panel offers helpful features including an [[#Auto-completion|auto-completion]], a [[#Color and image preview|Color and image preview]], an indication whether the property could be saved correctly while editing (see below) and an option to [[#Toggling styles|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 are 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.
 +
 
 +
While inline editing the rules there are color indications for whether the entered name or value could be saved:
 +
 
 +
{| class="wikitable" style="vertical-align:top;"
 +
! style="width:100px" | Highlighting || Selectors || Property names || Property and rule values
 +
|-
 +
|<span style="color:gray">gray</span> || no change was made || no change was made || no change was made
 +
|-
 +
|<span style="color:red">red</span> || invalid selector || invalid name || invalid value
 +
|-
 +
|<span style="color:#b4b400">yellow</span> || selector correct, but not applying to selected element || correct name, but incorrect or missing value || -
 +
|-
 +
|<span style="color:green">green</span> || selector correct || correct name and correct value || correct value
 +
|}
=== Auto-completion ===
=== Auto-completion ===
-
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.
+
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 <code>bol</code> 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 <code>10px</code> pressing <code class="key">Up</code>/<code class="key">Down</code> increases/decreases the value by 1 keeping the unit. Holding the key increases/decreases the value continuously. For a bigger step size press <code class="key">Shift</code>+<code class="key">Up</code>/<code class="key">Down</code> the key. This changes the value by 10. Accordingly pressing <code class="key">Ctrl</code>+<code class="key">Up</code>/<code class="key">Down</code> changes the value by 0.1. When editing shorthand properties you can toggle through each individual value separately. Just set the cursor to one of the values before pressing the <code class="key">Up</code>/<code class="key">Down</code> key.
=== Toggling styles ===
=== 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.
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 ===
+
== Context Menu ==
-
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.
+
{| class="wikitable" style="width:100%; vertical-align:top;"
 +
! style="width:180px;" | Option || Context || Description
 +
|-
 +
| Copy Location || [[#CSS Location Menu|CSS Location Menu]] || Copies the URL of the stylesheet to the clipboard
 +
|-
 +
| Open in New Tab || [[#CSS Location Menu|CSS Location Menu]] || Opens the stylesheet inside a new browser tab
 +
|-
 +
| Copy Image Location || image values || Copies the URL of the image to the clipboard
 +
|-
 +
| Open Image in New Tab || image values || Opens the image inside a new browser tab
 +
|-
 +
| Copy Color || color values || Copies the color value to the clipboard
 +
|-
 +
| Copy Rule Declaration || CSS selector || Copies the whole rule incl. selector and curly braces to the clipboard
 +
|-
 +
| Copy Style Declaration || CSS selector || Copies all properties of a rule to the clipboard
 +
|-
 +
| New Rule... || everywhere, except [[#Edit Button|Edit Button]] || Allows to create a new CSS rule inside the currently selected stylesheet; rules will be added above other rules when a rule was right-clicked
 +
|-
 +
| Delete "<selector>" || CSS selector || Removes the rule from the stylesheet
 +
|-
 +
| New Property... || CSS rule || Allows to create a new property inside the rule
 +
|-
 +
| Edit "<property name>"... || CSS property || Allows to edit the property
 +
|-
 +
| Delete "<property name>"... || CSS property || Allows to remove the property from the currently selected stylesheet
 +
|-
 +
| Disable "<property name>"... || CSS property || Allows to disable the property, so that it doesn't affect the page layout anymore
 +
|-
 +
| Refresh || everywhere, except [[#Edit Button|Edit Button]] || Updates the panel's contents
 +
|-
 +
| Inspect in DOM panel || [[#CSS Location Menu|CSS Location Menu]], CSS rules || Allows to inspect the style or rule definition inside the [[DOM Panel]]
 +
|-
 +
|}
 +
 
 +
== Side Panels ==
 +
=== Elements Side Panel ===
 +
The [[Elements Side Panel]] allows trying out CSS selectors.

Revision as of 21:07, 15 February 2013

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.

Contents

Options Menu

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

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

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

Panel Toolbar

Edit Button

The Edit Button allows you to switch to the Edit Mode to change the CSS using 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. There are two edit modes available:

Source Edit

Displays the CSS as it came from the CSS source including its formatting, comments etc.

Live Edit

Displays the CSS as it is currently interpreted by the browser. It is formatted for better readability, but there aren't any comments.

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.

Internal stylesheets are thereby numbered. So if you have two <style> tags inside your HTML defining some rules, the second will have #2 after it's name, the third one #3 and so on.

Panel

Infotips

When hovering images, colors, gradients or fonts inside the style values a little popup preview will be shown for them, which helps finding the right color or gradient, investigating, if an image could be loaded or checking if a chosen font is the right one.

Editing rules

For editing rules the CSS panel offers helpful features including an auto-completion, a Color and image preview, an indication whether the property could be saved correctly while editing (see below) 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 are 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.

While inline editing the rules there are color indications for whether the entered name or value could be saved:

Highlighting Selectors Property names Property and rule values
gray no change was made no change was made no change was made
red invalid selector invalid name invalid value
yellow selector correct, but not applying to selected element correct name, but incorrect or missing value -
green selector correct correct name and correct value correct value

Auto-completion

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/decreases the value by 1 keeping the unit. Holding the key increases/decreases the value continuously. For a bigger step size press Shift+Up/Down the key. This changes the value by 10. Accordingly pressing Ctrl+Up/Down changes the value by 0.1. When editing shorthand properties you can toggle through each individual value separately. Just set the cursor to one of the values before pressing the Up/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 Menu

Option Context Description
Copy Location CSS Location Menu Copies the URL of the stylesheet to the clipboard
Open in New Tab CSS Location Menu Opens the stylesheet inside a new browser tab
Copy Image Location image values Copies the URL of the image to the clipboard
Open Image in New Tab image values Opens the image inside a new browser tab
Copy Color color values Copies the color value to the clipboard
Copy Rule Declaration CSS selector Copies the whole rule incl. selector and curly braces to the clipboard
Copy Style Declaration CSS selector Copies all properties of a rule to the clipboard
New Rule... everywhere, except Edit Button Allows to create a new CSS rule inside the currently selected stylesheet; rules will be added above other rules when a rule was right-clicked
Delete "<selector>" CSS selector Removes the rule from the stylesheet
New Property... CSS rule Allows to create a new property inside the rule
Edit "<property name>"... CSS property Allows to edit the property
Delete "<property name>"... CSS property Allows to remove the property from the currently selected stylesheet
Disable "<property name>"... CSS property Allows to disable the property, so that it doesn't affect the page layout anymore
Refresh everywhere, except Edit Button Updates the panel's contents
Inspect in DOM panel CSS Location Menu, CSS rules Allows to inspect the style or rule definition inside the DOM Panel

Side Panels

Elements Side Panel

The Elements Side Panel allows trying out CSS selectors.

Personal tools