[glacials]

Now that it's 2021, most of the concessions the author makes are possible with CSS. You can change the styling of an element using hyperlinks with the `target` pseudo selector:

    <style>
      #dropdown {
        display: none;
      }
      
      #dropdown:target {
        display: block;
      }
    </style>
    <a href="#dropdown">Show dropdown</a>
    <div id="dropdown">
      Dropped down!
      <a href="#">Close</a>
    </div>

This works for dropdowns, tooltips, modals, even navigation if you're navigating to known places (or if you use JS to pre-insert the destination into the DOM). And of course, you can animate the changes with pure CSS.

[chrismorgan]

:target has been a possibility for many, many years, but is a poor choice for this sort of thing because it’s rather fragile (other things touch the fragment too) and messes with history.

The better hack that has been long available is invisible checkboxes, :checked and a sibling selector. That’s almost certainly what “you could fake it with CSS too” was describing back then.

But the proper solution now would be <details>. As an example of this, many dropdowns on GitHub work without JavaScript, by using <details>.

I would note that with all of these alternatives, you tend to want a little JavaScript to enhance the functionality, e.g. manage ARIA states and focus.

[ranger207]

They've also got a blogpost (from 2020) about that, which provides an interesting counterpoint to the posted article

https://eev.ee/blog/2020/02/01/old-css-new-css/

[draw_down]

These sort of arrangements typically don't hold up when it comes to finer points of UX, like "clicking outside closes it" or "closes after x seconds", and so on. What if you wanted a keystroke shortcut to open the thing, or a keystroke shortcut to close it, the list goes on and on and on.

Product managers and designers don't care about reducing JavaScript, so that really has no weight against the things I've mentioned plus more. They want it to work the way they want it to work.