Una Kravets
@una.im
Making the web more stylish ✨🎨 DevRel Lead for CSS & Web UI @ Google Chrome. Cohost of the CSS Podcast & host of Designing in the Browser. 🌎 una.im
Yes, it was just resolved last week in the CSSWG to be added to the spec. That means we can ship it! I think there's some more work to be done but I don't have a timeline
February 6, 2026 at 5:24 PM
Yes, it was just resolved last week in the CSSWG to be added to the spec. That means we can ship it! I think there's some more work to be done but I don't have a timeline
Yesss the gap is nice too!
February 5, 2026 at 11:24 PM
Yesss the gap is nice too!
Built that demo for him basically :)
February 5, 2026 at 11:06 PM
Built that demo for him basically :)
border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
February 5, 2026 at 8:08 PM
border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
Reposted by Una Kravets
It looks like style() container queries are enabled in @firefoxnightly.bsky.social - this is one of the features I'm looking forward to most. Especially with range queries starting to roll out.
@ container style(--progress > 80%) {
background: green;
}
bugzilla.mozilla.org/show_bug.cgi...
@ container style(--progress > 80%) {
background: green;
}
bugzilla.mozilla.org/show_bug.cgi...
2014404 - Enable the `layout.css.style-queries.enabled` pref on Nightly
RESOLVED (jfkthame) in Core - CSS Parsing and Computation. Last updated 2026-02-04.
bugzilla.mozilla.org
February 5, 2026 at 5:11 PM
It looks like style() container queries are enabled in @firefoxnightly.bsky.social - this is one of the features I'm looking forward to most. Especially with range queries starting to roll out.
@ container style(--progress > 80%) {
background: green;
}
bugzilla.mozilla.org/show_bug.cgi...
@ container style(--progress > 80%) {
background: green;
}
bugzilla.mozilla.org/show_bug.cgi...
You can use optgroup with labels on select and you’ll get a fallback that looks like a current (non-custom) select
February 4, 2026 at 7:27 PM
You can use optgroup with labels on select and you’ll get a fallback that looks like a current (non-custom) select
My favorite part of @nerdy.dev's customizable select is the sticky section headers 😍
nerdy.dev/nice-select
nerdy.dev/nice-select
February 4, 2026 at 7:04 PM
My favorite part of @nerdy.dev's customizable select is the sticky section headers 😍
nerdy.dev/nice-select
nerdy.dev/nice-select
::picker() is technically a popover but there is some interaction weirdness (see github.com/whatwg/html/...), which stretches to closePopover(). One way to programmatically close it would be to open (& close) another auto popover to close it (though this is super hacky & we need a better solution)
Selects interplay with popover is sometimes surprising. · Issue #12099 · whatwg/html
What is the issue with the HTML Standard? <!doctype html> <select> <option>One</option> <option>Two</option> <option>Three</option> </select> <select id="s2"> <option>One</option> <option>Two</opti...
github.com
February 3, 2026 at 7:16 PM
::picker() is technically a popover but there is some interaction weirdness (see github.com/whatwg/html/...), which stretches to closePopover(). One way to programmatically close it would be to open (& close) another auto popover to close it (though this is super hacky & we need a better solution)
I noticed it as one of the first things that stood out when I played with the feature and reported it internally too
February 2, 2026 at 2:20 PM
I noticed it as one of the first things that stood out when I played with the feature and reported it internally too
And the full thing: codepen.io/una/pen/YPWe...
border-shape chevron nav
...
codepen.io
January 30, 2026 at 8:14 PM
And the full thing: codepen.io/una/pen/YPWe...
Here it is: codepen.io/una/pen/NPry...
January 30, 2026 at 7:50 PM
Here it is: codepen.io/una/pen/NPry...
Maybe give it a week or two then 😅
January 30, 2026 at 7:46 PM
Maybe give it a week or two then 😅
Right?! Makes a big difference
January 30, 2026 at 7:29 PM
Right?! Makes a big difference
Yep! You’ll be able to do that with border shape!
January 30, 2026 at 7:28 PM
Yep! You’ll be able to do that with border shape!
+1 I feel like thats a given for these kinds of things 😅
January 30, 2026 at 7:16 PM
+1 I feel like thats a given for these kinds of things 😅
Link to demo (latest Canary only): codepen.io/una/pen/RNRQ...
The code for the shape() inside of border-shape looks crazy, so I built a little tool to simplify it: codepen.io/una/pen/bNeL...
Again, still a very WIP API. There are bugs 🐞. Hit me up if you run into them or bug @nomster.bsky.social
The code for the shape() inside of border-shape looks crazy, so I built a little tool to simplify it: codepen.io/una/pen/bNeL...
Again, still a very WIP API. There are bugs 🐞. Hit me up if you run into them or bug @nomster.bsky.social
border-shape + anchored CQ
...
codepen.io
January 30, 2026 at 7:12 PM
Link to demo (latest Canary only): codepen.io/una/pen/RNRQ...
The code for the shape() inside of border-shape looks crazy, so I built a little tool to simplify it: codepen.io/una/pen/bNeL...
Again, still a very WIP API. There are bugs 🐞. Hit me up if you run into them or bug @nomster.bsky.social
The code for the shape() inside of border-shape looks crazy, so I built a little tool to simplify it: codepen.io/una/pen/bNeL...
Again, still a very WIP API. There are bugs 🐞. Hit me up if you run into them or bug @nomster.bsky.social
Finally solving the tooltip arrow usecase with a new CSS property called border-shape
⚠️ WIP early-stage API, timeline TBD, more info coming soon
But it brings a lil tear to my eye to see this working, border & all 🥲
This demo uses anchored container queries + border-shape + a little animation
⚠️ WIP early-stage API, timeline TBD, more info coming soon
But it brings a lil tear to my eye to see this working, border & all 🥲
This demo uses anchored container queries + border-shape + a little animation
January 30, 2026 at 7:12 PM
Finally solving the tooltip arrow usecase with a new CSS property called border-shape
⚠️ WIP early-stage API, timeline TBD, more info coming soon
But it brings a lil tear to my eye to see this working, border & all 🥲
This demo uses anchored container queries + border-shape + a little animation
⚠️ WIP early-stage API, timeline TBD, more info coming soon
But it brings a lil tear to my eye to see this working, border & all 🥲
This demo uses anchored container queries + border-shape + a little animation
Also browser support might take a bit but it’s a good progressive enhancement! Especially for basic things like the demo in my video
January 30, 2026 at 2:32 PM
Also browser support might take a bit but it’s a good progressive enhancement! Especially for basic things like the demo in my video
I’ll let yall know when it’s shipping but it’s looking good :) was stalled in the WG for a bit
January 30, 2026 at 2:30 PM
I’ll let yall know when it’s shipping but it’s looking good :) was stalled in the WG for a bit
Mostly because the little human who lives in my house likes to rearrange things into different rooms
January 30, 2026 at 2:30 PM
Mostly because the little human who lives in my house likes to rearrange things into different rooms
✅ I am in this photo and I don’t like it
January 30, 2026 at 2:29 PM
✅ I am in this photo and I don’t like it
Reposted by Una Kravets
One more custom <select> demo, with a bunch of CSS transforms and animations.
I can't get enough of this. So cool.
I can't get enough of this. So cool.
January 27, 2026 at 9:38 AM
One more custom <select> demo, with a bunch of CSS transforms and animations.
I can't get enough of this. So cool.
I can't get enough of this. So cool.