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.
More recent articles
- OpenAI DevDay: Let’s build developer tools, not digital God - 2nd October 2024
- OpenAI DevDay 2024 live blog - 1st October 2024
- Weeknotes: Three podcasts, two trips and a new plugin system - 30th September 2024