canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/StyleInspector: Difference between revisions
Jump to navigation
Jump to search
DevTools/Features/StyleInspector (view source)
Revision as of 15:44, 31 August 2011
, 31 August 2011no edit summary
No edit summary |
No edit summary |
||
| Line 35: | Line 35: | ||
* It should be possible to view all stylesheet rules that went into deciding on the value that was chosen | * It should be possible to view all stylesheet rules that went into deciding on the value that was chosen | ||
* Ideally, when listing all property/values there would be a way to quickly locate the properties of interest | * Ideally, when listing all property/values there would be a way to quickly locate the properties of interest | ||
* | * Properties should include a link to the matching MDN article to provide the user with further information about that property | ||
|Feature non-goals=Editing of the values is out of scope at this time. | |Feature non-goals=Editing of the values is out of scope at this time. | ||
|Feature functional spec===== Invoking ==== | |Feature functional spec===== Invoking ==== | ||
| Line 64: | Line 64: | ||
As a computed styles-based view, the property list contains all of the possible properties. An extreme example of this is the "border" shorthand property. Each border property (width, color, etc.) can be set independently on all four sides of the box. This means that 20 border properties will be displayed, even for a user that sets "border: 1px solid blue". | As a computed styles-based view, the property list contains all of the possible properties. An extreme example of this is the "border" shorthand property. Each border property (width, color, etc.) can be set independently on all four sides of the box. This means that 20 border properties will be displayed, even for a user that sets "border: 1px solid blue". | ||
If the user has set the border as "border: 1px solid blue", the "border-left-color" property will show rgb(0,0,255). When you expand that property, you'll see the rule displayed as, for example, "h1 -> border: 1px solid blue". The '''property name is displayed because it does not match the property name shown'''. Additionally, "1px solid blue" is displayed for the value because '''that is how the stylesheet lists it'''. | |||
(optional) A better default than showing all of the possible CSS properties is to show shortcut properties as appropriate, based on how the user has specified their styles. Using "border" as an example: | |||
* if the styles for an element only have "border", then border is the property displayed | |||
* if there is a border-color, then the border-(color|width|etc) properties are displayed, but not the properties for the sides | |||
* if there is a border-left, then the border-(left|right|top|bottom) properties are displayed | |||
* if there is a border-left-color, then all of the border properties are displayed | |||
In other words, '''show as few properties as possible to reflect the way the user is styling the node in question'''. Similar rules would apply to properties like "font". | |||
(optional) Computed styles automatically converts all of the colors to rgb(). The user may have specified the colors using some other system. In order to help them make sense of the color, display a color swatch next to the color label, in both the initial and expanded views. | |||
(optional) For a number of CSS properties, there is a difference between what the browser ultimately decides to show and what the user has specified. For example, "font-family: SuperBlingUltra, Verdana, sans-serif" will ultimately select some font from the user's system. There's no way to tell what that font is, however. The value of the font-family property in the initial view should be the actual font chosen for display. The expanded view would show the list as it appears in the stylesheet. | |||
* if the user has SuperBlingUltra or Verdana, that would be displayed for font-family | |||
* if they do not, the font used by the browser for "sans-serif" will be displayed as the value for font-family | |||
==== Expanded View ==== | ==== Expanded View ==== | ||
| Line 75: | Line 93: | ||
The rows are sorted '''in order of selector precedence'''. So, the first rule listed is the one that was selected for use. All of the other rows are displayed with '''strike through''' because they were not selected. | The rows are sorted '''in order of selector precedence'''. So, the first rule listed is the one that was selected for use. All of the other rows are displayed with '''strike through''' because they were not selected. | ||
After the list of selectors that match the selected page element, there is an "unmatched rules" entry. Expanding that displays all of the rules providing the current property that had CSS selectors that did not much that currently selected page element. Those rules are sorted by how close they are to matching the original element. | |||
==== Include Default Styles ==== | ==== Include Default Styles ==== | ||
| Line 95: | Line 113: | ||
==== Editing Values ==== | ==== Editing Values ==== | ||
A single click on the value of a property will '''edit that value for the selected element'''. For example, if you have a background-color of "black" set by stylesheets on the current element, you can click on "black" and change it to "white". The result is equivalent to setting style="background-color: white" on the element. | When viewing a rule that contributes to a property, you can '''click the stylesheet name:line number link to display the stylesheet in the Style Editor'''. Using the Style Editor, you can change the styles directly and see the changes live. The Style Editor also allows you to save the revised stylesheet. | ||
(optional) A single click on the value of a property will '''edit that value for the selected element'''. For example, if you have a background-color of "black" set by stylesheets on the current element, you can click on "black" and change it to "white". The result is equivalent to setting style="background-color: white" on the element. | |||
A single click on the value of a property in a rule for an element will '''edit the value for that rule'''. If background-color property for a rule with a selector of "h1" is "black", you can click it and change it to white. | (optional) A single click on the value of a property in a rule for an element will '''edit the value for that rule'''. If background-color property for a rule with a selector of "h1" is "black", you can click it and change it to white. Ideally, this change would be synchronized with the Style Editor so that viewing the same rule in the Style Editor would then show "white" after the change. | ||
(optional) A rule change as described in the previous paragraph would ideally also be visible in the Style Editor. | (optional) A rule change as described in the previous paragraph would ideally also be visible in the Style Editor. | ||