This was a fun little read. Just through testing the examples, I also learned datalist does not seem to work well on mobile safari (which is a large enough market I might even say there’s essentially no scenario in which it’s worth using if there’s a compatibility issue).
The datalist examples definitely work on my iPhone. They integrate into the autocomplete suggestions above the native iOS keyboard. There’s no way to browse all the suggestions, but I suppose that’s not an intended use case for datalist.
However, the disabled attr on group definitely does not work!
That’s funny, in my case it tries to autofill my contact information
Mind that input + datalist is the HTML equivalent of the Windows combobox, once generally regarded as the worst UI element ever. (This was enjoying meme status in usability related articles and write-ups. So probably not a recommendation.)
Way back when I was working my first job, datalist didn’t work on Firefox. That’s what got Firefox removed from the list of supported browsers.
It has been a problem for a long time if you want to support anything other than Chrome.
> It has been a problem for a long time if you want to support anything other than Chrome.
That's partially because Chrome keeps adopting standards nobody else wants to support.
Both things can be true. Chrome supports a bunch of non standard APIs but it also has some of the best coverage of standard APIs.
Doesn't work with Firefox on Android either.
They work well but not with GBoard on iOS.
>What if there’s a bunch of options, but for [reasons] we don’t want a user to be able to select a subset of them? Let’s add the disabled attribute to an optgroup
Seems broken in mobile safari, not actually disabled I can still select the disabled items.
Not broken, but strange since it should be working on latest Safari.
Your link states it's not supported in iOS Safari at all, even though it has been supported in macOS Safari since 2013.
Ha! You're right. Ironically, I was viewing it on my phone and I only saw the "Safari" column and not "Safari on iOS".
Came here to mention the same thing. Very well be on me, tho. I’m using the Brave browser (is it safari-powered?) and on iOS 18.7.9, which is the newest my old iPhone X supports.
I think on iphone everything is safari powered(?)
Also doesnt work for me on iPhone Firefox
this was a dope & comprehensive.
unfortunately we have a new class of dev's that never learned html but went straight for React. Now with LLMs they will never learn HTML.
hence they reach for react components where simple html would have been sufficient.
I think that’s OK.
When I first had to use XML, I had to learn the XML spec and output it manually - serialization libraries didn’t really exist yet. I’ve since seen generation of juniors come up through the ranks using XML as an interchange format (and then JSON) without ever learning it fully. It was fine, and nothing terrible happened.
I’ve seen AJAX go from the hot new thing to people not knowing what it stood for, to now most people not even recognizing the term. AJAX didn’t die; it became so common we don’t need a word for it anymore.
To be honest HTML is a pain.
For example the HTML approach to style parts of a control is to use pseudoclasses. Sometimes the selectors are different across browsers! Then you have to test across browsers because who knows if it will actually work correctly.
React is not just easier it's more dependable. If I make something with React and some divs I know it's going to work the same in all browsers.
Good stuff, except don't get too excited about `datalist`. It just doesn't have enough hooks to be actually useful for anything other than a little prototype.
I've used a datalist for autocomplete suggestions and it's worked great.
I've had problems with <datalist> not showing when the input is misspelled, or when none of the <options> strictly begin with the input. I gave up and used an <ol> instead.
I think I’ve tried building a combobox using datalist once but it didn’t work
As you learn more about “raw” html you find all sorts of very fun things that are - ah - not very well implemented if at all.
The neat thing about HTML is that it's a living standard and anyone can contribute. Old bugs get corrected all the time simply because it annoyed a certain person enough for them to push a fix through the standards process.
Unfortunately, it could be around a decade before all three major browsers finally implement the standard, and the fix might not be quite as clean as you originally imagined.
TIL <menu>, I wonder why more frameworks don't make use of it.
<menu>, <dialog>, lots of fun stuff in html now.
I like to ask people what they imagine <ruby> does, because I certainly didn't guess right.
big brain no learn hyperspeak when many div do trick
HTML linters actually help distinguish things like that? I'm curious if there are any linters out there that can enforce this kind of semantic tag selection.
SuperHTML validates not only syntax but also element nesting and attribute values. No other language server implements the full HTML spec in its validation code.
Lots of useful information I wasn't aware of after being a front-end lead for years. I'll start using these at work for sure.
And yet, no native select + search combined, which is a very common kind of list. The datalist is basically unusable, because you don't know any of the options.
Sigh. Just when I was cheering Safari, finally both on Desktop and on Mobile have gotten to the point of good enough.
And then to find out the list don't work on Safari iOS.
What I always wanted to know about lists and never dared to ask!
tl;dr: You _do_ know HTML lists, they're basicaly like they used to be 20 years ago. But there are HTML form controls which are list-like and this will tell you about them: <select> and <datalist> which have <option> elements and <menu> which has <li> elements.
It's a nice read, not very long and you can kind of leisurely skim it.
That’s a really good article. It’s nice to see something which isn’t slop.
Somehow I'm still in the mode where I'm surprised where it is, rather than when it isn't, but yeah it's annoyingly often. Do you come across it so much that it's your default expectation now?
Title reminds me of Joni Mitchell.
I've looked at lists from both sides now
From give and take and still somehow
It's HTML lists' illusions I recall
I really don't know HTML lists at all
I thought of the 2000 version first which made this much funnier in my head
This was a fun little read. Just through testing the examples, I also learned datalist does not seem to work well on mobile safari (which is a large enough market I might even say there’s essentially no scenario in which it’s worth using if there’s a compatibility issue).
The datalist examples definitely work on my iPhone. They integrate into the autocomplete suggestions above the native iOS keyboard. There’s no way to browse all the suggestions, but I suppose that’s not an intended use case for datalist.
However, the disabled attr on group definitely does not work!
That’s funny, in my case it tries to autofill my contact information
Mind that input + datalist is the HTML equivalent of the Windows combobox, once generally regarded as the worst UI element ever. (This was enjoying meme status in usability related articles and write-ups. So probably not a recommendation.)
Way back when I was working my first job, datalist didn’t work on Firefox. That’s what got Firefox removed from the list of supported browsers.
It has been a problem for a long time if you want to support anything other than Chrome.
> It has been a problem for a long time if you want to support anything other than Chrome.
That's partially because Chrome keeps adopting standards nobody else wants to support.
Both things can be true. Chrome supports a bunch of non standard APIs but it also has some of the best coverage of standard APIs.
Doesn't work with Firefox on Android either.
They work well but not with GBoard on iOS.
>What if there’s a bunch of options, but for [reasons] we don’t want a user to be able to select a subset of them? Let’s add the disabled attribute to an optgroup
Seems broken in mobile safari, not actually disabled I can still select the disabled items.
Not broken, but strange since it should be working on latest Safari.
https://caniuse.com/mdn-html_elements_optgroup_disabled
I think it may be a Safari bug.
Your link states it's not supported in iOS Safari at all, even though it has been supported in macOS Safari since 2013.
Ha! You're right. Ironically, I was viewing it on my phone and I only saw the "Safari" column and not "Safari on iOS".
Came here to mention the same thing. Very well be on me, tho. I’m using the Brave browser (is it safari-powered?) and on iOS 18.7.9, which is the newest my old iPhone X supports.
I think on iphone everything is safari powered(?)
Also doesnt work for me on iPhone Firefox
this was a dope & comprehensive.
unfortunately we have a new class of dev's that never learned html but went straight for React. Now with LLMs they will never learn HTML.
hence they reach for react components where simple html would have been sufficient.
I think that’s OK.
When I first had to use XML, I had to learn the XML spec and output it manually - serialization libraries didn’t really exist yet. I’ve since seen generation of juniors come up through the ranks using XML as an interchange format (and then JSON) without ever learning it fully. It was fine, and nothing terrible happened.
I’ve seen AJAX go from the hot new thing to people not knowing what it stood for, to now most people not even recognizing the term. AJAX didn’t die; it became so common we don’t need a word for it anymore.
To be honest HTML is a pain.
For example the HTML approach to style parts of a control is to use pseudoclasses. Sometimes the selectors are different across browsers! Then you have to test across browsers because who knows if it will actually work correctly.
React is not just easier it's more dependable. If I make something with React and some divs I know it's going to work the same in all browsers.
Good stuff, except don't get too excited about `datalist`. It just doesn't have enough hooks to be actually useful for anything other than a little prototype.
I've used a datalist for autocomplete suggestions and it's worked great.
I've had problems with <datalist> not showing when the input is misspelled, or when none of the <options> strictly begin with the input. I gave up and used an <ol> instead.
I think I’ve tried building a combobox using datalist once but it didn’t work
As you learn more about “raw” html you find all sorts of very fun things that are - ah - not very well implemented if at all.
The neat thing about HTML is that it's a living standard and anyone can contribute. Old bugs get corrected all the time simply because it annoyed a certain person enough for them to push a fix through the standards process.
Unfortunately, it could be around a decade before all three major browsers finally implement the standard, and the fix might not be quite as clean as you originally imagined.
TIL <menu>, I wonder why more frameworks don't make use of it.
<menu>, <dialog>, lots of fun stuff in html now.
I like to ask people what they imagine <ruby> does, because I certainly didn't guess right.
big brain no learn hyperspeak when many div do trick
HTML linters actually help distinguish things like that? I'm curious if there are any linters out there that can enforce this kind of semantic tag selection.
Cloests thing I know of is https://github.com/kristoff-it/superhtml#diagnostics
Lots of useful information I wasn't aware of after being a front-end lead for years. I'll start using these at work for sure.
And yet, no native select + search combined, which is a very common kind of list. The datalist is basically unusable, because you don't know any of the options.
This is how real HTML magic should look like:
<MARQUEE>
</MARQUEE>blink wont work, but marquee will
Not with that attitude:
What version of Macromedia Dreamweaver did you use to make this?
people who use css are not welcome here.
It’s OK if it’s a polyfill.
Wait, not far enough back…
It’s OK if it’s a shim.
Since <BLINK> is gone, `BEHAVIOR=SLIDE` is the closest you'll get.
<MARQUEE DIRECTION="DOWN" BEHAVIOR="SLIDE">Slide</MARQUEE>
<MARK>FTFY</MARK>
Sigh. Just when I was cheering Safari, finally both on Desktop and on Mobile have gotten to the point of good enough.
And then to find out the list don't work on Safari iOS.
What I always wanted to know about lists and never dared to ask!
tl;dr: You _do_ know HTML lists, they're basicaly like they used to be 20 years ago. But there are HTML form controls which are list-like and this will tell you about them: <select> and <datalist> which have <option> elements and <menu> which has <li> elements.
It's a nice read, not very long and you can kind of leisurely skim it.
That’s a really good article. It’s nice to see something which isn’t slop.
Somehow I'm still in the mode where I'm surprised where it is, rather than when it isn't, but yeah it's annoyingly often. Do you come across it so much that it's your default expectation now?
Title reminds me of Joni Mitchell.
I thought of the 2000 version first which made this much funnier in my head