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

Posted at February 15, 2004 11:01 AM

Comments

visitor said on February 19, 2004 11:57 PM

your bookmarklets page, really really SUCK, it’s filled with JUNK links, with errors, try NOT to leave that on your blog, other than stuff that’s really important, people DON’T want to read junk and error filled pages.

Andy Budd said on February 20, 2004 9:01 AM

They are bookmarklets you muppet, not links to pages.

If you have a problem, email me and I’ll try to explain things to you. However leaving anonymous, abuse filled comments is quite rude. I sure your mother didn’t bring you up to behave that way.