Frontend

Time to ditch your JavaScript UI component framework soon?

Here are all the new web UI features currently (✓) or soon to be (✕) supported in vanilla HTML/CSS 🧵

Time to ditch your JavaScript UI component framework soon?

Here are all the new web UI features currently (✓) or soon to be (✕) supported in vanilla HTML/CSS 🧵

https://youtu.be/VTCIStB6y8s

(Follow along by watching this excellent talk by Una Kravets from the Google Chrome DevRel team!)

/frontend dev (HTML/CSS)・founder/decentralized data wrangler /blockhead・contributor /ethglobal /walletbeat・hackathon bounty hunter・music maker・dropout・nomad・25

(Follow along by watching this excellent talk by Una Kravets from the Google Chrome DevRel team!)

https://youtu.be/VTCIStB6y8s

Popovers

• `[popover]`
• `<button popovertarget>`
• `<dialog closedby>`

Popovers

• `[popover]`
• `<button popovertarget>`
• `<dialog closedby>`

https://developer.chrome.com/blog/introducing-popover-api

Command Invokers

• `<button command commandfor>`
• `[command="show-popover"]`
• `[command="hide-popover"]`
• `[command="toggle-popover"]`
• `[command="show-modal"]`
• `[command="close"]`

Command Invokers

• `<button command commandfor>`
• `[command="show-popover"]`
• `[command="hide-popover"]`
• `[command="toggle-popover"]`
• `[command="show-modal"]`
• `[command="close"]`

https://developer.chrome.com/blog/command-and-commandfor

Anchor Positioning

• `anchor()`
• `position-anchor`
• implicit anchors for invokers!

Anchor Positioning

• `anchor()`
• `position-anchor`
• implicit anchors for invokers!

https://developer.chrome.com/docs/css-ui/anchor-positioning-api

https://anchor-tool.com

Customizable `<select>`

• `appearance: base-select;`
• `<selectedcontent>`
• `::picker()`
• `::picker-icon`
• `::checkmark`
• progressively enhanced – still shows the classic `<select>` in older browsers!

CSS Carousels

• `::scroll-button()`
• `::scroll-marker`
• `:scroll-marker-group`

Typed `attr()`

(works great when paired with `[data-*]` attributes!)

https://developer.chrome.com/blog/advanced-attr

CSS Carousels

• `::scroll-button()`
• `::scroll-marker`
• `:scroll-marker-group`

https://chrome.dev/carousel

https://chrome.dev/carousel-configurator

Customizable `<select>`

• `appearance: base-select;`
• `<selectedcontent>`
• `::picker()`
• `::picker-icon`
• `::checkmark`
• progressively enhanced – still shows the classic `<select>` in older browsers!

https://developer.chrome.com/blog/rfc-customizable-select