As someone currently stuck in the rabbit hole of implementing focus management for custom components: gimme plz
07.03.2026 00:34
👍 3
🔁 0
💬 0
📌 0
As someone currently stuck in the rabbit hole of implementing focus management for custom components: gimme plz
Open UI has been working on speccing out the focusgroup attribute: a declarative way to support roving focus & add keyboard nav to composite widgets like toolbars/menus
We'd love your feedback!
Learn more & see open questions: developer.chrome.com/blog/focusgr...
H/t to Edge folks for prototyping
Was wondering the same! Also, how is the state (eaten or not eaten) done, there's not really a "has tabbed to" state.
I noticed they only did one "wrap" (portal) in the video, maybe the path is hardcoded? 🙂 And then "eaten" state could be just "all elements before current focus".
It seems we can now customize the select element, right? right?!
Demo: codepen.io/t_afif/pen/P... via @codepen.io
»It’s almost like we need to develop tools to debug the tools we’re using to abstract what the web already provides — all for the sake of running away from the “pain” of writing standard CSS.«
That's exactly how I feel about all this CSS-in-JS non-sense.
www.smashingmagazine.com/2026/02/css-...
Change it to `<select multiple size="1">` and you can keep shooting 🙂
I wonder if there's already a production grade code syntax highlighting library (either read-only or editor) that uses #CSS Custom Highlights. Like described here: pavi2410.com/blog/high-pe...
Seems to be this bug: bugs.webkit.org/show_bug.cgi...
Figures that @kizu.front-end.social.ap.brid.gy would find this first 🙂
Simplified test case of the Safari bug: codepen.io/maikelkrause...
It seems that a chain of anchors where each element anchors its previous sibling breaks when the first element is absolutely positioned. And the result in Safari is non-deterministic! Refresh a few times, you get different results.
Screenshot of a codepen showing a demo of a stepper component
Created a #CSS-only stepper component using anchor positioning to draw the connecting lines between the steps: codepen.io/maikelkrause...
(Unfortunately, it's broken in Safari at the moment in a quite interesting way. More details in the reply.)
This is a few years old by now, but I just discovered this Bad Apple demo by Delan Azabani using only some text and #CSS Custom Highlights: bucket.daz.cat/work/igalia/...
Works in all browsers now! Though the performance on Firefox/Safari is a bit laggier than Chrome for me.
#CSS shape() has become baseline thanks to the release of #Firefox v148 🥳
This tooltip experiment I created a year ago now works cross-browser: codepen.io/maikelkrause...
Jokes on you, it's actually my birthday
I think half of the reason I'm hyped about it is that it seems it opens the syntax space a bit for more operators in selectors. I would still love to see the @scope operator (forgot the exact proposed syntax) to come back in play for instance.
#CSS reference combinators (`label /for/ input`) look hype
Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.
piccalil.li/blog/an-in-d...
Screenshot of two news headlines: (1) Arrest of Andrew Mountbatten-Windsor, and (2) Life sentence for former South Korean President Yoon
What is this, Consequences Day?
The @scope bug fix for input elements (and other UA shadow DOM elements). For me I can't really consider @scope baseline without this, so very happy to see it being fixed.
It's true there wasn't a lot for a while back in 2024/2025, but in recent months they've added support for: anchor positioning, @scope, view transitions (level 1), contrast-color(), and probably some more I'm forgetting.
I wrote a little script that imports the tokens from Figma, and then generates the CSS as well as a TypeScript file. And then there's mdx pages like these that display them:
- github.com/fortanix/bak...
- fortanix.github.io/baklava/?pat...
Browser developers are working on custom form controls ( `appearance:base`), the next giant task is looming: customisable input type=date/datetime/color pickers.
These are huge and have wildly varied UI. Send me your examples, I'd love to see them and build up a body of these pickers.
Ah awesome! Just in time to get those points on Interop 2026
Lots of exciting stuff! I was kind of hoping for customizable select to be on the list though. Especially since it seems there's movement on this front at both Gecko and WebKit, I figured this would be a focus area this year
Yeah I was thinking some sort of registry of package name → implementation so it can be done locally.
Quick idea: some sort of codemod that recognizes these packages and replaces them with an inline variant?
Lucca lying on the floor being cute
Happy #caturday!
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
Linked lists using anchor-positioning.
Adapted from my JS version which used SVG paths to this version which positions pseudo elements using position-anchor to link them to the checked checkbox items and current selected radio button.
See the full demo on @codepen.io codepen.io/cbolson/pen/...
