I recently found myself looking at the Tools switch in Espresso:
Not because I was going to use it (I rarely do), but because I started wondering what would be the best way to replicate this effect in CSS. I set on to create something that adhered to the following rules:
- It should be keyboard accessible
- It should work in as many browsers as possible and degrade gracefully to a plain checkbox in the rest
- It shouldn’t depend on pseudo-elements in replaced elements (such as checkboxes), since that’s non-standard so not very dependable
- It shouldn’t require any extra HTML elements
- It shouldn’t use JS, unless perhaps to generate HTML that could be written by hand if the author wishes to do so.
Why you may ask? Some of them are good practices in general, and the rest make it easier to reuse the component (and they made it more challenging too!).