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
Slide 1
Slide 2
✕
Slide 3
~ 43 kB ~ 53 kB ~ 89 kB ~ 54 kB
Slide 4
What’s built into the browser, is not in your bundle
Slide 5
At OpenUI, we’re making it easier to style built-in components / controls
Slide 6
i Th user accessibility user experience developer experience
Slide 7
i Th user accessibility user experience developer experience your bundle size?
Slide 8
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
Slide 9
popover Adds behaviour to an element
<div popover>… </div>Slide 10
popover Adds behaviour to any element light dismiss keyboard auto-closure of other popovers top layer presence
Slide 11
popover Adds behaviour to an element
<div popover>… </div>Slide 12
popover Adds behaviour to an element
<div popover>… </div> <button>Toggle popover</ button>Slide 13
popover Adds behaviour to an element
<div popover id=x>… </div> <button popovertarget=x> Toggle popover</button>Slide 14
popover support “Partial support” (all, but there’s a bug in iOS)
Slide 15
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
Slide 16
What’s built into the browser, is not in your bundle
Slide 17
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
Slide 18
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>Slide 19
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>Slide 20
i exclus “Newly available”
Slide 21
What’s built into the browser, is not in your bundle
Slide 22
i custom
Slide 23
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
Slide 24
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
Slide 25
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
Slide 26
i custom
Slide 27
i custom (examples from Una Kravets and others)
Slide 28
custom Prototype in Chromium, with flag “Experimental Web Platform Features” i ) s n o g a r d e b e r (he
Slide 29
What’s built into the browser, is not in your bundle
Slide 30
h i i Mastodon @hdv@front-end.soc i T Slides + links are liv e on Bluesky h dde.blog
