Web Dev, Linux, WordPress & More

Display CSS Element Info in Firefox

by eric on August 5th, 2006 in: Web Design

Use the Display Element Information feature in the Firefox Web Developer Toolbar to figure out what’s Cascading in your CSS. It could save you hours of frustration, preserve handfuls of hair, and give you quick visual cues about the extended ‘family’ of an element in your CSS.

Display Element InfoAs I’ve mentioned before, if you’re not using Firefox, you darn well should be. Just do it already, okay? Here are a few reasons why.

Then download the Web Developer Toolbar; an incredibly useful, free Firefox Extension for web designers. Even after using it for well over a year, I’m still finding helpful features.

The Wonders of Cascading

One of the beautiful (and sometimes frustrating) things about using CSS is, well, the Cascading.

For example, if you declare a font-family in an element like the body tag, all of the child elements of that body tag inherit that font-family definition. You can, of course, create a more specific style for a child element that will overrule the body tag.

This is efficient, powerful, and can make your code ever so tidy. There’s no need to clutter your CSS by redefining repeated styles for every element, unless you just love typing or dream of large files. Simply define your styles at the highest logical level and tweak the child elements as needed.

Of course, that’s a very basic example, but it can become quite a bit more complex.

Why Cascading Made Me Lose My Hair

Trying to figure out the cascade can be quite frustrating when you’re new to CSS, are short on sleep, or are working with complex, or multiple, style sheets.

It can be easy to lose track of the parent/child element relationships and classes or ids that may affect the elements you’re working with.

Web Developer Toolbar to the Rescue!

The Display Element Information function on the toolbar gives a quick overview of any element on the page.

Display Element InfoTo Quickly Locate Element Information:

  1. Select Information on the Web Developer Toolbar
  2. Then click Display Element Information

This pops up a window that displays useful info about any element that you mouse over including:

  • Attributes – like class, id, or a link
  • Position – the element’s relative position in the browser window
  • Other – font-family, font-size, etc.
  • Ancestors – what are the ‘parent’ elements that may cascade styles
  • Children – what elements are ‘children’ of this element in the cascade

Each of these can be helpful, but for me, the real winners are the attributes, ancestors and children sections.

So before you go bald like me, take a deep breath, stay your hand, and troubleshoot your CSS with the Web Developer Toolbar. 🙂

Leave a Reply

%d bloggers like this: