You are here: User Guide > Tasks > Working with Plugins > Working with the Ajax CSS View

Working with the Ajax CSS View

CSS style rules determine the formatting of an element. The CSS view provides four different tabs, each with a different approach to the CSS style rules in the browser, both active and inactive.

Style Rules Tab

The Style Rules tab is a list of the style rules for the selected node. This tab shows only the CSS rules that were defined by the author of the web page, or predefined internally in the web browser. The rules appear in the order they were defined.

The following are the columns that make up the view:

CSS View Style Rules Tab

The following functionalities are available for the style rules tab:

Editing a Value

This procedure describes how to edit the value of an attribute. Attributes are properties of a node. Editing their values also effects their expression in the browser.

 Note:

Icons are enabled only for the CSS rules (entries in the "Style Rules" tab) that can be edited. You can edit only those rules that were added to the website using an external stylesheet (embedded <style> tag or in style="" parameter in any tag). Icons will not be enabled if:
- You have not selected anything in the "Style Rules" tab.
- You have selected a browser's internal rule. Internal rules can be recognized by a URL starting with "resource://..." instead of "http://..."

 

 

Instructions on how to complete a procedure

To edit a value:

  1. Go to Window | Open Perspective | Web Browser Tools.

  2. Click Open a URL in the Mozilla Browser from the main toolbar.
    The “Open URL…” dialog opens.

  3. Enter a URL in the “Enter URL…” text field and press Enter.
    The URL opens in the Internal Web Browser.  

  4. Select a node from the DOM Inspector view.

  5. Open the CSS view and within it, the Style Rules tab.
    The style rules and their properties appear.

Note:

You can edit only those rules that were added to the website using an external stylesheet (embedded <style> tag or in style="" parameter in any tag).

  1. Click on the value of the style rule in the “Value” column and enter the new value.
    The value of the style rule has been edited.

 

 

 

Adding a Property

This procedure describes how to add a property to a node.

 

 

Instructions on how to complete a procedure

To add a property:

  1. Go to Window | Open Perspective | Web Browser Tools.

  2. Click Open a URL in the Mozilla Browser from the main toolbar.
    The “Open URL…” dialog opens.

  3. Enter a URL in the “Enter URL…” text field and press Enter.
    The URL opens in the Internal Web Browser.  

  4. Select a node from the DOM Inspector.

  5. Open the CSS view and within it the Style Rules tab.
    The style rules and their properties appear.

  6. Select a style rule from the “Rule” column and from the “Right Click Menu” select “Add Property”         - or - click Add a Property.
    The “Add Property” dialog opens.

  7. Enter the property name and value separated by a colon in the text field and click OK.
    The property appears in the “Property” column and the browser has been modified accordingly.

 

Opening a CSS File

This procedure describes how to open a CSS file. A CSS file will be a source file of the rule selected in the "Style Rules" tab.

 

 

Instructions on how to complete a procedure

To open a CSS file of the style rule:

  1. Go to Window | Open Perspective | Web Browser Tools.

  2. Click Open a URL in the Mozilla Browser from the main toolbar.
    The “Open URL…” dialog opens.

  3. Enter a URL in the “Enter URL…” text field and press Enter.
    The URL opens in the Internal Web Browser.  

  4. Select a node from the DOM Inspector view.

  5. Open the CSS view and within it, the Style Rules tab.
    The style rules and their properties appear.

  6. Select a style rule from the “Rule” column and from the “Right Click Menu” select “Open CSS file”, or click Open a CSS File.
    The style rule opens in a CSS file.

 

Computed Styles Tab

The Computed Styles tab is a list of the style rules for the selected node. This tab shows only those that will be used to render the particular tag; This is the list of all styles supported by the browser with their values calculated based on the definitions provided by page author.

The following are the columns that make up the view:

Computed Styles Tab in the Ajax CSS View

Box Model Tab

The box model in the Box Model tab provides the visual approach to the properties of the selected DOM element. This tab shows the width and height of the innermost dimension, the padding, the border, and the margin of the DOM element You can control which element you are analyzing using the Navigation Controls.

 

The following are the components that make up the view:

CSS View Box Model Tab

The Navigation Controls control which element you are analyzing by moving throughout the hierarchal tree in the DOM Inspector.

The controls are used as follows:

The box model in the view is made up of the following components:

For more information on the Box Model see http://www.w3.org/TR/CSS2/box.html.

Diffs Tab

The Diffs tab allows you to view the changes made so far in the Style Rules tab. Some of the “Vaues” in the Style Rules tab can be edited, but the history of their values is not stored there. The Diffs tab is a way to compare the original style rules with the current (modified) style rules. If you have modified style rules in the “Style Rules” tab, the differences will automatically show in the “Diffs” tab. For more information  see Editing a Value.

 

There are two options for comparing the style rules:

CSS View Diffs Tab

CSS View Icons

The CSS View includes the following icons:

Add a Property

Add a property.

Open a CSS File

Open a CSS file.

Toggle Highlighting

Toggle highlighting.

Note:

Icons are enabled only for those CSS rules (entries in the "Style Rules" tab) that can be edited. You can edit only those rules that were added to the website using an external stylesheet (embedded <style> tag or in style="" parameter in any tag). Icons will not be enabled if:
- You have not selected anything in the "Style Rules" tab.
- You have selected a browser's internal rule. Internal rules can be recognized by a URL starting with "resource://..." instead of "http://..."

 

 

Related Links:
Ajax Tools

Working with the Ajax DOM Inspector View

Working with the Ajax Browser Console View

Working with the Ajax Request Monitor View

Working with the Ajax DOM Source View

Working with the Ajax JavaScript View

Working with the Ajax DOM Watcher View

Working with the Ajax DOM Compare View

Working with the Internal Web Browser

Debugging JavaScript

Working with jQuery JavaScript Library

Working with Prototype JavaScript Library

Web Browser Tools Perspective

 

 

©1999-2012 Zend Technologies LTD. All rights reserved.