Skip to main content
CSS is fun and cool and I like it.
Article

Pausing a GIF with details/summary

Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it — which is really a <details>/<summary> element. When toggled, a (non-animated) JPG inside covers the GIF, effectively “pausing” it.… Read article “Pausing a GIF with details/summary”

Article

Using <details> for Menus and Dialogs is an Interesting Idea

One of the most empowering things you can learn as a new front-end developer who is starting to learn JavaScript is to change classes. If you can change classes, you can use your CSS skills to control a lot on a page. Toggle a class to one thing, style it this way, toggle to another class (or remove it) and style it another way.

But there is an HTML element that also does toggles! <details></details>! For example, it’s … Read article “Using <details> for Menus and Dialogs is an Interesting Idea”

Article

Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion

Gosh bless the <details></details> element. Toss some content inside it and you have an accessible expand-for-more interaction with just about zero work.… Read article “Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion”