views:

186

answers:

2

There are times when looking at a computed style in Firebug, it's not evident how a value is computed or what its origins are. In some situations, the source is the browser's default. In web sites that are already constructed, it's not feasible to inject a css reset which will result in breaking all the pages.

Is there a way in Firebug, Web Developer or another extension to display an inheritance structure all the way to the browser's default including displaying the value of the default?

A: 

Turn off Show Computed Style.

It then breaks it down by declarations and classes and Browser Defaults. It is that little arrow when you hover over Style.

Also, Turn on 'Show User Agent CSS'.

Chacha102
I am aware of turning off show computed style. Go to the link below and inspect the div in the right pane which has has an H2 with the text 'Member Login'. It inherits the h2 browser default. Where in Firebug's class hierarchy diagram does it show that browser default?http://demo.host22.com/
Tony_Henrich
Turn on Show User Agent CSS
Chacha102
I just discovered that looking around, but you should probably pick kmiya since he answered it correctly.
Chacha102
+4  A: 

Click on the down arrow on the Style tab in the right panel of Firebug. Uncheck "Show Computed Style" and check "Show User Agent CSS".

The blue filename next to each selector is the CSS file where the selector is defined. The Firefox default CSS file is called html.css and its location (when you hover over it) is resource://gre/res/html.css, that's how you know it is the browser default.

kmiyashiro
Awesome. I wasn't aware of this.
Tony_Henrich