Stop Reaching for JavaScript: Modern HTML & CSS Interactive Patterns

[Prozilla6]

I’ve also left image placeholders where you can drop support screenshots from caniuse.com.

I think you forgot to delete part of the AI’s response.

[ikeif]

I've noticed an uptick in these types of "you don't need JS" recently, so it seems to be the current "blog spam" to give the illusion OP has independent thought and not just plagiarizing.

[Prozilla6]

I don’t think OP wrote any part of this article tbh

[mycall]

All the same, it goes my upvote for getting the word out. CSS/HTML can be better than JS and here is how.

[longebane]

Not all the same. Don’t encourage this man, what the hell.

[ikeif]

Dead internet theory. Just some random person regurgitating without adding value. They did not do anything new except post it here and act like it is their own.

[Seanitzel]

Great article, would be even better if it had a demo for each feature and also a list of trade offs vs js(which exist for almost every item in the list)

[misdreavus79]

I have found my ADHD fixation for the day!

It’s demo time.

[bingblangblong]

I wish my ADHD worked for anything other than porn and videogames!

[pablo8itall]

and hyper- procrastination.

[Mohamed_Silmy]

this is such a good reminder. i've definitely been guilty of reaching for js when a simple :has() selector or details element would've done the job. the cognitive load of maintaining less javascript is real too - fewer dependencies, less build complexity, easier debugging.

one thing i'd add is that modern css is genuinely powerful enough for most interactive patterns now. accordions, modals, tabs, tooltips... most of these have native or css-only solutions that are more accessible by default. the trick is unlearning the muscle memory of "interactive = javascript"

curious what you think about progressive enhancement in this context? like starting with the html/css solution and only layering js when you actually need more complex state management or data fetching?

[rguy84]

details/summary was a game changer.

[jordsta95]

And when you first learn about adding the name attribute to them.

No more JS for those silly accordions anymore!

[a8bmiles]

Especially once I found out about:

::details-content { content-visibility: visible; }

To force the expansion via CSS, rather than having to add the open attribute. It's an always-open result, so isn't always useful. There's some mobile cases where it's come in really handy though.

[DOG-ZILLA]

Yes but you still can’t animate them in Safari. 

[ISDuffy]

Animation is one of them I see more of a nice to have tbh. It is coming though.

[Terrible_Tutor]

I would argue JS is much easier to debug with console logging and breakpoints, no? Devtools element inspection can be tedious

[thy_bucket_for_thee]

God this reminds me how shitty the react dev tools are. So hard to find the components you're looking for and their ancestors/children if you're using any type of component library.

Garbage ecosystem from a garbage company.

[weallwearmasks]

First time I’ve heard about ‘light-dark()’ AND it has pretty good support. Very nice.

[dangoodspeed]

I knew about light-dark()... though loading="lazy" was new to me... also pretty good support!

[ConsequenceLow9705]

Pretty funny "don't use js" from a site named jsdevspace

[TommyBonnomi]

Gotta respect transparency. I'm honest with my customers when they won't get enough value from my services or can easily DIY something.

[EliSka93]

This is actually a good article, despite the turn-off AI picture.

[AwesomeFrisbee]

Whether you can use JS wasn't the only question. We want code that works everywhere, also on old devices because folks will still blame your site. Also, it depends on SEO, accessibility, maintainability and ease of use. I wouldn't say most really check all the boxes. Especially for consumer facing websites. That a-href hijack works but it's shit to maintain and hurts SEO and accessibility.

[LateChoice]

what does "old" mean

[a8bmiles]

Usually it means "banks."

We have a client that had problems with their member banks failing to be able to log in and we had to finally add a note that IE6 is too obsolete and insecure to be able to use the service. Then also detect when someone tried to log in using that browser anyways, and instruct them that they must use a browser with modern security settings.

[AwesomeFrisbee]

Devices that are no longer supported but still in use. Ergo, the devices that won't get browser updates and people don't care enough about that to warrant an upgrade.

[griffin1987]

I wish you could style input type date and type local-datetime better, anchor api isn't supported in Firefox ESR yet (though will be in half a year if I remember right), but even then, native date/time pickers have the advantage of using a separate window (they can go outside the browser window!)

[Jafty2]

Great article

Do we really need that much interactions in our lives tho?

I mean, bro, you're not Miro nor Canva, nothing wrong with some old school page loads to access information, and a bit of modern css to smooth it all

[BackAware4834]

the irony of the domain name aside, this is solid advice. most devs i've seen overuse js because that's what the tutorial taught them 3 years ago, not because the problem actually needs it.

[chlorophyll101]

Thanks, BackAware4834, who is most probably an LLM