10 ms·
Customizable HTML Select
- ge96 2y agoYeah now if they can go ahead and make ThreeJS line thickness be more than 1 that'd be greeattttt.... edit: this is a joke about "OpenGL Core Profile with the WebGL renderer" which I'm not sure if Chrome (browser) would be responsible for
- kreetx 2y agoI think you need to expand on the edit even more for this to make sense.
- ge96 2y agoI think this change seems funny to me how late it is, front-enders at this point are used to making their own customizable drop downs. But standardization is nice I suppose. And the cross browser support thing.
- hnuser123456 2y agohttps://threejs.org/docs/index.html#api/en/materials/LineBasicMaterial https://threejs.org/docs/index.html#api/en/materials/LineBas... const material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 1, linecap: 'round', //ignored by WebGLRenderer linejoin: 'round' //ignored by WebGLRenderer } );
- ge96 2y agoyeah it says on that page "Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value." anyway yeah I was trying to be snide
- hnuser123456 2y agoAh, I see. Seems like there's a bunch of 2D cruft in the graphics hardware that hasn't been touched since 3D became possible.
- no_wizard 2y agoThey been talking about this for a long time. In fact, I remember at some point, they were trying to sell the idea of exposing all the form inputs to use the `::part` API, since under the hood form inputs share the same general logic of custom elements, If I recall correctly. From the looks of it, didn't work out that way though. And I think its for the best. I like this proposal more, even though delivering the `::part` API to everyone (not just web component users) would have likely been faster
- spankalee 2y agoUsing ::part() was a bad idea. Part is for user-defined pseudo elements. The platform can just define real pseudo elements. I argued against using `::part()` in spec threads, and I haven't looked back recently, but I think that argument won over.
- teddyh 2y agoNow, what’s the <https://caniuse.com/ https://caniuse.com/> link to this feature?
- InsideOutSanta 2y agoI think it might be this one? https://caniuse.com/selectlist https://caniuse.com/selectlist The blog post says that "we're excited to see this feature progress through working groups and standards bodies" but doesn't link to anything that would help figure out which standard this ostensibly implements.
- matt_kantor 2y agoIn the first paragraph of the article there's a link to the relevant WHATWG issue[0] (they could have used better link text though; of all people Google employees should be cognizant of link accessibility). [0]: https://github.com/whatwg/html/issues/9799 https://github.com/whatwg/html/issues/9799
- rjmorris 2y agoThis is specifically not selectlist. "Previously, the Chrome team was working on the idea of a selectlist element. What's described in this post is that feature redesigned to reuse the existing select element instead."
- jchw 2y agoIt's a bit early for browser support given that it's not usable in Chrome. A better place to look for information about the status is probably here: https://chromestatus.com/feature/5737365999976448 https://chromestatus.com/feature/5737365999976448
- Sateeshm 2y agoWhat's the point of Chrome-only css.
- bitpush 2y ago[flagged]
- LordDragonfang 2y agohttps://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html > Please don't comment on whether someone read an article. "Did you even read the article? It mentions that" can be shortened to "The article mentions that".
- err4nt 2y agoThe point of Chrome-only CSS (vendor-prefixed features) would be to allow Chrome or any other vendor to expose styling functionality to CSS authors in valid CSS syntax in ways that won't impede future standardization efforts (like writing non-standard CSS would do) or interfere with that same CSS being processed by other vendors. But this article isn't an example of Chrome-only CSS, this is about a change to the standard select element to make it customizeable in a standard way. It's not fully frozen yet, so they're seeking feedback and still working on it, so if you have input to give about this feature I think they'd welcome it. This blog post was about Chrome introducing experimental support for it, likely so developers can experiment with it and provide more valuable feedback towards its standardization!
- zb3 2y agoSo websites "look better in Chrome", that's what Google wants.. but it's ultimately not good for us, so I hope developers don't fall for this..
- bitpush 2y agoWhy dont you read the article and see for yourself. > A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype for you to test out from Chrome Canary 130.
- endemic 2y agoIf this will stop the proliferation of terrible JavaScript implementations of <select>, I'm here for it.
- drivingmenuts 2y agoI salute your optimism. Really, this just gives developers more options to make designers lives more miserable, and vice-versa.
- layer8 2y agoMy thought was it is giving designers more options to make users’ lives more miserable.
- jimbob45 2y agoThere’s got to be a happy medium between using canvas to make the controls you actually want and browser-provided one-size-fits-nobody controls. I really thought MS was onto something with Silverlight’s with XAML but that died.
- jjcm 2y agoI know LoC is a terrible metric, but it always shocks me that things like react-select require 30k LoC. 21% the size of the code of the Apollo Lander to configure/style a select dropdown.
- streptomycin 2y agoreact-select does a lot more than style the select though, so even after this new standard for customizable selects is supported everywhere, react-select will still have about the same level of complexity as it does now.
- riwsky 2y agoBut does it get even 21% of the way to landing on the moon?
- deanc 2y agoI've been doing front-end since the days of IE5 and I'd be rich if I had a penny for every time I've had to do a custom "select". It's a pain to use third-party libraries for this, but it _is_ a solved problem and doesn't require that much extra code.
- crab_galaxy 2y agoYeah the problem is when you need to create a custom select without using a 3rd party library, and you want to make sure the interactions are accessible and up to parity with native selects. Then you have to add tons of event handlers, aria attributes, refs for handling outside clicks, etc etc.
- hassleblad23 2y agoI think we should welcome all efforts to have a standardized, modern select component in the HTML spec. Would save a lot of trouble.
- deanc 2y agoWe have one and have had one for years. It uses the OS's default design, which is familiar to users. Instead, we have had decades of people hacking together whatever is the trend of the day into a custom designed select-box, often providing poor accessibility and usability. The absolute worst offender of these has to be on mobile where iOS has its native control and many designs implement custom select's which don't trigger that.
- bmk44 2y agoEven with an average software engineer compensation, you probably got paid a lot more than a penny for every custom "select" you implemented :)
- mopsi 2y agoWhich libraries have solved this problem? I recently tried several of the most recommended standalone JS libraries for implementing a <select> with icons and a custom layout, but each single one of them was seriously lacking in some way.
- rado 2y agoYes please, like everybody else I had to make a custom one https://radogado.github.io/n-select/ https://radogado.github.io/n-select/ and will be happy to move to a rich standard
- threatofrain 2y agoI love the way the menus reveal themselves in-place, very nice touch.
- Pesthuf 2y agoI don’t really see if there’s now an option to further improve the select with JavaScript to add, for example, a search textbox for filtering. And what about the nearly unusable (on desktop) <select multiple>?
- LordShredda 2y agoHow about the literally unusable <select multiple> on mobile? You can't select more than one option on a touch screen...
- jacobsimon 2y agoSeems to work fine on iOS Safari and Chrome
- fiddlerwoaroof 2y agoI don’t understand the hatred for select multiple on desktop. It’s a list box that uses standard UI conventions that have been present for three or four decades now.
- TeMPOraL 2y agoThey're probably referring to it not being usable without keyboard, unlike regular select, or checkboxes, or anything else sans a text field. Specifically, to select elements one by one, you need to hold down Ctrl (on Windows; modifiers for other OSes are different). For better or worse, this element is not obvious for those who didn't grow up using desktop computers 10+ years ago.
- streptomycin 2y agoI use it in one place in my app, and even with me putting text right above it saying something like "ctrl+click to select multiple entries", I still periodically get emails from confused users. No idea what the actual % is, but it's gotta be some non-trivial fraction of people who just have no idea how to use that thing.
- deleted 2y ago[deleted]
- bityard 2y agoAh, customizable for web developers, not end users. (And yes, I'm still bitter about you all wrecking my scroll bars.)
- jagged-chisel 2y agoYou can override styling with user stylesheets. On desktop. Need the same for i{,Pad}OS.
- macNchz 2y agoThere are some iOS apps that work as Safari extensions and enable Greasemonkey scripts. I use one called Userscripts.
- zzo38computer 2y agoI think that CSS is excessive, that I often disable it and that the excessive design means that sometimes the way to fix it is to add more stuff, which just makes it more messy. (In many cases, it would be helpful to put things that only the end user controls and that document author does not control. Yet, they don't really design them for that very well.)
- bushido 2y agoThis is a very good start, I don't think it'll replace a lot of the custom code/comboboxes that are seen in react-land without search (unless I missed it).
- sharlos201068 2y agoMaybe, but adding search to this element is still a lot easier than a fully custom one.
- prmph 2y agoSo after decades of developer pain, all we're getting is a better select? 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.
- sa46 2y ago> Where is the native HTML datagrid 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://doc.qt.io/qt-6/qml-qtquick-gridview.html. [1]: https://www.ag-grid.com/ https://www.ag-grid.com/
- crab_galaxy 2y agoThe simplest would be to follow the aria role=“grid” spec, ideally with sortable columns. IMO it doesn’t need the kitchen sink AG Grid approach just a sane way to semantically build a data grid with proper accessibility. https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/ https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-...
- dimal 2y agoIt has to handle every possible use case for a grid. You’re thinking of your use case. The spec needs to handle everything else. I don’t see how that’s manageable.
- sensanaty 2y agoAt minimum filtering and sorting should be handled by the browser, including async for both of those. 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)
- paul_h 2y agoI've been griping about html's select for some tome - https://paulhammant.com/2013/01/31/appdev-glass-ceiling-revisited/ https://paulhammant.com/2013/01/31/appdev-glass-ceiling-revi... - great news
- akersten 2y ago- Why is picker a function like `::picker(select)`, and not a CSS pseudo class like `::before` to select the `select`'s `picker` component? I.e., `select::picker` makes a lot more sense to me. - What about multi-choice (`multiple` attribute) `select`s?
- smarkov 2y agoBecause it's been trendy to introduce a new unintuitive syntax with every new CSS feature. I am genuinely afraid for the future of CSS as it is becoming increasingly more complex, meanwhile most people haven't been able to properly utilize or understand it for the last decade even without all of that additional complexity.
- gnuly 2y ago[dead]
- deleted 2y ago[deleted]
- mary-ext 2y agoI'm hoping that the documentation around this will be good, I've recently tried out CSS anchor positioning and it's riddled with examples that no longer work as the specification has been changed various times
- mattlondon 2y agoI worry this will lead to a bad user experience if android et al does not support it natively. You'll have people saying "select the green option in the drop-down list to do <foo>" and people on mobile will just get the native-ui list with no styling.
- CafeRacer 2y agoI spent days building this little perfect dropdown select thing, that is a hundreds lines of code and even more docs explaining what the hell is going on. Someone wasted the same amount of time before me. Someone else spent a lot of time before them. And so on. I wish we have had more browser native implementations including some notion of virtual lists so the browser would not choke when rendering a lot of content. --- Eventually, this would be same as border-radius. It will get implemented and we'll forget about that forever.
- nine_k 2y agoI thought the promise of Web Components was also about this: make a control once, make it styleable, let everyone reuse it. I wonder why is this not happening widely.
- troupo 2y agoBecause web components themselves break even in the expected situations? And need 20+ new spec to make them work? And because they are neither low level enough nor high level enough to be useful for the use case you described?
- bastawhiz 2y agoIt's not surprising, really: web components suck for having highly-customizable inputs. 1. You get HTML attributes to pass data in, or JavaScript properties. If you're in React, you'd just use a React component and skip web components. If you're in vanilla HTML, you can't just write HTML, you have to build the component with the DOM. 2. There's no real standard to making web components look the way you want them to. You can't just use CSS (you have to have the shadow root "adopt" the styles). Your point of "make it styleable" is actually one of web components' biggest weaknesses (IMO). 3. Web components are globally registered. React/Vue/Svelte/etc. components are objects that you use. You end up with a mess of making sure you registered all of the components you want before you use them (and not registering the ones you don't use) and hope no two packages you like use the same name.
- 2y ago
- notatoad 2y agothis is a huge win for accessability. i've re-implemented select in worse and less-accessible ways many times to satisfy some business demand. i'm very excited if this means i don't have to keep doing that.
- rererereferred 2y agoNeat. Can I put an input inside the select so I can filter options?
- rroose 2y agoI would like to know this as well.
- lelanthran 2y ago> Neat. Can I put an input inside the select so I can filter options? How will input-inside-select be better than a datalist? (Genuinely curious, not being facetious)
- rererereferred 2y agoAn input + datalist still let you type whatever you want. What I want is a select with a finite list of options, but filterable so the user doesn't have to search manually. Specially necessary when you have lots of items and the sorting is not alphabetical. The select also differentiates between the value and the presentation text. With an input you would have to use the text to find the value in your db or put the value in a hidden input in the front end.
- kirugan 2y agoHTML is getting complex every day
- ashu1461 2y agoWonder what is the point of this, all these functionalities are available in any third party libraries since ages.