Testing Tricks: CSS Bookmarklets

Published on Dec 29, 2010 (updated Feb 5, 2024), filed under development, css. (Share this post, e.g., on Mastodon.)

This and 133 other posts are also available as a well-behaved ebook: On Web Development.

A quick tip: If you’re working in a complex development environment that does not allow you to fully test the impact of upcoming style sheet changes, a simple CSS bookmarklet containing all the changes or the new style sheet in its entirety can be a nice way to give other developers a chance to review changes in action before they’re actually live. (That was one sentence.)

Using CSS bookmarklets can be a particularly useful testing complement if you have not thought of or did not yet get to setting up a prototype for your site or framework, and if you can actually ask developers rather than less tech-savvy users to test in order to quickly get to qualified feedback or them to eventually prepare for adjustments on their own end.

Side note: Be cautious around style rules you are about to remove as they will still be in effect on pages to be tested. With a simple CSS bookmarklet you would need to “neutralize” such rules within the bookmarklet, eventually by explicitly setting initial values.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and manager at various companies (e.g., Google); I’m an active web and tool developer (code optimization, digital defense), a contributor to web standards (like HTML, CSS, WCAG), and a book author (O’Reilly, Frontend Dogma). Stay in touch.