After reading Stefan Bauer’s intriguing idea for switching a video preview to an actual embedded video using a `
Furthermore, we no longer have to manipulate the structure as much to use that toggle. Previously, with only `:checked`, we needed to employ `:checked ~ .something-else` style selectors to achieve complex functionality. Now, it’s essentially unnecessary.
“`css
body:has(#toggle:checked) {
.something-else {
}
}
“`
This pattern also applies to `
“`css
details {
&[open] {
}
body:has(&[open]) {
.something-else {
}
}
}
“`
It feels like we’re wielding a lot of power 😅.
This led me to think we could unveil another entire background (similar to a `::backdrop`) that envelops everything except the details (to draw significant attention to it, like a modal).
That’s enough creativity for a Wednesday.