@hdv styling selects? You’ve got options! Hidde de Vries CSS Day <-> CSS Café Amsterdam, 11 June 2022
Slide 1
Slide 2
@hdv Hi, I’m Hidde and I love CSS. developer relations + accessibility specialist sanity.io hidde.blog @hdv
Slide 3
@hdv Image copyright: CERN (Rao, Achintya)・ https://cds.cern.ch/images/CERN-HOMEWEB-PHO-2019-004-1
Slide 4
@hdv The early web was (obviously) a game changer, but with CSS it could reach an even wider audience
Slide 5
@hdv e-learning doctor shopping travel banking photoshop
Slide 6
@hdv personalsit.es
Slide 7
@hdv styles are hints Browser, developer, user
Slide 8
@hdv styles are hints Browser, developer, user October, 1994 Cascading HTML style sheets — a proposal (https://www.w3.org/People/howcome/p/cascade.html)
Slide 9
@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)
Slide 10
@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)
Slide 11
@hdv Sometimes the browser knows better
Slide 12
@hdv sometimes the browser doesn’t have the ui we want
Slide 13
@hdv “We hope to make it unnecessary to reinvent built-in UI controls” — OpenUI homepage
Slide 14
@hdv Standardised controls can be a huge opportunity for accessibility
Slide 15
@hdv
Slide 16
@hdv Standardised controls can be a huge opportunity for accessibility (if accessibility considerations are met)
Slide 17
@hdv accent-color
Slide 18
@hdv Sometimes the need is theming
Slide 19
@hdv
Slide 20
accent-color browser support @hdv
Slide 21
EX PE R IM EN TA L @hdv <selectmenu>
Slide 22
@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/
Slide 23
// regular select <select> <option>Tabs</option> <option>Spaces</option> Firefox
<option>A mix of both</option> </select> EdgeSlide 24
<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>
Slide 25
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; }
Slide 26
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; }
Slide 27
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; }
Slide 28
@hdv
Slide 29
@hdv
Slide 30
L TA EN IM R PE EX <selectmenu> browser support Experimental, behind lags, known accessibility issues about: lags, “Experimental Web Features” f f @hdv
Slide 31
@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)
