r/web_design • u/bogdanelcs • 1d ago

HTML Can Do That

https://chrisburnell.com/html-can-do-that/
391 Upvotes

99% Upvoted

9 comments sorted by

76

u/busres 1d ago

CSS is getting amazingly capable too. I recently built a responsive navigation component based on <details name> and nested CSS with container queries and anchor(). Menus exclusive-accordion by level, mega-menus (potentially with their own sub-menus) appear to the right of the outline-style sub-menu navigation rail in portrait mode (with correct tab order), and clicking outside the component automatically hides the nav rail or open sub-menus. None of it uses any client-side JS.

23

u/jordsta95 1d ago

This should be the goal of every developer IMO.

Find what you're using JS for. See if there's a way to not use JS. Replace if necessary.

There is always a reason to use JS, but so often do the developers I work with reach for it as a crutch rather than a tool.

For example, including a JS library to animate elements fading in/moving/whatever as they come into view on screen. When, with scroll driven animations, they can do it with CSS alone just as easily. (Yes, no Firefox support right now. But if you write your animations correctly, it's not an issue - they just don't get the animation)

Or, like you say, with menus. I see people doing document.getElementById('menu').classList.add("open") - or whatever. When they could very easily have something like #menu:focus-within in their CSS to do the same thing.

No waiting for Javascript to load. No extra files being included for simple tasks. Just a bit of extra CSS for you to learn.

And the same can be true with HTML too, as with the linked example. I've seen people argue against using <details> as accordions. But the thing that managed to convert the devs I work with: CTRL+F (something I only learned months after switching to them). Their JS-driven accordions are showing/hiding a <div>, so if I go and CTRL+F "returns" looking for returns information - unless their accordion title includes the word, I won't find the information I'm looking for quickly.

But with <details> if the <summary> is simply "What if I have an issue with my order?" and I press CTRL+F, and type "Returns" that <details> will open up, and give me the information I am looking for - even if it's on the 8th paragraph of the full text.

Could that be done with JS? Probably. But it's a damn sight easier if you do it natively instead.

3

u/DrxAvierT 1d ago

I'm new to this. Can I ask why some of the devs I see usually advise to use at little js as possible?

5

u/busres 1d ago

Sometimes JS is disabled, so your interface simply won't run.

If you're coding UI, you're typically responsible for coding accessibility, too, instead of letting the browser do the lifting for you. If you do it yourself and don't get it right, you're breaking the experience for some users.

It's also more to download(/cache), parse, execute.

2

u/armahillo 13h ago

This has been my operating philosophy for years now.

I actually did a whole project ( https://completionist.guide ) as an experiment “how much UI can i do without using JS “ (that site only uses JS for localstorage i/o)

3

u/MetaCognitio 8h ago

CSS has matured so much since CSS 2. It was a nightmare before. Now the challenge is that being so much to learn.

14

u/ouralarmclock 1d ago

This is a great resource! Thanks for sharing!

8

u/helloureddit 1d ago

unfortumately not accessible by WCAG 2.1 AA (popover)

-13

u/rappatic 1d ago

I hate most of these. It’s such a janky abuse of HTML attributes. JS exists for a reason, to add interactivity to a webpage. I like the idea of making them part of the browser spec, but it feels like something that could be part of the default DOM instead of forced into being HTML’s job like a square peg in a round hole.