3 ms·

Cool native HTML elements you should already be using

75 points by hbroadbent 2y ago

deleted 2y ago
[deleted]
hbroadbent 2y 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 2y ago
  You tell me. I actually didn’t know the modal element existed. Quite handy!
  - hbroadbent 2y ago
    Hah fair enough! I've actually just stumbled on the Popover hint demo (https://mdn.github.io/dom-examples/popover-api/popover-hint/ 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 2y 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 2y 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.
- hbroadbent 2y ago
  Oh cheers, I had no idea. I'll fix it, thank you
malmz 2y ago
Tiny nit-pick: onclick="document.getElementById('modal').showModal()" in yellow box 3 seems to not allow word breaks, overflowing the page
pjmlp 2y 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.
RadiozRadioz 2y 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.
- hbroadbent 2y 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.
  - RadiozRadioz 2y 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 2y 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.

75 points by hbroadbent 2y ago

deleted 2y ago

[deleted]

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 2y ago
You tell me. I actually didn’t know the modal element existed. Quite handy!
- hbroadbent 2y ago
  Hah fair enough! I've actually just stumbled on the Popover hint demo (https://mdn.github.io/dom-examples/popover-api/popover-hint/ 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 2y 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 2y 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.

hbroadbent 2y ago
Oh cheers, I had no idea. I'll fix it, thank you

malmz 2y ago

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

pjmlp 2y 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.

RadiozRadioz 2y 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.

hbroadbent 2y 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.
- RadiozRadioz 2y 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 2y 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.