Styling selects? You’ve got options!
A presentation at CSS Day meets CSS Café in in Amsterdam, Netherlands by Hidde de Vries
@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)
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Accent color example
-
Portable Text <selectmenu> example
Demo of selectmenu (tested in Chromium Canary 104)
-
Portable Text <selectmenu> example with custom button
Demo of selectmenu (tested in Chromium Canary 104)
Buzz and feedback
Here’s what was said about this presentation on social media.
