Styling new HTML UI capabilities
summary
Customizable select elements are now styleable by opting in with appearance: base-select and use new CSS primitives like the top layer, picker icon pseudo-element, starting-style and transition-behavior to animate open/close, anchoring and anchor() for placement, calc() and interpolate-size for dimension transitions, and scroll-snap/scroll-marker for carousel-like pickers. Demos include radial, sticky-width and emoji/item-snap selectors, a multi-select prototype in Chrome Canary, accessible keyboard behavior in most demos, and some mobile bugs remain.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:02CSS and UI foundations
- 3:09Styling select elements
- 7:25Open UI mission
- 8:29Popovers API explained
- 14:05Styling select elements with CSS
- 20:26Custom selects capabilities
- 22:56Anchoring and sticky positioning
- 27:32CSS character modeling
- 30:43Scroll snapping selects
- 33:30Scroll markers and carousels
- 35:13Styling option groups
- 36:35Multi-select experiments
- 37:37Call to action
- 38:21Embrace creativity
- 39:08Q&A
related talks
44mSelect it! Styling new HTML UI capabilities
44mModern UI Patterns
41mBack to the future: of web development
34mDon't Use JS for That: Moving Features to CSS and HTML
57mDo It With Style: Rethinking CSS
36mStop using JS for that: moving features from JS to CSS & HTML
47mThe future of UI is "open"
35mWhat's new in Web UI