Are there any existing UI related features (CSS, JS or HTML) that aren't available cross-browser (either not implemented or buggy) that you wish were? If so can you say which and explain the use cases?
Specifically looking at existing things rather than new things you want (though feel free to share those too).
E.g. focus({focusVisible}) or hidden=until-found
=> More informations about this toot | More toots from Lukew@toot.wales
@Lukew You'd probably want to clarify what “UI related” means; otherwise the list will start from style container queries and will never end :D
=> More informations about this toot | More toots from kizu@front-end.social
@Lukew Import Attributes at large may not be a UI related feature, but in that they unlock with { type: 'css' } a feature that both #Mozilla and #WebKit have outlined that they are open to shipping, I'd say that was a BIG ONE that could serve so many use cases.
import style from './styles.css' with { type: 'css' };With this a UI component that benefits from JS (read the majority of non-trivial patterns) can also deliver any CSS that it needs right inline with its usage.
=> More informations about this toot | More toots from westbrook@mastodon.social
@Lukew Wider implementation of this would open the door to more expansive and nuanced conversation around the @sheet marker in CSS. This allows multiple sheets to be "bundled" within a single CSS file. This feature will benefit not just from wider conversation at the browser level but a combined effort between browser and tooling implementors as it will mark a new level of CSS componentization that will unlock hitherto unthought of use cases in the UI.
=> More informations about this toot | More toots from westbrook@mastodon.social
@Lukew Overflow anchor! https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
With chat-like UIs being all the rage, this tiny bit of CSS saves you a bunch of JS...BUT, it's not available in #WebKit 😖
=> More informations about this toot | More toots from westbrook@mastodon.social
@Lukew install prompt for PWA
=> More informations about this toot | More toots from alfonsoml@mastodon.social
@Lukew Scroll Timeline: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline
Because hot hot animations that need less JS are the best!
I've got 2 or 3 active reasons to use this that I'm remiss to invest in while I need to develop a corresponding solution via JS for #WebKit and #Mozilla. One focusing on a more advanced image viewer and another on some fancy, fancy marketing page designs.
=> More informations about this toot | More toots from westbrook@mastodon.social
@Lukew Since you asked, I really wish that native html form elements (eg selects, date pickers) could have basic styles applied to them so that they would look and work consistently across browsers. Safari's date picker puts the current time as a placeholder in a date picker without any context. Then applies a horrible blue colour for the digits. Selects have a weird 90s style gradient. Styling the inputs to look consistent with the rest of our UI (and ensuring that the UI has sufficient contrast for accessibility) requires ugly safari hacks.
=> View attached media | View attached media
=> More informations about this toot | More toots from philpicton@hachyderm.io
@philpicton good news on the select front, Chrome has an intent to ship out for customisable select! This has been a long time in the making and has had active discussion in OpenUI CG and both the whatwg and the csswg, so I'm hopeful we've got cross browser consensus and the others will fast follow with an implementation.
=> More informations about this toot | More toots from Lukew@toot.wales
@Lukew that is good news! tho we'll still need to support "old" safari as well. 😭
=> More informations about this toot | More toots from philpicton@hachyderm.io
@philpicton ultimately I think the graceful degradation for older browsers could just be default browser styling. That's one of the nice parts about the design, because it's a CSS opt-in and using the same element you have a progressive enhancement story.
=> More informations about this toot | More toots from Lukew@toot.wales
@philpicton as for styling of other form controls it's definitely on the to-do list and hopefully once customisable select is finished we can move attention elsewhere. Lots of the challenges we solve with select (such as the opt-in) we can apply elsewhere, which should help speed things up. Input not allowing children does present issues but I'm sure we'll work something out.
=> More informations about this toot | More toots from Lukew@toot.wales
@Lukew Another important but picky point. It's important that the quality of the implementation is good. Too many safari compliance features, such as those related to scrolling, are poorly implemented/buggy. So why they 'exist' on the chart, they are still making devs crazy.
=> More informations about this toot | More toots from scottjenson@social.coop
@scottjenson yeah definitely, and for example popover light dismiss not working on iOS for ages comes to mind, thankfully that's now fixed. It's by no means just WebKit but that's the example I have off the top of my head.
=> More informations about this toot | More toots from Lukew@toot.wales
@Lukew Could I interest you in some graphics work? https://bugzilla.mozilla.org/show_bug.cgi?id=1943799
=> More informations about this toot | More toots from cryptosorcerer@infosec.exchange
@cryptosorcerer oh man I've had issues with colour profiles across browsers being different before... I seem to recall firefox was correct in that case though. Interesting that it seems to be wrong here.
As for whether you can interest me specifically unfortunately no. 😅 My graphics understanding is very minimal.
=> More informations about this toot | More toots from Lukew@toot.wales
@Lukew
Existing things:
New things:
=> More informations about this toot | More toots from Olliew@indieweb.social
@Olliew ::marker works for details in Safari tech Preview fwiw! I assume that's what you meant for that.
=> More informations about this toot | More toots from Lukew@toot.wales
@Lukew ::marker doesn't support "content" in Safari so the only thing you can change about the disclosure triangle of a details element is its color.
https://bugs.webkit.org/show_bug.cgi?id=204163
=> More informations about this toot | More toots from Olliew@indieweb.social
@Olliew ahh okay so it's progress but not fully there yet. Good to know!
=> More informations about this toot | More toots from Lukew@toot.wales
@Lukew multi-page view transitions, because it's just a giant cheat code for the whole web, and I can't wait for everyone to be able to use it.
=> More informations about this toot | More toots from patrickbrosset@mas.to
@Lukew Absolutely at the very top of the list: customisable built-in elements. That is: custom elements via the is="[nodeName]" attribution. Safari STILL does not support this. It would be massive for accessibility and general convenience.
=> More informations about this toot | More toots from heydon@front-end.social
@heydon I don't think their position on that is ever changing, and I'm honestly not sure they're wrong with some of their concerns (it's been a while since I read up on it though). Hopefully the new proposal related for custom attributes might unblock some of these use cases in a way that WebKit can be supportive of. I think https://github.com/WICG/webcomponents/issues/1029 this is the latest on that proposal.
=> More informations about this toot | More toots from Lukew@toot.wales
@Lukew foreignObject support in SVG, cross-browser/OS installPrompt support, custom title bars for installed PWAs, everything that works in other browsers but not in Safari. Oh, and anchor positioning.
And new features that don’t exist yet: scheduling push notifications on-device, a secure way to store secrets, accessing spell-checker suggestions, styleable context menus, easing and timing control for scroll-behavior and scroll-snapping…
It’s a lot. 🤣😅
=> More informations about this toot | More toots from amxmln@mastodon.design
@Lukew container style queries
https://front-end.social/@mayank/113733968409667132
=> More informations about this toot | More toots from mayank@front-end.social
@Lukew pop up window position and size not being retrievable across multiple monitors. Most browsers give different results normally, but when pop up is on a different browser to main window then some cap the values to the main window
=> More informations about this toot | More toots from coderanger@dotnet.social
@Lukew I guess it's not specifically UI but the lack of navigation API outside Chromium is a blocker for my cross-document view transition project. I need access to the navigation.activation object in the pagereveal event.
=> More informations about this toot | More toots from Jbasoo@mastodon.social This content has been proxied by September (3851b).Proxy Information
text/gemini