CSS Inspector

14th August 2005

While working on a theme for Moodle I thought it would be helpful to have a tool that allowed me to easily view details of an element in the document. To be able to see it’s ancestors, with any classes and id’s. Basically all the information need to write a CSS selector for that element. So I wrote a user JavaScript to do just that.

I’m aware Mozilla offers plenty of tools for this kind of task, some of the options on the web developer toolbar would be good examples. However none of the tools I tried did exactly what I was looking for. Plus I’d obviously rather be working using Opera and only have to use a Mozilla browser for testing ;-)

The script adds simple functionailty to any page it is run on — it works for both Opera’s user JavaScript and the Greasemonkey Firefox extension. On a page where the script is running pressing the shift key and clicking on an element pops up a little box showing the element and it’s ancestors, including any class and id attributes. From this list clicking on one of the tag names opens another small box containing a textfield. Typing a CSS property name into this field, and pressing enter shows the computed style for the property on that element.

Browser Differences

It is probably important to note that Opera and Firefox report the computed style in slightly different ways. Firefox will report styles as being unset if you search using a shorthand property, such as background, margin or border (even if the style was set using the shorthand). By contrast Opera is usually happy to deal with the shorthand properties. For example if you had the CSS rule,

div {
  background: #f90;
}

Using the script to check the background property would return background: #ff9900 0px 0px in Opera, whereas Firefox says the background property is not set. Checking for background-color will correctly find the background colour in each browser. It is a similar story with other properties. To check the padding of an element in Firefox you would need to search using padding-left, padding-right etc… Opera would usually accept the shorthand padding on it’s own — even if the CSS set each side of the padding separately.

div {
  padding: 10px 20px;
}

Checking the padding property would return padding: 10px 20px in Opera, but would be unset in Firefox. Checking padding-bottom would return 10px in both browsers.

In the screenshots below the orange rectangle uses the following CSS,

#d1 {
  border: 5px solid #000;
  background: #f90;
  width: 300px; height: 150px;
  padding: 10px 20px;
  float: left;
}

Firefox does not report values if you check using the shorthand CSS properties

The screenshot above shows the script running using the Greasemonkey Firefox extension.

Opera reports style values even if the shorthand properties are used

The second screenshot shows the script using Opera. Notice that colour values are reported using different notation.

Opera 8

To install the script, and setup the pages you would like the script to run on please follow the instructions in the Opera tutorial Utilizing User JavaScript. Once you’ve got Opera set up to run User JavaScripts download the CSS Inspector script and save it in your User JavaScript directory.

Firefox

Make sure you have Greasemonkey installed, then head over to www.moddular.org/userjs/inspector.user.js, select Tools > Install User Script and choose which pages you would like to have the script run on.

Permalink. Posted on 14th August 2005 in Browsers, CSS, JavaScript.

Comments

  1. Thank you very much for your great tool. First I used the Firefox toolbar "Web Developer" every day for Web Design and CSS work and especially Moodle themes. Now I am using the CSS inspector as my main tool.

    Urs

    # Posted by Urs Hunkler on 7th October 2005.

  2. I just updated the script for greasemonkey 0.5/firefox 1.5… Let me know if you find any bugs :)

    # Posted by Andy on 4th December 2005.

  3. I can't get this to work on Firefox 1.5 on Mac OSX. I installed greasemonkey and the script but I am unclear how to activate the CSS Inspector script. Pressing Shift has no effect.

    # Posted by steven Lyons on 31st December 2005.

  4. I can't get this to work - have succesfully installed and can shift-click on an element in Firefox (1.5.0.1) and it is highlighted with a blue surround - but no information is displayed about the element…

    # Posted by Steven Wright on 14th March 2006.

  5. Cool - got it working - a little fiddly (a wee bit more documentation there could help, maybe an extra screenshot?) but now it's working I must say it's VERY good - cheers for this awesome app!

    # Posted by Steven Wright on 15th March 2006.

  6. Cool - got it working - a little fiddly (a wee bit more documentation there could help, maybe an extra screenshot?) but now it's working I must say it's VERY good - cheers for this awesome app!

    Thanks! Yes, I think I do need to write some better documentation, what little there is still relates to the first version and a few bits and pieces have been added since then. I'll try to add screenshots showing the set up process soon.

    # Posted by Andy on 15th March 2006.

  7. I've added another post about this with more details about some of the features added since this was originally posted. It also has some more detailed installation instructions which have been updated for Opera 9

    # Posted by Andy on 26th March 2006.

Sorry, comments for this item are currently closed.

Of Interest

Hangouts

Listening