HTML and CSS techniques to reduce your JavaScript
I’m not surprised but a little disappointed that most of the older techniques aren’t mentioned:- checkbox/radio inputs can be used to toggle state with `:checked ~ .foo` selectors- `:focus` (and now `:focus-within`, and `:active` though it’s less useful) can be used similarly, but also allow child selection [Edit to add: `tabindex="-1"` makes anything focusable with a pointer input, but doesn’t capture keyboard tab or  iteration with assistive tools]- `:target` can be used similarly, paired with fragment links [Edit to add: but beware history entries, this can be a poor UX]- `` can be used to not only set those states but also trigger scrolls (including within `scroll-snap` parents) without creating navigation history entries- the `attr()` function can be used to reference server-dynamic HTML data for display with `content` in pseudo-elements- I have to assume CSS animations are adopted widely enough that people aren’t using JS for that where it isn’t needed; but you can also use declarative, even interactive, animations in SVG- speaking of which, inline SVG (even `` references) are part of the CSS cascade, and you can change any CSS-addressable property with `currentColor`- and you can nest HTML in SVG with `` if you want to use SVG techniques in HTML- probably not worth mentioning but in case you don’t know... if you miss table layouts, you can use them with `display` on basically anything; if you want table semantics without tabular rendering you can override `display` as wellAlllllll of that being said, if you use these techniques check your stuff with assistive technologies!