As you know, we love unusual tech at Lingo.dev. So when in my last essay, David commented he was surprised to not see "dialog" HTML element, it hit...
For further actions, you may consider blocking this person and/or reporting abuse
Nice article!
Maybe you can add some screenshots of what every element looks like by default?
ah nice, good idea!
Great tips, im using a bunch of them on my project's website.
I'm gonna add an other one to your list if you let me ;) : you can also achieve scroll interactions using link anchors and ids same as before using "#top" for example but now smoothly.
Just add the CSS rule:
wow, this is really nice! :)
Cool!
time
right? this is pretty cool!
pretty cool seeing all these native elements getting some real use - you think people avoid them just because it’s habit at this point or something bigger?
I think we, on average, got used to searching for 3rd party libs right away, or using chatgpt trained on mostly mature websites, instead of studying the fundamentals!
WoW! It's been a while I looked into HTML tags. Never knew about
<details>,<summary>,<output>and<meter>. I'm already thinking where can I use this in my project.<meter>is my favorite, basically a progress bar!I wish browsers would render it using more colors than red, yellow, and green.
yep, 100%
Excellent article 😁👌
<meter>is going to be a fun one to mess around with! This is awesome post!yeah indeed! :)
These sound appealing, but offer limited ability for custom styling. You are forced to use default browser styles, which look different across different browser engines. If you want full control over appearance and UX it’s best just use a UI library or build your own.
yep, i agree with this! unless you already use tailwind that can be added on top.
Saved...
⚡
Nice post!
thanks :)
The example with "mortgageCalc" doesn't seem to work
updated the second snippet!
Great article! I will recommend this to my friends too
Pretty cool seeing native stuff like this actually get some respect - makes me wanna rethink how much I use divs for everything.
Great. I already knew about dialog, details, and datalist, but meter and figure are refreshing to know about!!
Love this roundup! The dialog and meter elements especially always surprise me - do you have a favorite use case where going native saved you from a giant dependency?
Meter is nice, in my opinon, when you have to show a quick unsophisticated meter in the app :)
Awesome
Great article. Thanks!
Oh my... I have always wanted to get a modal without some JS framework... and I have it!
sometimes all you need is plain html, css and vanilla-js.com/
hahaha i learnt something new thanks man will try them out. Funny you right i dont think i have ever used any of these before 😂
🫡 🫡
on new HTML tags? :)
Seems like it's time to accept HTML as a programming language lol didn't have any kind of interaction with HTML for so long and never really knew about this, definitely useful, thanks!
yeah, html seems to be getting more and more sophisticated last couple of years!
Thank you for the article. HOWEVER, if you are going to write an article where #1 is the dialog element, please — PLEASE — also mention form[method="dialog"] + button[type="submit"]. I have 6 engineers I'm trying to get to use all these native goodies instead of pulling in a godforsaken library to do it, and they'll just read your article and wire up a godforsaken click event to a godforsaken span and write an element's layout rules in JS instead of CSS (reinvent the CSSOM) if you don't mention the real way to use this stuff. You've gotta remember that nowadays people think they can call themselves a frontend engineer when they know zero CSS, barely any HTML, not enough JavaScript, and no other frameworks but React. I blame the Bootcamps for the "6 figures in 6 weeks" marketing scheme that is an absolute scam.
type="submit" is the default for buttons.
I did not know this method=dialog very cool!
yep! Native elements are becoming much more powerful, so i believe every developer should at least know they exist, before choosing older 3rd party libs that do the same!
Why do you promote a Philipine Restaurant?
That is a big, long website with their menu.
Just to add: in Chrome, the
summaryelement allows the accordion to automatically expand when using Cmd+F (or Ctrl+F), making hidden content searchable without any JavaScript. Unfortunately, Safari doesn’t support this behavior yet. Still, it’s a great feature for improving UX in documentation and FAQs!Very useful! Thanks!
happy to share! :)