After reading Stefan Bauer’s fancy idea for toggling a video preview to a real embedded video with a <details> element, it had me thinking just how powerful having an generic “toggle” is in HTML. In CSS, ages ago, we got the :checked pseudo selector, and it has been used to gosh-danged high heaven to make interactive things on websites. It’s just a toggle. And now toggles are getting easier and easier to make.
On top of that, we don’t have to be as tricky with how we structure things to use that toggle. When all we had was :checked, we had to use :checked ~ .something-else style selectors to do more interesting things on the page. Now we essentially just don’t have to.
body:has(#toggle:checked) {
/* style the body */
.something-else {
/* style anything else */
}
}Code language: CSS (css)DOM be damned.
This is basically the same with a <details> element (toggle).
details {
/* style the <details> */
&[open] {
/* style the details when it is open */
}
body:has(&[open]) {
/* style the body when the details is open */
.something-else {
/* style something else when body has an open details element */
}
}
}Code language: CSS (css)That feels like weirdly a lot of power 😅.
That had me thinking we could basically reveal another entire background (almost like a ::backdrop) that covers everything but the details (just to call a ton of attention to it, again like a modal).
That’s probably about enough being weird for a Wednesday.
