The right way to disable CSS animations

Sometimes I want a way to disable all CSS animations on a page. This is useful for end-to-end testing, automatic screenshots, or reducing motion sickness risk. This recent CSS Tricks post suggests disabling animations & transitions while resizing, to reduce needless browser work. This is an excellent idea! Here is the usual way of disabling …

CSS snippet for better mobile screenshots

A useful tip when adding screenshots to posts or talks is to put them “inside” a device. This gives the screenshot some context. Even though this screenshot already contains Android top & bottom bars, with the added outline it’s immediately obvious it’s from a phone. To add the outline to images I use a simple …