A presentation at Chrome Developer Summit in in San Francisco, CA, USA by Greg Whitworth
HTML isn’t done Nicole Sullivan PM for Google Chrome @stubbornella Greg Whitworth PM for Microsoft Edge @gregwhitworth
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components! Buh-bye 1990s gradients!
Visual Refresh & Accessibility upgrade A starting point for deeper changes!
The <progress> element was already fairly modern
The <meter> before & after
You are going to want to check these out. Enable the Web Platform Controls update UI flag. about://flags
The <range> also needed some love.
<checkbox> and <radio> are the workhorses of the web
Date
Time
Using inclusive design from the start
Color picker & keyboard navigation
High contrast mode on Windows
@media (forced-colors: active)
forced-color-adjust: auto | none
36 a11y commits to improve form controls 🎉
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components!
We want to build things web developers will use Currently form elements are not used as much as they could be. We wanted to understand why?
“Right now it is often easier to build form components from scratch…than it is to modify the style of the form controls themselves” – Web Developer
Why not just create form elements from scratch? • Duplication of effort • Effort it takes to build your own • Cross browser compat - even if you make it perfect on one browser, it’ll be weird on another. • Accessibility often suffers
Why not just create form elements from scratch? • Duplication of effort • Effort it takes to build your own • Cross browser compat - even if you make it perfect on one browser, it’ll be weird on another. • Accessibility often suffers
Why not just create form elements from scratch? • Duplication of effort • Effort it takes to build your own • Cross browser compat - even if you make it perfect on one browser, it’ll be weird on another. • Accessibility often suffers
We wanted to understand why form elements are recreated?
Top 10 form controls re-created by web developers
Why do web developers recreate form controls?
We heard you. This is why we’ll focus on stylabilty next select checkbox radio
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components!
Normalized values are painful for frameworks. We got a bunch of codepens from the React DOM team 3. != 3
Which form elements give you the most frustration?
You kinda hate the select element
And the date picker
And file
And the checkbox and radio elements
What really gets your goat about select? Styling Behavior & Extensibility Content Adjustments
Next generation <select>
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components!
Most requested native controls: <virtual-list> & <toggle-switch>
Virtual scrollers The most requested new component
Pete Hunt reminds us to build a virtual list… every year… since 2015
Virtual Scrolling Primitive: Display Locking Available in Origin Trial ● Batched rendering updates ● Find-in-page works ● Better a11y
Virtual Scrolling Primitive: Display Locking Available in Origin Trial • Batched rendering updates • Find-in-page works • Better a11y
Toggle Switch Allows developers to semantically express the off/on state.
Toggle Switch Updating Chromium’s default controls • We started with a ton of research into how other design systems handle toggle behavior. • We coded a prototype. Please try it! • And we used it to drive out new low level APIs and better a11y.
Three low level APIs & improvements • Form-associated custom elements • Custom element a11y • Focusable custom elements
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components!
Please help, we’d love for you to get involved.
Please help, we’d love for you to get involved.
URL #HTMLisNotDone
wicg.io
open-ui.org
https://bugs.chromium.org
Thank you! Nicole Sullivan Greg Whitworth @stubbornella @gregwhitworth
Controls Refresh Updating Chromium’s default controls • Modern Appearance • Touch friendly • Accessible
Collaborating
Opportunities found
Is this worth it? Is improving the controls & components story worth the investment? • • • • Appearance Frequency of bringing/building your own Effort it takes to build your own Cross browser
New components. Huzzah! 🎁 Proprietary + Confidential
Current Radio Checkbox Meter Range Upcoming
TRY OUT display-lock and std-switch CTA
We want your help
Proprietary + Confidential Fast Slow
While building virtual scrolling we realized we had a missing platform primitive: Display locking Folks couldn’t use find in page with regular virtual scrollers because the content isn’t really in the DOM.
Off-screen content can be locked - Locked DOM can be manipulated by JavaScript and the browser knows it doesn’t have to render it this frame. - More content in the DOM means user agent features like find in page can work.
Off-screen content can be locked • Motivate Locked DOM can be manipulated by JavaScript and the browser knows it doesn’t have to render it this frame. • More content in the DOM means user agent features like find in page can work.
Toggle Switch Updating Chromium’s default controls • We started with a ton of research into how other design systems handle toggle behavior. • We coded a prototype. Please try it! • And we used it to drive out new low level APIs and better a11y.
Three low level APIs • Form-associated custom elements • Custom element a11y • Focusable custom elements
Custom element a11y • Motivate adding this API
Custom element a11y • Motivate adding this API
Focusable custom elements • Motivate adding this API
Join Nicole Sullivan and myself as we talk about how it’s time for us to re-assess whether HTML is done or not.
Let’s go back in time a bit. Remember when word was out that we were going to get new HTML elements? I don’t know about you, but I was so excited. After years of building the same tabset over and over, I thought, I’m done! Surely they’ll see that tabs are one of the most common elements in every design system ever. Imagine my disappointment. <aside>, <article>, and their friends seemed so disconnected from the problems I was solving every day. I had no problem with them, I just didn’t need them.
Since then, I have held onto the core belief that HTML shouldn’t be finished. Design Systems have been innovating and lighting the path forward for HTML for a long time. The web platform is now ready to pave those cow paths and extend HTML. And we need your help with these brand new shiny components!
The following resources were mentioned during the presentation or are useful additional information.
Gives an overview of what we found from the initial survey and opportunity analysis regarding form controls. This information began to paint a picture for the opportunity that we have for all browsers to work together to improve the web platform; not only for a better developer experience but also for our shared end users.
Following up on our earlier research, we began to dig into the <select> control since it was the most frustrating control. This outlines what we see and how we plan to begin investigating it.
The blog post where we outline the cross company collaboration and the improvements we’ve made to the form controls.
Here’s what was said about this presentation on social media.
