New web platform features that help you save
A presentation at performance.sync() in in Amsterdam, Netherlands by Hidde de Vries
Photo: Printed receipt by Marco Verch under Creative Commons 2.0 New web platform features that help you save HIDDE DE VRIES PERFORMANCE.SYNC() NOVEMBER 2024
✕
~ 43 kB ~ 53 kB ~ 89 kB ~ 54 kB
What’s built into the browser, is not in your bundle
At OpenUI, we’re making it easier to style built-in components / controls
i Th user accessibility user experience developer experience
i Th user accessibility user experience developer experience your bundle size?
popover Floating piece of UI with supplemental or contextual content “non-modal dialog” “transient content” html.spec.whatwg.org/dev/popover.html#the-popover-attribute
popover Adds behaviour to an element
<div popover>… </div>
popover Adds behaviour to any element light dismiss keyboard auto-closure of other popovers top layer presence
popover Adds behaviour to an element
<div popover>… </div>
popover Adds behaviour to an element
<div popover>… </div> <button>Toggle popover</ button>
popover Adds behaviour to an element
<div popover id=x>… </div> <button popovertarget=x> Toggle popover</button>
popover support “Partial support” (all, but there’s a bug in iOS)
How s th s d fferent from d alogs and overlays? hidde.blog/dialog-modal-popover-differences What access b l ty s bu lt nto browsers for th s? hidde.blog/popover-accessibility Wh ch role to use popover w th when? hidde.blog/popover-semantics i i i i i i i i i i i i i i i How to pos t on them hidde.blog/positioning-anchored-popovers
What’s built into the browser, is not in your bundle
accord 1. Tell the truth. 2. Act now Governments must act now to halt biodiversity loss and reduce greenhouse gas emissions to net zero by 2025. 3. Go beyond pol t cs i i i html.spec.whatwg.org/dev/interactive-elements.html#attr-details-name
accord 1. Tell the truth. 2. Act now Governments must act now to halt biodiversity loss and reduce greenhouse gas emissions to net zero by 2025. i i i 3. Go beyond pol t cs
<details> <summary>Tell the truth</summary> … </details> <details open> <summary>Act now</summary> … </details> <details> <summary>Go beyond policy</summary> … </details>
exclus 1. Tell the truth. 2. Act now Governments must act now to halt biodiversity loss and reduce greenhouse gas emissions to net zero by 2025. i i i 3. Go beyond pol t cs
<details name=”xr”> <summary>Tell the truth</summary> … </details> <details open name=”xr”> <summary>Act now</summary> … </details> <details name=”xr”> <summary>Go beyond policy</summary> … </details>
i exclus “Newly available”
What’s built into the browser, is not in your bundle
i custom
i T T <select aria-label=”What do you…”> <option>Make a choice</option> <option>Use tech longer</option> <option>Avoid flights</option> <option>Install solar</option> <option>Buy local</option> open-ui.org/components/customizableselect </select> H ML select, ::picker(select) { /* appearance: base-select; */ } CSS custom
i T <select aria-label=”What do you…”> <option>Make a choice</option> <option>Use tech longer</option> <option>Avoid flights</option> <option>Install solar</option> <option>Buy local</option> </select> H ML select, ::picker(select) { appearance: base-select; } CSS custom
i T <select aria-label=”What do you…”> <option>Make a choice</option> <option>Use tech longer</option> <option>Avoid flights</option> <option>Install solar</option> <option>Buy local</option> </select> H ML select, ::picker(select) { appearance: base-select; } CSS custom
i custom
i custom (examples from Una Kravets and others)
custom Prototype in Chromium, with flag “Experimental Web Platform Features” i ) s n o g a r d e b e r (he
What’s built into the browser, is not in your bundle
h i i Mastodon @hdv@front-end.soc i T Slides + links are liv e on Bluesky h dde.blog
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Open UI homepage
-
Open UI: customisable select
-
Popover in the HTML spec
-
Popover blog post: how is it different from dialogs and overlays?
-
Popover blog post: what does the browser do ‘automatically’ in terms of accessibility?
-
Popover blog post: you need to bring your own role. Which to use when?
-
Popover blog post: what’s the deal with positioning them?
-
GitHub issue: [css-ui] UA stylesheet for appearance:base <select> #10857
Chime in with thoughts re the UA stylesheet rules for customisable select.
