What's !important #3: Popover Context Menus, @scope, New Web Platform Features, and More | CSS-Tricks
Briefly

What's !important #3: Popover Context Menus, @scope, New Web Platform Features, and More | CSS-Tricks
"The developer community hasn't wasted any time kicking off 2026 with some really great articles, demos, and insights. Firefox 147 and Chrome 144 also shipped, and while they're not jam-packed with features, the releases are still pretty exciting for what's normally a slow time of year, so without further ado, here's what's important from the last couple of weeks (or should I say the first couple of weeks, of 2026?)..."
"Chris Coyier (a familiar name, perhaps) shows us how to build context menus using popovers and anchor positioning over at Frontend Masters. Interest invokers, <menu>, discrete transitions, @starting-style, and fallback positions are also mentioned, so grab a pickaxe, because this one's a bit of a goldmine. Also, anchor positioning went baseline this week, so you can use it on production websites now! Do we have our CSS feature of the year already?"
"Funnily enough, I also got the opportunity to write something for Frontend Masters, and I went with . @scope has been my most-anticipated CSS feature for quite a while now, and Firefox shipping it in their final release of the year (making it baseline) made it my feature of the year, so I'm very happy to kick off 2026 with this little how-to on using @scope and scoping CSS overall."
"In this demo, created and posted by Ana Tudor on Bluesky, Ana blurs an image and masks it with a border. You can actually accomplish this in Safari using just three lines of CSS, but the cross-browser solution isn't too complex either (the key parts are the backdrop-filter and CSS properties). Given the current popularity of gradients, blurs, and dare I say it, , it's a pretty sweet effect that you can probably adapt for other scenarios."
The developer community started 2026 with notable articles, demos, and browser releases. Firefox 147 and Chrome 144 shipped, offering incremental but useful updates. Anchor positioning reached baseline and is now safe for production use. Context menus can be built using popovers and anchor positioning alongside interest invokers, <menu>, discrete transitions, @starting-style, and fallback positions. The @scope CSS feature reached baseline in Firefox and enables scoped styling to simplify component-specific rules. A demo by Ana Tudor shows generating gradient borders from an image using blur, masking, backdrop-filter, and concise CSS techniques with cross-browser considerations.
Read at CSS-Tricks
Unable to calculate read time
[
|
]