New web platform features that help you save

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

popover Adds behaviour to any element light dismiss keyboard auto-closure of other popovers top layer presence

popover Adds behaviour to an element

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 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