Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Standardizing 'select': What the future holds f...

Frontend NE
March 05, 2020
Design
4
250

Standardizing 'select': What the future holds for HTML - Stephanie Stimac @ FrontendNE

Thought HTML was done? Think again! Those who work on the web platform are ready to extend HTML controls with not only updated native web styles, so that we're no longer stuck in the Windows 95 era of design, but we're also starting to look at new HTML controls to help solve some of the problems developers encounter when trying to extend the current controls to fit their needs.

If you build for the web, you’ve probably had that moment when you get to a point you need to build and style your controls, the most common one being the select element. You try to use the native element and style it to match the rest of your design language but the amount of CSS required is exhaustive, and you can forget about extensibility or heavy customization of the controls.

In this talk, I’ll discuss the history behind why HTML controls can be so complex to style, the current state of styling them and their extensibility, and what the future looks like for controls, starting with the select element.

I’ll also touch on how developers and designers can get involved to help drive the future of this area of the web platform forward to ensure browser makers are building the right solutions to this problem.

Full event details: https://frontendne.co.uk/events/2020-03-05

Frontend NE

March 05, 2020
Tweet

More Decks by Frontend NE

See All by Frontend NE
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
230
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
1.1k
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
170
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
580
Contain yourself - Docker for developers
frontendne
2
180
Design process of a website
frontendne
0
170
What the JAMstack?
frontendne
1
750
Talking the talk
frontendne
0
350
We need to talk
frontendne
0
220

Other Decks in Design

See All in Design
ZKK_001.pdf
nicholaspegu
0
1.4k
TUNAG BOOK 2024
stmn
0
380
Improve a service workshop
mastervicedesign
1
130
Tableau曲線表現講座(2024.11.21)
cielo1985
0
170
実利の世界で、表現者である
kiyou77
3
110
Карта реализации историй — убийца USM
ashapiro
0
260
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
5
1.6k
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
380
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
270
Design System for training program
mct
0
160
Night Shift (beginning sequence)
cpineda57
0
930
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.2k

Featured

See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Optimising Largest Contentful Paint
csswizardry
33
3k
Agile that works and the tools we love
rasmusluckow
328
21k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Being A Developer After 40
akosma
87
590k
Statistics for Hackers
jakevdp
796
220k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Language of Interfaces
destraynor
154
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Code Review Best Practice
trishagee
65
17k

Transcript

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

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

    @seaotta

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

    @seaotta

  4. Designer Developer

  5. None
  6. None
  7. None
  8. None
  9. None

  10. Mock up Code

  11. None

  12. HTML Controls

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

  14. Some History HTML Form Controls

  15. 1995

  16. 1995

  17. 1995

  18. 1995

  19. Pre- 1995 <HTML> 1.0

  20. Pre- 1995 <HTML> 1.0

  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

  22. WorldWideWeb (Nexus) ViolaWWW Erwise MidasWWW MacWWW Mosaic Cello Lynx 2.0

    Arena AMosaic 1.0 IBM WebExplorer Netscape Navigator SlipKnot 1.0 MacWeb Ibrowse Agora (Argo) Minuet Web Browsers 1991-1994 Wikipedia
  23. None
  24. None

  25. 1995

  26. 1995

  27. 1995

  28. CSS IS AWESOME

  29. CSS IS AWESOME 1997

  30. 1999 <HTML> 4.01 CSS IS AWESOME ❤

  31. 1995

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

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

  34. None

  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 1997: CSS Supported by HTML 3.20 not fully embraced by browsers 1999: CSS Supported by HTML 4.01 embraced by more browsers

  36. 1999 – present

  37. The Current State of Styling Native Controls

  38. It’s not bad…

  39. But it’s not great either.

  40. Feasibility of Styling Form Controls with CSS

  41. <form> <fieldset> <label> <output> Text-field (<input>) Buttons Feasibility of Styling

    Form Controls with CSS Can be styled with few problems

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

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

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

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

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

  46. Browser Inconsistencies

  47. Browser Inconsistencies Chrome EdgeHTML Firefox Safari

  48. No extensibility

  49. None

  50. <video controls width="1080"> </video>

  51. <video controls width="1080"> </video>

  52. <video width="1080"> </video>

  53. Dribbble: Jordan Ranson

  54. Dribbble: Mark Hendriks Dribbble: Seb kay

  55. What do developers really want?

  56. Do they really want better form controls?

  57. None

  58. Initial Research 1400 respondents

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

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

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

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

  63. JSConfEU Survey Which form control gives you the most frustration?

    Why?

  64. JSConfEU Survey Which form control gives you the most frustration?

  65. JSConfEU Survey Why?

  66. “ Requires hacky tricks

  67. “ Can’t style <option> elements at all to the extent

    we need to

  68. Too little control over styling across popular browsers “

  69. …but the amount of work it takes to implement an

    accessible alternative with complete feature parity is massive. “

  70. How painful is it?

  71. ImportantTM Research

  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None

  83. Clearly, there is an issue

  84. The Future

  85. ✨

  86. HTML isn’t done

  87. +

  88. New Styles & Accessibility Improvements

  89. Chromium Controls Visual Refresh

  90. New Native Components

  91. New native components

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

  93. From proposal to standard 1. Proposal incubates in the WICG

    2. After incubation, multi-implementer interest is required before graduating to an HTML standard

  94. 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/

  95. Fixing the current problems with controls

  96. Form controls and their parts aren’t standardized

  97. How do you standardize a control?

  98. Open UI https://open-ui.org/

  99. Open UI’s Mission Maintain an open standard for UI and

    promote its adherence and adoption.

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

  101. Standardizing controls and components is hard…

  102. None

  103. Open UI People who work on design systems Web platform

    engineers +

  104. Investigations: Peeling open <select>

  105. None
  106. None

  107. aka.ms/select-ou Select Working Draft

  108. aka.ms/open-ui Open UI Website

  109. aka.ms/open-ui Add a design system Open UI Website

  110. aka.ms/open-ui Add a design system Provide feedback

  111. We need you!

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

  113. Follow these folks • @stubbornella – Google Chrome PM •

    @gregwhitworth – Microsoft Edge PM • @seaotta – Microsoft Edge PM

  114. We’re here to listen…

  115. …because these improvements are for you.

  116. Thank you! https://noti.st/seaotta @seaotta [email protected]