Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Using bookmarklets to experiment with CSS

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:

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.

Posted 3rd June 2003 at 1:49 pm

This is Using bookmarklets to experiment with CSS by Simon Willison, posted on 3rd June 2003.

Tagged ,

View blog reactions

Next: Home improvements

Previous: From HTML to CSS

22 comments

  1. Hi Simon! I've had some fun with bookmarklets some time back, you might find those usefull.

    Martin - 3rd June 2003 14:29 - #

  2. Why would I want to use a bunch of bookmarklets for a crappy browser (Mozilla) when Opera 7 ships with several handy user stylesheets (such as debug with outline, emulate text browser, ) that are extremely easy to switch on/off (adding your own is as easy as editing a text file)? Or when I can use Opera's "refresh display" option, where you can edit the source directly from the cache and refresh the display to show the changes. Or when I can easily use Opera's cache window to view any item within my cache. Never mind the fact that Opera without Java is only 3,264 KB.

    chris - 3rd June 2003 15:14 - #

  3. Thanks for the bookmarklets, but quick question: I've been having problems with Firebird in that many bookmarklets (that do work in Moz 1.3) seem to not work with the v0.6 release. I searched BugZilla for any news on this issue, and couldn't find any. Have you gotten these bookmarklets to work in Firebird v0.6?

    Mike - 3rd June 2003 15:49 - #

  4. Chris,

    Mozilla isn't so crappy compared with Opera when you take the context into consideration. When developing a layout, standards-compliance is crucial, and Opera still isn't in a position to beat Mozilla in that respect.

    Jim - 3rd June 2003 16:28 - #

  5. I've got a couple of stylesheet related bookmarklets myself at [lio@wg]. (ViewStyles, SwitchStyles), that might be useful. As for the browser, Mozilla is better with respect to development tools than Firebird, and they both have some very prominent features that Opera 7 lacks. For one, they support [DOM2 Style] and the document.styleSheets. They have correct implicit alternate stylesheet handling (there can only be ONE preferred stylesheet, never several. See althack). Mozilla also has a really useful tool in the DOM Inspector, which Firebird lacks, and has a somewhat broader CSS support than Opera 7. If you use the Context Menu Extensions add-on (Which sadly breaks the type-ahead functionality), you also have a good set of features for doing what the Opera 7 user stylesheets does and more, and if you use Checky and LiveHTTPHeaders you have really good validation features. All in all, I think Mozilla beats Opera 7 as a development platform for html and css. Then, if you add up it's superiority in JavaScript, DOM, XML and XSLT handling, I'd say Mozilla is the overall better browser.

    liorean - 3rd June 2003 17:54 - #

  6. Mike: a lot of bookmarklets were broken in Firebird 0.6 because of bug 205989 and bug 206026. These two bugs are fixed in Firebird nightlies.

    Jesse Ruderman - 3rd June 2003 18:12 - #

  7. liorea: That reminds me, Opera doesn't support XSLT/XSL-FO (no biggie on the FO). They do support some of the cooler parts of css2, though, which gecko does not.

    ninja - 3rd June 2003 20:12 - #

  8. They don't seem to work in Safari.

    BongoMan - 4th June 2003 00:15 - #

  9. Using edit styles with ancestors is a very powerful combination indeed!

    Adam - 4th June 2003 01:39 - #

  10. BongoMan: The Safari team has already fixed one problem with bookmarklets that I reported (window.open() with no parameters would open a file called "undefined" instead of about:blank). I don't know if they've released a version with that fix. I also don't how many of my bookmarklets are still broken in Safari for other reasons (such as using non-standard stuff supported by both Mozilla and IE).

    I don't spend a lot of time testing bookmarklets on Macs, and right now I don't even have access to a Mac. If you have a Safari build where the window.open() bug is fixed, I'd be interested to know which bookmarklets work and which don't. And of course, if you buy me a Mac, I'll fix everything I can quickly.

    Jesse Ruderman - 4th June 2003 03:54 - #

  11. Test/View Styles doesnt work with Mozilla 1.0. With IE 5.5 , test styles work but view styles doesnt. Help?

    Anon - 5th June 2003 10:07 - #

  12. I know Tantek calls them Favelets...so is there a definitive term? I guess it doesn't really matter...just curious. They are quite handy and I find I use Tantek's CSS toggle quite frequently to quickly check if a site was designed with tables or not (I am a web designer so these things fascinate me for whatever reason). I've employed the CSS toggle on my site: http://www.zeit.ca/ in order to demonstrate the power of CSS.

    MikeyC - 8th June 2003 01:00 - #

  13. I have written an extension for Firebird that incorporates many of these bookmarklets features in a menu and a tool bar. You can download it here: http://chrispederick.myacen.com/work/firebird/webd eveloper/

    Chris Pederick - 10th June 2003 05:33 - #

  14. Ah, I guess I should take the opportunity to post a link to a bunch of favelets that I've put together that are focused on accessibility issues (plus a handful of others) http://www.accessify.com/tools-and-wizards/accessi bility-checking-favelets.asp

    Ian Lloyd - 10th June 2003 13:32 - #

  15. So far, no luck with Safari, and not even with Firebird. Too bad, because it would be a very useful tool for people like me, who keep tweaking their style sheets. Let's hope the Safari team takes notice.

    Hiram - 10th June 2003 23:18 - #

  16. MikeyC,

    Tantek works for Micro$oft, so of *course* he's gonna call them 'favelets' rather than 'bookmarklets'. As much of a CSS god as Tantek is, I'm fairly sure that 'bookmarklets' was the term that was in use first, way back in the days of Netscape 4, when www.bookmarklets.com (no less!) found its way onto my radar.

    Oh, and Simon - it's nice to see Bath's finest getting a plug at Dive into Mark...

    Tim - 12th June 2003 08:52 - #

  17. This isn't working for me under Firebird .06 - even after upgrading to the latest build (with install) It's odd, because it works when I click on the link from this page, but not from my link list. It's all just blank pages. Any ideas?

    VIncent - 10th July 2003 19:57 - #

  18. vbxcv

    vxbv - 23rd August 2003 20:11 - #

  19. Tim: "I'm fairly sure that 'bookmarklets' was the term that was in use first, way back in the days of Netscape 4, when www.bookmarklets.com (no less!) found its way onto my radar."

    I agree. It is odd, however, that the W3C appears to endorse the term 'favelet' over 'bookmarklet'.

    See: Favelets For The Validator

    MikeyC - 15th October 2003 05:24 - #

  20. "favelet"? i haden't heard of that till i came to this page today. i have always called them bookmarklets. hmmmmm.

    anon - 23rd March 2004 19:36 - #

  21. I want to learn PHP. How can I learn? Please Help me some one..........And I also fined a friend som please please mail me Thankyou all byeeeeeeeeeeeeeeeee Take care...........

    Azaman - 4th October 2005 06:13 - #

  22. Interesting

    Duk - 14th October 2006 17:40 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/06/03/bookmarkletsAndCSS

A django site