CSSViewer: Firefox Extension
Each time I work on a web site I get into the embarrassing situation that I can’t tell why specific elements of a page behave in a certain way. Most of the time it’s just some sort of nesting respectively inheritance issue. But how can I find out which CSS properties apply to which element?
Fortunately there are tools that bridge the gap. One of them is “CSSViewer”, a free Firefox extension that displays all properties of a specific element. After installing you can activate the extension via “Extras — CSSViewer”. Now you may move the cursor over those elements you are interested in — and the extension displays all their properties. Neat.
Of course there are other more sophisticated tools such as Xyle Scope that provide an even better overview of all the styles applied to your elements — unfortunately it is Mac OS only and costs about $20. So CSSViewer is quite a good alternative.
