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 engineering manager at various companies, including Google; I’m an open-source developer and a 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 with respect to politics and philosophy. Here on meiert.com I talk about some of my experiences and perspectives. (Please share feedback—interpret charitably, keep it friendly, but do be critical.)