If you’ve begun to use CSS3 experimental features in your sites lately such as box-shadow, border-radius or text-shadow, you know how much pain it can take away from the design process. Unfortunately, lots of people are still using Internet Explorer and can’t see all these pretty additions you’ve added.
I thought it would be useful to have a simple way to run a sanity check on my design to make sure it wasn’t going to look awful or unreadable once all of the CSS3 goodies were taken away. With that in mind, I created a bookmarklet that will toggle the display of all of that modern goodness.
Just drag this link: Toggle CSS3 into your bookmark toolbar. Then, by clicking it, you can turn off (and back on) the most common CSS3 improvements. Once installed, if you visit a page such as CSS3.info and click the bookmarklet, you should see the CSS3 effects toggle off.
Note that this is a simple, none-too-bright bookmarklet and only removes the obvious traces of CSS3. It doesn’t inspect your CSS for non-supported color values (like RGBA) or deal with many of the more advanced features of CSS3. In fact, all it does is eradicate these styles:
border-radiusbox-shadowtext-shadowborder-imagebackground-originbackground-clip
However, it’s still a useful tool if you’re designing for the future with an eye for the past. Enjoy!
