
What’s !important #3: Popover Context Menus, @scope, New Web Platform Features, and More
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?)... Building popover context menus with anchor positioning 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, , and fallback positions are also mentioned, so grab a pickaxe, because this one’s a bit of a goldmine. @starting-style 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? Scoping CSS with @scope Funnily enough, I also got the opportunity to write something for Frontend Masters, and I went with . @scope @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 . Generating gradient borders from an image source 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 and backdrop-filter CSS properties). mask Given the current popularity of gradients, blurs, and dare I say it, glass , it’s a pretty sweet effect that you can probably adapt for other scenarios. Offset gradient border from img source - how would you get the result from the screen below? Real gap transparency, border gradient obtained from the image. My solutions on @codepen.io: Safari only in 3 declarations codepen.io/thebabydino/... Cross-browser codepen.io/thebabydino/... #CSS #filter - Ana Tudor ( [image or embed] @anatudor.bsky.social ) 11 January 2026 at 09:52 You probably don’t need tabs HTML, like CSS, is soooo good now. That being said, even though we’ve been getting all these new HTML elements that enable us to build interactive components without JavaScript, that doesn’t necessarily mean that we should. Stephen Margheim says that tab components are over-engineered most of the time , and explains why and what you can do instead. A hot take after seeing yet another fancy tabs design: the classic "tab component" is over-engineered for 90% of use cases. You probably don't need it... - Stephen Margheim ( @fractaledmind.bsky.social ) 3 January 2026 at 19:57 Using your OS as a CMS Speaking of simplicity, Jim Nielsen introduced me to this incredibly cool OS-as-a-CMS concept as he explains how he got “Edit Post” buttons on his website to...
Preview: ~500 words
Continue reading at Css Tricks
Read Full Article