I am going to redesign of a web site which has about 5 different css files declared in each page.

HTML code is also not very clean and I wonder if any of you can suggest some solutions to analyze for me.

First of all, I need to understand the hierarchy of the div's in the HTML code. Is there any tool available to draw simple diagrams to show the parenthood relations of the divs?

Also I will appreciate if you can suggest some other tools or techniques to easily understand the CSS jam here. For example a simple tool to report what attributes are set (by which css file) for each individual div and class.

7 answers

This was chosen as the best answer

Firefox + Firebug is what you're after.

Firebug is a web developer extension (plugin) for the Firefox web brower that allows you to "edit, debug, and monitor CSS, HTML, and JavaScript live in any web page".

You can see the document HTML structure and select any item on the page, or within the structure view and see the CSS applied to it (and which CSS file it comes from).

Firefox: http://getfirefox.com

Firebug: http://getfirebug.com

Screen shot of the Firebug inspector:

alt text

Answered about 8 years ago by Ian Hill

Google Chrome, Safari, Firefox and Opera all have excellent DOM inspectors - Chrome's and Safari's are built in, there are a range of extensions for Firefox (Firebug is most popular) and Opera's Dragonfly downloads on demand. Personally I find Dragonfly the most useful.

If you are looking for an application which searches for unused styles on a site, Topstyle (which I no longer use) had that functionality.

Answered about 8 years ago by Richard Grevers

you might also like the firefox plugin 'View Source Chart':

alt text

which you can get from here: http://jennifermadden.com/scripts/ViewRenderedSource.html

Answered about 8 years ago by Tony Crockford
  • Voted up because I haven't seen this tool before Andy Ford about 8 years ago

If you're on a Mac, Xyle scope is an excellent tool for "disassembling" and "style-hunting" a layout.

Answered about 8 years ago by Chriztian Steinmeier

Probably the best standalone CSS application on the Mac is the award-winning CSSEdit by MacRabbit. That said, it's not free, and as Richard stated above, there are many DOM and Style Inspectors available in-browser and for free.

Your best bet is try try several out and find one that fits your workflow!

Answered about 8 years ago by Jeremy Orion
  • CSSEdit is well worth buying - it paid for itself in the first hour for me, and I use it constantly while designing a web site. Kendall Lister about 8 years ago

The Firebug extension for Firefox shows the hierarchy in a tree like structure and gives you info about applied styles of any highlighted element (through the Inspect function). It shows you from which stylesheet and row the rule comes frome, and all inheritance and cascading effects.

It does not support exporting reports and stuff though.

The Web Developer Toolbar has some useful analyzing functions as well, like outlining all the headlines of the document, showing depth (topographic information) and stack levels. You can also highlight/outline custom elements on the page. Using the "Persist Features" setting you save the current analytic settings when navigating around the site.

Answered about 8 years ago by Jens Hedqvist

Opera Developer Tools or Dragonfly is great and allows you to select an element on a page and see the computed style along with the custom styles. It is also a great JavaScript debugger and it comes with Opera, no extra installs/downloads.

Answered almost 8 years ago by Darryl Hein