Standardizing <select>: What the future holds for HTML Controls

A presentation at FrontCon in August 2020 in Riga, Latvia by Stephanie Stimac

Slide 1

Slide 1

Standardizing <select>: What the future holds for HTML Controls FrontCon 2020

Slide 2

Slide 2

Hi! I’m Stephanie. Program Manager for Microsoft Edge Developer Experiences @seaotta

Slide 3

Slide 3

Hi! I’m Stephanie. Designer Front-end developer Dev and Designer Advocate @seaotta

Slide 4

Slide 4

Designer Developer

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Mock up Production Site

Slide 11

Slide 11

Slide 12

Slide 12

HTML Controls

Slide 13

Slide 13

Standardizing <select> The Past: why HTML Controls are the way they are The Present: where we’re at now The Future: what’s to come with HTML Controls (select!)

Slide 14

Slide 14

Some History HTML Form Controls

Slide 15

Slide 15

1995

Slide 16

Slide 16

1995

Slide 17

Slide 17

1995

Slide 18

Slide 18

1995

Slide 19

Slide 19

Pre1995

<HTML> 1.0

Slide 20

Slide 20

Pre1995

<HTML> 🚫 1.0

Slide 21

Slide 21

The primary focus of the specification draft was to capture common HTML practice in web browsers as of June 1994. http://www.blooberry.com/indexdot/history/html20.html

Slide 22

Slide 22

Web Browsers 1991-1994 WorldWideWeb (Nexus) ViolaWWW Erwise MidasWWW MacWWW Mosaic Wikipedia Cello Lynx 2.0 Arena AMosaic 1.0 IBM WebExplorer Netscape Navigator SlipKnot 1.0 MacWeb Ibrowse Agora (Argo) Minuet

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

1995

Slide 26

Slide 26

1995

Slide 27

Slide 27

1995

Slide 28

Slide 28

CSS IS AWESOME

Slide 29

Slide 29

1997 CSS IS AWESOME

Slide 30

Slide 30

1999

<HTML> 4.01 ❤ CSS IS AWESOME

Slide 31

Slide 31

1995

Slide 32

Slide 32

https://www.456bereastreet.com/archive/200409/styling_form_controls/

Slide 33

Slide 33

.form { -webkit-appearance: value; -moz-appearance: value; appearance: value; }

Slide 34

Slide 34

Slide 35

Slide 35

Recap Pre-1995: Lots of browsers pop up 1994: HTML 1.0 draft expires 1995: HTML 2.0 becomes standardized spec Basic HTML form controls standardized No standard for styling Operating system dependency 1999: CSS Supported by HTML 4.01 embraced by more browsers

Slide 36

Slide 36

1999 – present

Slide 37

Slide 37

The Current State of Styling Native Controls

Slide 38

Slide 38

It’s not bad…

Slide 39

Slide 39

But it’s not great either.

Slide 40

Slide 40

Feasibility of Styling Form Controls with CSS

Slide 41

Slide 41

Feasibility of Styling Form Controls with CSS Can be styled with few problems <form> <fieldset> <label> <output> Text-field (<input>) Buttons

Slide 42

Slide 42

Feasibility of Styling Form Controls with CSS Can be styled with few problems Can be styled with complex CSS and hacks

<form> <fieldset> <label> <output> Text-field (<input>) Buttons Checkboxes Radios <legend>

Slide 43

Slide 43

Feasibility of Styling Form Controls with CSS Can be styled with few problems Can be styled with complex CSS and hacks Good night and good luck.

<form> <fieldset> <label> <output> Text-field (<input>) Buttons Checkboxes Radios <legend> <select> <option> <optgroup> <datalist> <progress> <meter> Color picker Date controls Dropdown widgets Range File picker

Slide 44

Slide 44

Feasibility of Styling Form Controls with CSS Can be styled with few problems Can be styled with complex CSS and hacks Good night and good luck.

<form> <fieldset> <label> <output> Text-field (<input>) Buttons Checkboxes Radios <legend> <select> <option> <optgroup> <datalist> <progress> <meter> Color picker Date controls Dropdown widgets Range File picker

Slide 45

Slide 45

“CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.”

Slide 46

Slide 46

Browser Inconsistencies

Slide 47

Slide 47

Browser Inconsistencies Chrome EdgeHTML Firefox Safari

Slide 48

Slide 48

No extensibility

Slide 49

Slide 49

Slide 50

Slide 50

<video controls width=”1080”> </video>

Slide 51

Slide 51

<video controls width=”1080”> </video>

Slide 52

Slide 52

<video width=”1080”> </video>

Slide 53

Slide 53

Dribbble: Jordan Ranson

Slide 54

Slide 54

Dribbble: Mark Hendriks Dribbble: Seb kay

Slide 55

Slide 55

What do developers really want?

Slide 56

Slide 56

Do they really want better form controls?

Slide 57

Slide 57

Slide 58

Slide 58

Initial Research 1400 respondents

Slide 59

Slide 59

Initial Research: Demographics Full results: https://aka.ms/controls-survey

Slide 60

Slide 60

Initial Research: Demographics Full results: https://aka.ms/controls-survey

Slide 61

Slide 61

Top 10 Re-created Form Controls Full results: https://aka.ms/controls-survey

Slide 62

Slide 62

Reasons Controls Are Created Full results: https://aka.ms/controls-survey

Slide 63

Slide 63

JSConfEU Survey Which form control gives you the most frustration? Why?

Slide 64

Slide 64

JSConfEU Survey Which form control gives you the most frustration?

Slide 65

Slide 65

JSConfEU Survey Why?

Slide 66

Slide 66

“ Requires hacky tricks

Slide 67

Slide 67

“ Can’t style <option> elements at all to the extent we need to

Slide 68

Slide 68

“ …but the amount of work it takes to implement an accessible alternative with complete feature parity is massive.

Slide 69

Slide 69

How painful is it?

Slide 70

Slide 70

TM Important Research

Slide 71

Slide 71

🤬

Slide 72

Slide 72

Slide 73

Slide 73

Clearly, there is an issue

Slide 74

Slide 74

The Future

Slide 75

Slide 75

Slide 76

Slide 76

HTML isn’t done

Slide 77

Slide 77

Slide 78

Slide 78

New Styles & Accessibility Improvements

Slide 79

Slide 79

Chromium Controls Visual Refresh

Slide 80

Slide 80

New Native Components

Slide 81

Slide 81

New native components <virtual-list> https://aka.ms/virtual-scroller <toggle-switch> https://aka.ms/toggle-switch

Slide 82

Slide 82

New native components <virtual-list> More info: https://aka.ms/virtual-scroller

Slide 83

Slide 83

New native components <toggle-switch> More info + links to prototype: https://aka.ms/toggle-switch

Slide 84

Slide 84

From proposal to standard 1. Proposal incubates in the WICG 2. After incubation, multi-implementer interest is required before graduating to an HTML standard

Slide 85

Slide 85

Tell other implementers what you want! 1. @mozhacks on Twitter 2. Mozilla Firefox Platform Status: https://github.com/mozilla/platform-status 3. @webkit on Twitter 4. WebKit Platform Status: https://webkit.org/status/

Slide 86

Slide 86

Fixing the current problems with controls

Slide 87

Slide 87

Customizing Controls UI

Slide 88

Slide 88

Customizing Controls UI Explainer MVC Design Pattern Model (data members, capabilities of control) Controller (intermediary between model and view) View (user interface)

Slide 89

Slide 89

Goals • Style any arbitrary part of a native control • Add arbitrary content into a control • Style a particular part without rewriting the whole UI • Customize UI without reimplementing the data model and code for reacting to user input • Customized controls are accessible by default

Slide 90

Slide 90

3 Customization Options • Using standardized parts and states to override the native control styles via pseudo-classes and pseudo-elements. • Using named <slots> to replace parts of the native control UI with developer content, while optionally leaving some native parts in place. • Replacing the entire UI of the native control with an authorsupplied shadow root.

Slide 91

Slide 91

Solution 1: Standardized Control UI anatomy, parts and behavior

Slide 92

Slide 92

Solution 1: Standardized Control UI anatomy, parts and behavior aka.ms/open-ui

Slide 93

Slide 93

Goals of Open UI • Document component names as they exist today • Define a common language for describing UIs and design systems • Eventual browser standards for web app components • Converging designer processes and developer workflows

Slide 94

Slide 94

<select> investigation

Slide 95

Slide 95

Slide 96

Slide 96

The anatomy of a <select>

Slide 97

Slide 97

<style> .styled-select::part(button) { background-color: red; } </style>

<select class=”styled-select”> <option>choice 1</option> <option>choice 2</option> </select>

Slide 98

Slide 98

<style> .styled-select:open::part(button) { background-color: lightgray; } </style>

Slide 99

Slide 99

Solution 2: Named Slots

Slide 100

Slide 100

Standardized Slots

Slide 101

Slide 101

Standardized Slots slot=button slot=listbox

Slide 102

Slide 102

<select> <div slot=“button” part=“button” class=“custom-button”>Choose a pet</div> <div slot=“listbox” part=“listbox” class=“custom-listbox”> <option> <img src=“./cat-icon.jpg”/> <div class=”option-text”>Cat</div> </option> <option> <img src=“./dog-icon.jpg”/> <div class=”option-text”>Dog</div> </option> </div> </select>

Slide 103

Slide 103

Slide 104

Slide 104

Customize selectively <input type=”range”>

Slide 105

Slide 105

Customize selectively <range> <div slot=”thumb” part=”thumb”> <svg><!— Use SVG to draw the thumb icon… —></svg> </div> </range>

Slide 106

Slide 106

Parts and slots

Slide 107

Slide 107

Native controller code + userprovided UI Parts Web Platform Code Native event handlers Part Attributes / element types

Slide 108

Slide 108

Solution 3: Shadow DOM replacement

Slide 109

Slide 109

attachShadow()

Slide 110

Slide 110

attachShadow()

Slide 111

Slide 111

let customSelect = document.createElement(‘select’); customSelect.setAttribute(“custom”, “”); let selectShadow = customSelect.attachShadow({ mode: ‘open’ }); selectShadow.innerHTML = My custom select UI; document.body.appendChild(customSelect);

Slide 112

Slide 112

Don’t forget your parts! part=“button”

Slide 113

Slide 113

Accessibility

Slide 114

Slide 114

Slide 115

Slide 115

https://aka.ms/controls-explainer

Slide 116

Slide 116

We need you!

Slide 117

Slide 117

We need you! • Provide feedback on the current HTML Control prototypes that Chrome has • Contribute to the form control investigations on Open UI • Tell browser vendors what you need from your form controls

Slide 118

Slide 118

Follow these folks • @SoMelanieSaid – Microsoft Edge PM • @gregwhitworth – Salesforce / Open UI • @stubbornella – Google Chrome PM • @seaotta – Microsoft Edge PM

Slide 119

Slide 119

We’re here to listen…

Slide 120

Slide 120

…because these improvements are for you.

Slide 121

Slide 121

Thank you! https://noti.st/seaotta @seaotta ststimac@microsoft.com