Simon Willison’s Weblog

Using bookmarklets to experiment with CSS

3rd June 2003

I’m in the middle of a whole bunch of exams at the moment, but here’s a quick tip that should make experimenting with and learning CSS a great deal easier. It involves bookmarklets. If you haven’t seen them before, bookmarklets are bookmarks that embed javascript; when you click the bookmark, the javascript is executed in the context of the currently loaded page. What that means is that in a suitably advanced browser bookmarklets can be used to modify pages, analyse their structure and do a whole host of other useful things.

A fair number of bookmarklets work in both IE and Gecko engine browsers, but the really interesting ones (at least as far as learning CSS is concerned) tend to be Gecko only. If you’re serious about learning CSS it’s well worth getting a Gecko browser at any rate—Gecko’s CSS support is more standards compliant than anything else currently available, so I recommend designing for the standards with Gecko and tweaking to support IE afterwards. Some people advocate designing for IE because it has buggier support, but once you’ve seen the tools available for Gecko I think you’ll agree it really is a superb development platform. If you don’t have access to a Gecko engine browser (that means Mozilla, Netscape 7, Camino, or Phoenix/Firebird) go and grab Firebird—it’s only a 6 MB download and is available for most major platforms.

Now that you’re tooled up with a good browser, drag the following links on to your links toolbar or add them as bookmarks:

• test styles
• edit styles
• ancestors
• zap style sheets
• zap presentational html
• view style sheets
• show blocks

Now give them a go. They’re all useful, but by far the most useful for learning CSS are test styles and edit styles. test styles opens a popup window in which you can type CSS rules that will be applied instantly to the page you are viewing, while edit styles does the same thing but pre-populates the window with the style sheets of the current site, allowing you to edit them in place. ancestors is also useful; it shows the element hierarchy of the element your mouse is currently over, which can help you see what selector you need to use to modify that element’s style. I cannot emphasize enough how powerful this is for working with CSS; using test styles I was able to redesign this site entirely in less than half an hour!

All of the above bookmarklets were written by Jesse Ruderman. Jesse has many more bookmarklets, all of which are available on his site. The bookmarklets listed above are from his Web Development collection (which includes further descriptions of these and many others). Jesse’s bookmarklets have saved me countless hours of development time, and I hope they can do the same for you.