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

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!

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

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

https://youtu.be/VTCIStB6y8s

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

All the new web animation features currently (or soon to be) natively supported in CSS!

(I’m most excited about `attr()`, Scroll-Driven Animations and Nested View Transition Groups.)

https://youtu.be/UcXWY057YuQ

Also, check out all the new/upcoming animation features in CSS:

Also, check out all the new/upcoming animation features in CSS:

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

Bookmark this: a list of every single web platform feature and when they became widely available across major web browsers (or whether Firefox/Safari are willing to support them).

HTML, CSS, JavaScript, SVG, <canvas>, Web Components, HTTP, PWAs, clipboard, scrolling, selection, sensors, storage, WebGL, WebXR and more.

https://web-platform-dx.github.io/web-features-explorer/features/

Previous /frontend pin:

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

Hosts /the-library — Moderates /gen-art /deca /newmasters
— Designs graphics + UI / Crafts code + technology / Collects art / Loves books / Builds community

Interop to the rescue!

https://web.dev/blog/interop-2025

Right two cols of table bot looking too promising 🤷‍♂️

https://warpcast.com/darrylyeo/0x498f0397

custom select would be sweet asf
sadly as the chart shows, this is one way chromium only so maybe in 5 years we can actually use it

Ponder

Yes I have abandoned GraphQL despite supporting it in the past

/s (but not really)

You should connect with typedarray.eth, who said: 'Yes I have abandoned GraphQL despite supporting it in the past /s (but not really)' related to frontend dev and framework alternatives. Join the conversation in the /Ponder channel.