Safari Friendly CSS and Accessibility Favelets | February 15, 2004

I came across this handy user stylesheet and associated favelet the other day. The stylesheet basically outlines and names all the page elements with an ID or class.

There are a few favelets out there that do a similar thing (see my bookmarklets page), but they mostly use the border property. The thing that’s nice about this stylesheet is that it uses the outline property. Unlike borders, outlines take up no space, so using them for testing can be really useful as they don’t disrupt the layout of your page. Outline doesn’t work in the “usual suspect” browsers, but does work in Safari. As such, if your a OS X based web developer, this stylesheet and the associated stylesheet toggle favelet could come in useful.

I recently had a play with custom stylesheets myself and came up with a nice little, Betsie inspired one for people with visual impairments. Unfortunately, it only works if the site you visit have doctypes that don’t throw the browser into quirks mode. I’m sure there is probably a way around this, but haven’t had time t look into it more. If anybody has any suggestions, please drop me a comment.

In the meantime, I though my Betsie user stylesheet would make a neat little favelet, so tweaked the above favelet to create a Toggle Betsie Favelet