Samuel Plumppu
@Greenheart@fosstodon.org  路  activity timestamp 5 days ago

Wow! You know that #Web#Tech is getting really good when you are able to replace significant amounts of #JavaScript with a few lines of #HTML and #CSS. Best part is the fact that you get #a11y out of the box with native widgets 馃檶

A few examples: <dialog closedby="any">, stylable <select> and even HTML autocomplete/typeahead using the <datalist>.

#WebDev#UseThePlatform
Bill Zaumen
@bzdev@fosstodon.org replied  路  activity timestamp 5 days ago
@Greenheart I generally try to use CSS, minimizing the use of Javascript, but have found cases where I needed it (possibly due to a firefox or CSS bug, but possibly one of mine that I didn't find): the issue was resizing an IFRAME. It was supposed to be a specific
fraction of the window size but for some reason would not resize if the user resized
the window. Since I couldn't get CSS to handle it, I did it using Javascript (only a few
lines of it).
Curtis Wilcox
@cwilcox808@c.im replied  路  activity timestamp 5 days ago
@Greenheart
Hopefully eventually. For those examples, `closedby` isn't supported by Safari (there's a good-looking polyfill though). Styleable <select> is Chromium only for now and most people won't accept a browser native one. There are still implementation issues with <datalist> especially on Android.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select

https://adrianroselli.com/2023/06/under-engineered-comboboxen.html#TLDR
Curtis Wilcox
@cwilcox808@c.im replied  路  activity timestamp 5 days ago
@Greenheart
Invoker commands are another up-and-comer. It's Chromium only but there's a good polyfill and the other browsers are actively working on it; Firefox should have it in a couple of months and it's hard to say when Safari will have it but in 2025 is a possibility.

https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API
Samuel Plumppu
@Greenheart@fosstodon.org replied  路  activity timestamp 5 days ago
@cwilcox808 And even for iOS, it seems like the datalist should work for the modern web engine WKWebView but not for the older UIWebView. However, since these render within native apps, it probably won't be relevant unless using the datalist within an native or hybrid IOS app.

So for my use case, it seems basically all browsers are supported.

Unless, of course there are obvious bugs in some browser. Do you know any specific bugs for the datalist? :)