ATF/Help/Tools/CSSView

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 Property - Adds a new property to the selected style rule
  • Edit Property - Edit the values of the selected style property
  • Open CSS file - Opens a rule or property in an editor to the URL and line number
  • 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.