https://open-ui.org/components/combobox.explainer/ https://open-ui.org/components/switch.explainer/
> Where are the native HTML Tabs control?
You implement tabs today (aka accordions) with `<details name="tab">`. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de... "This attribute enables multiple `<details>` elements to be connected, with only one open at a time. This allows developers to easily create UI features such as accordions without scripting."
You do have to write some CSS to align tabs horizontally, but it's fine.
> Image selector?
Use `<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />`. Opens the OS photo picker on mobile. You can style it however you like.
> We can't even get text input to respect autocomplete directives properly.
"Properly" seems to be doing a lot of work there. "autocomplete" works fine, but it's annoying to get it right, and this kinda can't be fixed, because HTML is under a lot of backwards-compatibility constraints.
If you have autocomplete bugs to file, file them, and maybe convince the Interop group to focus on this issue. Their priorities for 2025 were just announced, but there's always next year. https://web.dev/blog/interop-2025
This just selects the image. 99 times out 100, you want to do the same things with the image data: adjust it in some way, and save it to object storage or something. The file input is too primitive for this. And this is the theme all over, HTML control remain too primitive to do any real world rih UI with, which leads to the proliferation of JS UI libraries.
> If you have autocomplete bugs to file, file them, and maybe convince the Interop group to focus on this issue. Their priorities for 2025 were just announced, but there's always next year. https://web.dev/blog/interop-2025
Autocomplete "bugs" abound aplenty, some of which will make your jaw drop. I've been testing with Chrome and Firefox. The length to which browsers will go in a misguided attempt to be clever with auto-complete is frankly absurd. So I'm not sure they are "bugs" so much as they are a wilful refusal by browser vendors to follow the spec.
That's not true at all. Obviously there's no `adjustinsomeway` or `savetoobjectstorage` attribute on the <input> element, but you can trivially grab the selected files, read them, and act on them with JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/File_API/Us...
I thought the whole point was to avoid JavaScript, by having rich UI components built right into the browser
They all have functional built in image editors. They're very light weight, and are not meant to replace a dedicated tool, but if all you want to do is crop an image or other relatively simple tasks, there's ample evidence on other platforms that providing these minimal tools is big value to users.
No, there's just the one "bug": browsers ignore autocomplete=off.
And, as you say, the browsers regard that not to be a bug, because when they honor developers request to prevent autocomplete, users keep filing bugs on the browsers, saying "why won't you autocomplete this??"
Put something descriptive in the autocomplete, instead of "off", and you're usually fine.
Consider the "State of HTML" survey of form pain points. https://2024.stateofhtml.com/en-US/features/forms/#forms_pai...
See also the "missing elements" section. https://2024.stateofhtml.com/en-US/usage/#html_missing_eleme...
An image cropper didn't make the list. Data table did! But it's pretty complicated, and, as I said, progress is slow. Partly that's for backwards compatibility reasons, and partly it's because you have to get Apple, Google, Microsoft, and Mozilla to all agree on anything, and that's really hard.
Autocomplete is on the list of pain points. But it's wayyy further down the list than having a customizable `<select>`. Styling & customization, validation, and `<input type=date>` are all bigger pain points than autocomplete.
If you want a laundry list of them, I'm ready to list them all in their gory details here, but I suspect you have made up your mind irrespective of the facts.
That's kind of a bonkers expectation for the browser to fill. It's like expecting that <input type="audio" /> should let me crop the audio and add reverb to it. That's two specific manipulations out of untold thousands, and squarely within the purview of a different app. https://editor.audio/ (never used this, just an example)
This is probably the reason why someone invented the <canvas> element?
Sorry, but this seems like a wild mischaracterisation, at least in regards to the problems I've had with users on Chrome. In our experience, Chrome aggressively shows an autofill prompt on almost every input it can. It also ignores the specced autocomplete=off attribute. We have observed Chrome showing a password prompt on an <input type=number> which is just bonkers. It is not hard NOT to do this.
The Chrome team thinks whatever heuristic they're using is better than allowing developers, or even end users, to control filling behaviour.
https://issues.chromium.org/issues/41163264 https://issues.chromium.org/issues/41239842
(By "autofill" I don't necessarily mean the input is automatically filled without user interaction, but sometimes a promotions shown with e.g. account login details or an address.)
The argument has been that developers are naughty and turn off autocomplete inappropriately, which worsenes accessibility. But I've never seen e.g. a tooltip option in a browser to let me, the user, fill in details when I know they're appropriate? I am merely at the whim of the Chrome algorithm.
> We have observed Chrome showing a password prompt on an <input type=number> which is just bonkers.
"We have observed" it, but not filed a bug? Neither of the bugs you linked to exhibit that bug.
No, there are many inputs where there is no sensible autocomplete value. For example, "create a new CRM customer record". This is a new customer who I have not seen before. By definition it is impossible to autocomplete.
In the past, the Chrome team advised to "make up an autocomplete value and we won't do anything with it". This advice is a) dumb and b) no longer works anyway.
> but not filed a bug?
It's clear the Chrome team has no interest in fixing this behaviour so I'm not going to waste my time. Yes, that's bad of me, but I have bills to pay.
It's clear to me that you only vaguely remember a bug that no one can repro. Nobody has time for that.
It's clear from the threads I did post that lots of devs are frustrated with Chrome's behaviour and the team's lack of attention to not just fixing bad behaviour, but complying with the HTML spec. Without even focusing on the type=number problem, I have spent enough time fighting other behaviour which is only an issue in Chrome.
> you only vaguely remember a bug
Thanks to that ad-hom I am now irritated, and I went back to our internal Slack to find the screenshot of the type=number bug. Sharing a screenshot here would have no real value to this discussion, but it's real.
Problem is we (my development team) didn't own the tablets, some other team did so we couldn't force the tablets to have in private browsing.
Well, too bad, because that's exactly what the solution should be.
Repeat after me: never fuck with spec implementation. If you don't like writing to a spec, write other types of software.
Let the ecosystem (website owners) face consequences of their own actions. It is better to blacklist bad actors then filling your software with bugs.
Which parts of a datagrid should a browser provide? I'm familiar with AG Grid [1] and the API surface is enormous. Aligning browsers on a feature set would be challenging.
Maybe there's a core set of functionality, like Flutter's GridView or QML https://doc.qt.io/qt-6/qml-qtquick-gridview.html.
https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-...
Pagination could be argued as well, but at least that's simple-ish to implement (but still, it's such a common UI pattern that it ought to be handled in a unified way by browsers IMO)
If it has to take decades to agree on a design for a stylable select box, then there is something fundamentally broken with the approach.
While maybe you could imagine a straightforward technical implementation (and I think you’re overlooking the complexity of getting the API right while making it extensible), the social engineering involved to make this happen would be Herculean. And it would be for an element that’s on less than 1% of web pages. If you really want a data grid, I’d suggest learning how to code one. It’s a fun challenge, and implementing basic features like sorting and filtering isn’t difficult using a modern framework. If it is difficult for you, then I’d suggest that it would be a GREAT experience to try. Then imagine how you’d make it extensible for unknown use cases.
The main reason it took decades for a stylable select box is because for two decades, we were just told “Don’t style select boxes. It’s bad for usability,” which was a mistake. We’ve only started to overcome that mindset in the past few years. The work on stylable select boxes only started in the past few years.
There's a difference between design-by-committee, and approval by committee. I'm arguing against the former. This is not to say that I have much hope that my approach will prevail, but it is an indictment of the W3C/WHATWG that they have not figured out a better process for producing technically excellent and coherent designs/specs in reasonable time.
Just invite submissions from small teams that each have produced a coherent design, and then the hard process of agreeing/voting on them will be a bit easier.
> If you really want a data grid, I’d suggest learning how to code one.
I have designed and implemented highly sophisticated data grids, and I have published related libraries on NPM. I wonder what in my comments makes you think I lack the competence or experience to implement one.
The problem is the JS bloat that we have to deal with. It is ugly that we have to load megabytes of JS to render any reasonably sophisticated web UI. Multiply that by the millions of sites that have to do that, plus all the upstream dependencies that are loaded with that, and also consider all the security/privacy issues with so much JS, and hopefully you'll begin to understand the critical need for a revamp of the HTML space.
A good spec really only needs clear principles. At a minimum, it should clearly explain what it does do, and also clearly explain what it does not do.
You don't need to have every edge case covered to build an API for datagrids. iOS has had native DataGrids for ages, Windows, macOS, Android. They all have this stuff built in. Other platforms have figured out how to provide these API surfaces.
Why does the web have to be seen as a special unicorn that can't have good baseline components like these platforms?
That’s why the web is a special unicorn. It’s very different than those platforms. Web standards should be small and composable. They shouldn’t try to solve every problem. I get why you would want a data grid. Maybe in your work it’s a common pattern. But on the broader web and in all of the documents that are out there, it’s on a minute fraction of them. It’s simply not worth the effort. Too much effort, too little gain.
ECMAScript / JavaScript. It has evolved at a faster pace since the introduction of ES6, and we been getting new features every year for awhile now. Given the types of features they're willing to ship with the languag and that many of the same people working on the HTML spec work on ECMAScript, it seems 'niche' isn't an issue (simply look at how many features have been added specifically only for classes vs the amount that the language construct of class is actually used. Its tiny in usage, but they've added alot of class specific features)
Other notable examples include the C and C++ standards (there are differing vendor implementations depending on platform which while annoying are largely well known how to navigate). Linux operating systems - the amount of incompatibility between linux distros is shockingly small all things considered.
I'm sure there are others I'm not able to think of as well, but this isn't special to the web by any means.
(I say "for now" because who knows when the Chrome team will change their heuristic?)
Not all inputs are form-submission data.
For example a datalist-backed input to scroll to a specific page/chapter/section/subsection in a long document. You might populate the datalist with hundreds of entries so you don't have a long list of links that the user will have to scroll through in the sidebar. You can perform the scroll on the change event of the input.
That's a good UI for the user, instead of presenting a long list of links for the user to browse/search through, they simply have the input auto-suggest based on the populated datalist.
And they prohibit different browsers from the app store, so users don't even have a choice.
Nothing with customizable built-ins would give you what the original commenter asked for
It's an arms race of stupidity.
The W3C and WHATWG have their priorities mixed up.
That's called <table>.
A lot of stuff becomes redundant under the framing that HTML is designed to provide semantics, not a user interface. How is a toggle button different from a checkbox? How are tabs different from <details>, where you can give multiple <details> tags the same name to ensure only one can be expanded at a time?
Image manipulation is totally out of scope for HTML. <input type="file"> has an attribute to limit the available choices by MIME type. Should there be special attributes for the "image" MIME type to enforce a specific resolution/aspect ratio? Can we expect every user agent to help you resize/crop to the restrictions? Surely, some of them will simply forbid the user from selecting the file. So of course, devs would favor the better user experience of accepting any image, and then providing a crop tool after the fact.
Data grid does seem like a weak spot for HTML, because there are no attributes to tell the user agent if a <table> should be possible to sort, filter, paginate, etc. It's definitely feasible for a user agent to support those operations without having to modify the DOM. (And yes, I think those attributes are the job of HTML, because not every table makes sense to sort/filter, such as tables where the context of the data is dependent on it being displayed in order.)
Generalized rant below:
Yes, there are pain points based on the user interfaces people want to build. But if we remember that a) HTML is a semantic language, not a UI language; and b) not every user agent is a visual Web browser with point-and-click controls, then the solution to some of these headaches becomes a lot less obvious. HTML is not built for the common denominator of UI; it's built to make the Web possible to navigate with nothing but a screen reader, a next/previous button, and a select/confirm button. If the baseline spec for the Web deviates from that goal, then we no longer have a Web that's as free and open as we like to think it is.
That may be incredibly obvious to the many Web devs (who are much more qualified than me) reading this, but it's not something any end user understands, unless they're forced to understand it through their use of assistive technology. But how about aspiring Web devs? Do they learn these important principles when looking up React tutorials to build some application? Probably not—they're going to hate "dealing with" HTML because it's not streamlined for their specific purpose. I'm not saying the commenter I'm replying to is part of that group (again, they're probably way more experienced than me), but it reminded me that I want to make these points to those who aren't educated on the subject matter.
14 years have been wasted on making web components happen, and they still offer... nothing really, and people already advise to skip large portions of their specs (Shadow DOM) even if you adopt them.
Imagine if the literally millions of dollars spent of them were spent on something like https://open-ui.org/ (started by Microsoft of all companies and now also completely overrun by Googlers)
Ah ! Yes, that's basically me.
https://schepp.dev/posts/today-the-trident-era-ends/#data-gr...
The best we'll get is little improvements like this which everyone will ignore because ChatGPT will recommend some react component instead.
Imagine a world where instead of letting IE die, microsoft decided to add a <XLS> tag in the early 2000. The most used nocode database in the world directly in the browser. In 2000.
You could embed any native code and it would just be a small yes/no dialog to download and run it.
Where is the native HTML datagrid (that supports sorting, filtering, paging, downloading, row/column freezing, column resizing and re-ordering)?
Where are the native HTML Tabs control? Image selector, resizer/cropper, and uploader? Toggle button? etc.
We can't even get text input to respect autocomplete directives properly. On the major browsers, giving your user id and password inputs nonsensical names seems to be required, along with numerous other hacks, to ensure that when a user is registering, the form is not auto-completed with saved passwords.
HTML is really holding us back right now.