📝 CSS-Tricks 209: details/summary hack and fancy web-book things

View this newsletter on the web.

Pausing a GIF with details/summary

This is the neatest trick I’ve seen in some time. In this demo, Steve Faulkner creates a way to effectively pause a gif by wrapping the image in <details>/<summary> and positioning those elements on top of an image, like this:

This isn’t the demo, it’s just a (very meta) GIF demonstration.

Chris then went ahead and made another version in which he replaced the GIF with the images so that the animation is paused by default. And also that GIF is lazy loaded in, which could potentially be much better for performance.

The details and summary elements are designed to let you show/hide content like an accordion but this sort of demo makes me feel like this is the new checkbox hack, where a relatively simple bit of HTML can do a ton of outlandish and bizarre things.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s