Cool native HTML elements you should already be using

https://harrisonbroadbent.com/blog/cool-native-html-elements/

by hbroadbent • 1 year ago

75 12 1 year ago

harrisonbroadbent.com

hbroadbent4• 1 year ago

Stoked to see a few hundred people have already read this article (and one person's already suggested an improvement!).

What other elements should I add?

moi2388• 1 year ago

You tell me. I actually didn’t know the modal element existed. Quite handy!

hbroadbent4• 1 year ago

Hah fair enough! I've actually just stumbled on the Popover hint demo (https://mdn.github.io/dom-examples/popover-api/popover-hint/) which uses the Popover API to create native HTML tooltips. I'm planning to update my article with them once I've played around a bit more

lelanthran• 1 year ago

What other elements should I add?

Not really an element, but `popover` attributes for elements, maybe?

Recently I've been using fieldset+legend to great effect for titled input forms. In fact I've used it almost exclusively in my last contract.

Some other ones that too few people use: progress, cite, sub/sup, datalist (very useful), and search (also very useful as a busy indicator when used with no percentage).

pastrami_panda• 1 year ago

This website is quite broken on firefox android. Lots of jank but most notably the viewport isn't fixed so when you interact with sliders the viewports also shifts to the side. Figured I'd point it out as it's an article about website interaction.

hbroadbent4• 1 year ago

Oh cheers, I had no idea. I'll fix it, thank you

malmz• 1 year ago

Tiny nit-pick: onclick="document.getElementById('modal').showModal()" in yellow box 3 seems to not allow word breaks, overflowing the page

pjmlp• 1 year ago

The problem is that they can't be customised to whatever the UI/UX team dreamed on their PowerPoint,Photoshop,Sketch,Figma,..... drawings, expecting platform capabilities like on native GUIs.

Thus even if supported, they don't do those cool UI/UX workflows sold to clients, and that is how we still end with a div/css/javascript soup, or back to Flash like approaches, now that WebGL/WebGPU/WebAssembly has brought that tooling back into the Web.

RadiozRadioz2• 1 year ago

I’ve used TailwindCSS for the styling, but you can apply them directly with CSS for the same result

    class="[&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg   [&::-webkit-progress-bar]:bg-stone-300 [&::-webkit-progress-value]:bg-stone-400 [&::-moz-progress-bar]:bg-stone-400"

Anyone else think this Tailwind-everything trend has gone too far? Tools have strengths and weaknesses, but I never understood why Tailwind specifically is so poularly seen as some kind of "default" these days - rather than a supplement to CSS for common/simple operations.

Personally I think the popular trends have overcorrected from CSS; soon we'll realize that the amount of complexity above is screaming to be packaged up and named something, rather than being crammed into the markup alongside more sensible things like text-black.

hbroadbent4• 1 year ago

Sure it's not the prettiest, but even if you styled this with CSS directly you'd need to target those selectors. `#range-input::webkit-progress-bar` etc.

To your final point, I completely agree that it should be packaged up — I'd package this up into a component (react, partial etc.) which would encapsulate the styles via Tailwind, HTML and logic.

I like Tailwind as a way to more closely tie my markup with styling. I'll package it all up into a component anyway, but Tailwind keeps it all in 1 spot (the markup) rather than spread across multiple files.

RadiozRadioz2• 1 year ago

You can't put CSS alongside a component's markup in the same file? What kind of framework are you using?

I don't use them all, but I know Vue and Svelte can. React is really popular, so I assume it's got a way.

chatmasta• 1 year ago

In 10 years, Tailwind is going to be like Bootstrap is now. Embedding a sophisticated DSL into attribute strings has never been a good idea. It works as long as the tooling around it is kept up to date, but it’s a hack. CSS may be ugly, but at least browsers are committed to maintaining backwards compatibility, and I can statically analyze it to reason about its behavior.

Cool native HTML elements you should already be using

Related Stories