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

9f4dcab6a0fc5889de79521bf35e49c4?s=47 Frontend NE
March 05, 2020

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

9f4dcab6a0fc5889de79521bf35e49c4?s=128

Frontend NE

March 05, 2020
Tweet

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. HTML isn’t done

  86. +

  87. New Styles & Accessibility Improvements

  88. Chromium Controls Visual Refresh

  89. New Native Components

  90. New native components

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

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

    2. After incubation, multi-implementer interest is required before graduating to an HTML standard
  93. 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/
  94. Fixing the current problems with controls

  95. Form controls and their parts aren’t standardized

  96. How do you standardize a control?

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

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

    promote its adherence and adoption.
  99. 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
  100. Standardizing controls and components is hard…

  101. None
  102. Open UI People who work on design systems Web platform

    engineers +
  103. Investigations: Peeling open <select>

  104. None
  105. None
  106. aka.ms/select-ou Select Working Draft

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

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

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

  110. We need you!

  111. 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
  112. Follow these folks • @stubbornella – Google Chrome PM •

    @gregwhitworth – Microsoft Edge PM • @seaotta – Microsoft Edge PM
  113. We’re here to listen…

  114. …because these improvements are for you.

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