The tools introduced on this page are directly related to this week's topics on CSS rules, selectors, classes and IDs. Try these tools out on this page!
Display Element Information
A quick way to examine a web document's HTML elements while viewing it in the browser window is to use the Web Developer Information | Display Element Information tool. This can significantly cut the time spent using "view source" and then hunting through markup to extract details about a certain HTML element, or opening the HTML file in your editing software.
When you initially choose Display Element Information, the list appears empty. Just click a page element and the details appear.
Use Display Element Information in conjunction with the
Edit CSS
sidebar making it easy to see what class or ID has been applied to
an element for speedier editing. You can also see an element's sequence of ancestors
which could aid in setting up very specific contextual selectors in the
CSS code.
To move the Element Information box, point the mouse to the top of the box. When the four-directional arrow appears, click/drag it to a different screen position.
If you want to copy element information such as the font family, or the top left position, drag the Information box so that it partially covers the desired element. Hover the mouse over the element to obtain its information, then move the mouse directly into the Element Information box. Click/drag and copy/paste to capture the details.
The keystrokes for toggling the Display Element Information box on/off are Ctrl+Shift+F, or simply select it again from the Information menu.
Display ID & Class Details
From the Web Developer toolbar, select Information | Display Id & Class Details. The browser screen becomes populated with tags showing the names of all page elements that have been assigned a class or ID.
In addition to the obvious usefulness of quickly identifying CSS rules in your own documents,
this feature can be very helpful when studying the CSS of web sites you may want to emulate.
Use Display Id & Class Details in conjunction with
Edit CSS
for some revealing insight into how the pros do–and sometimes don't–do it.
Display ID & Class Details is toggled off by selecting it again from the Information menu. Refreshing the browser will also toggle off most Web Developer toolbar screen features. [F5|PC - Command+R|Mac]
Outline Block Level Elements
This feature does just what is says it will do. It outlines block-level elements on the web page.
From the Outline menu, choose Outline Block-Level Elements.
This visually displays the size and shape of each div, paragraph, list, and all other block-level elements.
Use this feature in conjuction with Display ID & Class Details, above, and the
Edit CSS
sidebar, and you are well on your way to tweezing apart even the most complex CSS designs.
References
- The ultimate display of advanced CSS:
The Zen Garden
