Testing Tricks: CSS Bookmarklets

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

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 a senior engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and engineering manager for companies you use every day and companies you’ve never heard of, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in philosophy. Here on meiert.com I share some of my experiences and perspectives. (I value you being critical, interpreting charitably, and giving feedback.)