@hdv styling selects? You’ve got options! Hidde de Vries CSS Day <-> CSS Café Amsterdam, 11 June 2022

@hdv Hi, I’m Hidde and I love CSS. developer relations + accessibility specialist sanity.io hidde.blog @hdv

@hdv Image copyright: CERN (Rao, Achintya)・ https://cds.cern.ch/images/CERN-HOMEWEB-PHO-2019-004-1

@hdv The early web was (obviously) a game changer, but with CSS it could reach an even wider audience

@hdv e-learning doctor shopping travel banking photoshop

@hdv personalsit.es

@hdv styles are hints Browser, developer, user

@hdv styles are hints Browser, developer, user October, 1994 Cascading HTML style sheets — a proposal (https://www.w3.org/People/howcome/p/cascade.html)

@hdv styles are hints Browser, developer, user 30% h1.font.family = times 40% font.family = times h1.font.family = helvetica 100% October, 1994 Cascading HTML style sheets — a proposal (https://www.w3.org/People/howcome/p/cascade.html)

@hdv “I’m intrigued by the e fects of the cascading e fects. (…) As I’m experimenting I noticed that by mixing di ferent stylesheets, it’s very easy to have the styles clashing in a bad way.” — Pei Wei, in response to proposal; f f f Cascading HTML style sheets — a proposal (https://www.w3.org/People/howcome/p/cascade.html)

@hdv Sometimes the browser knows better

@hdv sometimes the browser doesn’t have the ui we want

@hdv “We hope to make it unnecessary to reinvent built-in UI controls” — OpenUI homepage

@hdv Standardised controls can be a huge opportunity for accessibility

@hdv

@hdv Standardised controls can be a huge opportunity for accessibility (if accessibility considerations are met)

@hdv accent-color

@hdv Sometimes the need is theming

@hdv

accent-color browser support @hdv

EX PE R IM EN TA L @hdv <selectmenu>

@hdv developers on <select> Hard to build “search in list” UI Can’t customise popup window — 27.43% of respondents — 11.36% of respondents (desktop) Can’t style <option> Need to insert arbitrary HTML Can’t style default state — 17.85% of respondents — 7.82% of respondents — 14.01% of respondents Greg Whitworth, Can we please style the <select> control?!・ https://www.gwhitworth.com/posts/2019/can-we-please-style-select/

// regular select <select> <option>Tabs</option> <option>Spaces</option> Firefox

<option>A mix of both</option> </select> Edge

<selectmenu> <option>Tabs</option> <option>Spaces</option> <option>A mix of both</option> </select> Example from FAST UI・ https://explore.fast.design/components/fast-select L TA EN IM R PE EX // introducing… <selectmenu>

Example from FAST UI・ https://explore.fast.design/components/fast-select L TA EN IM R PE EX selectmenu::part(button) { background-color: #f00; border-radius: 5px; }

selectmenu::part(listbox) { padding: 10px; margin-top: 5px; } Example from FAST UI・ https://explore.fast.design/components/fast-select L TA EN IM R PE EX selectmenu::part(button) { background-color: #f00; border-radius: 5px; }

selectmenu::part(listbox) { padding: 10px; margin-top: 5px; } selectmenu::part(selected-value) { padding: 10px; margin-top: 5px; } Example from FAST UI・ https://explore.fast.design/components/fast-select L TA EN IM R PE EX selectmenu::part(button) { background-color: #f00; border-radius: 5px; }

@hdv

@hdv

L TA EN IM R PE EX <selectmenu> browser support Experimental, behind lags, known accessibility issues about: lags, “Experimental Web Features” f f @hdv

@hdv thankS for listening! Contact/resources talks.hiddedevries.nl @hdv or hidde@sanity.io Typefaces Bungee by David Jonathan Ross (DJR) Rasa by Anna Giedryś, David Březina (Rosetta)