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.
23 comments so far
Skip to comment form
Martin Labuschin April 02, 2006 at 07:17 AM
Tanks for the hint. This extension is great!
Erlend April 02, 2006 at 07:29 AM
Yet again another great extension. Each time I install an extension I think; what will be the next one?
Marko April 02, 2006 at 08:07 AM
Thanks for info. I used webdedeveloper for this but this one saves more time.
Etienne April 02, 2006 at 08:32 AM
strange — just installed this one two hours ago, when i ran into your post on 9rules. great extension. some things seem to be “thing of the hour” and pop up on different places of the web at the same time. nice site you’ve got. keep it up.
designstau April 02, 2006 at 09:28 AM
Very nice extension. Thanks for the hint!
kitune April 02, 2006 at 11:37 AM
Good info, thanks!
zonovo April 02, 2006 at 04:03 PM
It’s a cool extension for designers.
Thanks.
Hugh Roper April 02, 2006 at 04:34 PM
I luv Xyle Scope. I was worth my $20.
Chris Dorner April 02, 2006 at 11:17 PM
It’s a really great and usefull extension, thanks.
-> Link
Dennis Bullock April 03, 2006 at 02:29 AM
Excellent extension. I appreciate it!
Chris April 03, 2006 at 04:47 AM
I use another Firefox extension called Firebug (Link It’s quickly becoming the second must-have developer extension, along with Web Developer.
It lets you inspect elements too, but it also helps me debug my pages by showing JavaScript, CSS, XML errors and warnings.
Steve Williams April 03, 2006 at 01:28 PM
Hey, that looks really useful — thanks :-)
Jochen April 03, 2006 at 09:30 PM
I wonder how this is superior to webdev’s “display element info”?
ja April 03, 2006 at 10:10 PM
Link das design kennst du sicherlich
peter April 04, 2006 at 04:02 AM
haha! die linken sogar noch auf bartelme design :D
peter April 04, 2006 at 04:04 AM
test <- bitte löschen
Wolfgang April 04, 2006 at 06:48 AM
Die Seite ist mir bekannt — der Autor hat meine Erlaubnis das alte Design zu verwenden :)
Julian Schrader April 04, 2006 at 07:02 AM
Thanks! Nice extension…
Trajan April 04, 2006 at 08:49 AM
Just what I’ve been looking for absolutely wonderful. It would be nice if this could merge with the aardvark extension thats available also.
Michael April 09, 2006 at 03:10 AM
Thanks for the tip. This extension is great, combined with the Web Developer Toolbar it’s even greater.
magrolino April 09, 2006 at 09:03 AM
thx for the tip, I used to advice the “web developer extension” (Link for firefox that does almost the same with strg+shift+f but there are some nice other features (css editing on the fly, displaying post and get variables, altering form elements and so on.
but I will give your tip a try as well :)
greets, michael
Merz Manuel April 13, 2006 at 09:02 PM
Geht mit dem neuen Update leider nicht mehr :-(
magrolino April 19, 2006 at 06:02 PM
my firefox (1.5.0.2) works great with web developer extension number 1.0.2; maybe you have to update?
——-