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>`

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!

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

CSS Carousels

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

CSS Carousels

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

https://chrome.dev/carousel

https://chrome.dev/carousel-configurator

Typed `attr()`

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

Typed `attr()`

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

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

Scroll State Queries

• `@container scroll-state(stuck)`
• `@container scroll-state(snapped)`
• `@container scroll-state(scrollable)`

Scroll State Queries

• `@container scroll-state(stuck)`
• `@container scroll-state(snapped)`
• `@container scroll-state(scrollable)`

https://developer.chrome.com/blog/css-scroll-state-queries

Scroll-Driven Animations

• `animation-timeline`
• `animation-range`

Scroll-Driven Animations

• `animation-timeline`
• `animation-range`

https://scroll-driven-animations.style

`interactivity: inert;`

(Like setting the HTML `[inert]` attribute dynamically!)

`interactivity: inert;`

(Like setting the HTML `[inert]` attribute dynamically!)

https://groups.google.com/a/chromium.org/g/blink-dev/c/O5ZmbyRh9LE/

https://web.dev/articles/inert

Interest Invokers

• `[interesttarget]`
• `interest-target-delay`
• `:has-interest`
• `[popover=hint]`

(Like mouse `:hover` and keyboard `:focus`, but way smarter!)

Interest Invokers

• `[interesttarget]`
• `interest-target-delay`
• `:has-interest`
• `[popover=hint]`

(Like mouse `:hover` and keyboard `:focus`, but way smarter!)

https://open-ui.org/components/interest-invokers.explainer

Highly, highly recommend watching the talk if you read this far!

Highly, highly recommend watching the talk if you read this far!

https://farcaster.xyz/darrylyeo/0x2a990281

Popovers

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

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