Jump to: navigation, search

Difference between revisions of "ATF/Help/Tools/CSSView"

< ATF‎ | Help
(New page: =Image:cssinspector.gif CSS= The CSS view shows all style rules that are currently applied to a selected DOM node. Several tabs compose the CSS view that show different representation...)
 
(Image:cssinspector.gif CSS)
 
Line 29: Line 29:
 
* Select ''Show View'' and ''Other...'' to open the ''Show View'' dialog.
 
* Select ''Show View'' and ''Other...'' to open the ''Show View'' dialog.
 
* Under the ''Mozilla'' category, select ''CSS''.
 
* Under the ''Mozilla'' category, select ''CSS''.
 +
 +
[[Category:Draft Documentation]]

Latest revision as of 10:00, 4 November 2009

Cssinspector.gif CSS

The CSS view shows all style rules that are currently applied to a selected DOM node. Several tabs compose the CSS view that show different representations of a DOM element's style.

CSS view tabs:

  • Style Rules - Shows the rules and their defined properties currently applied to an element. The following toolbar buttons are availabe in the Style Rules tab:
    • Add correction.gif Add Property - Adds a new property to the selected style rule
    • Write obj.gif Edit Property - Edit the values of the selected style property
    • Goto input.gif Open CSS file - Opens a rule or property in an editor to the URL and line number
    • Highlight.gif Toggle Highlighting - Highlights all DOM elements currently using a selected style rule or property
    • Note: The previous toolbar buttons are also in a context menu accessible by right-clicking in the Style Rules tab
    • Green Properties - Style properties currently affecting the current DOM element selection
    • Red Properties - Style properties currently cascaded over by other style properties and not affecting the current selection's style.
  • Computed Styles - Shows every style rule either defined formally by rules or inline or computed by the browser.
    • Green Properties - Style properties currently defined by style rules or inline style declarations
    • Red Properties - Style properties currently defined by the browser
  • Box Model - Shows the dimensions, x-y coordinates, padding, border, and margin information.
    • Navigation Controls - Allows navigation to other nodes in the DOM from the currently selected node
      • Up Arrow - Navigates the selection to the current node's parent
      • Down Arrow - Navigates the selection to the current node's first child
      • Left Arrow - Navigates the selection to the current node's previous sibling
      • Right Arrow - Navigates the selection to the current node's next sibling
  • Diffs - Shows the changes made to CSS rules and properties either for a given selection or for all changes globally.

To open the view:

  • Go to Windows menu.
  • Select Show View and Other... to open the Show View dialog.
  • Under the Mozilla category, select CSS.