What’s important #3: popover context menus, @scope, new web platform features and more | CSS tricks

Plus, anchor positioning became baseline this week, so you can now use it on production websites! Do we have our CSS feature of the year yet?

Explore CSS with @scope

Funnily enough, I also got the chance to write something for Frontend Masters, and I went with it @scope. @scope has been my most anticipated CSS feature for a while, and Firefox released it in their last release of the year (making it a baseline) and delivered Mine feature of the year, so I’m very happy to start 2026 with this little one how to use @scope and the scope of CSS in general.

Generate gradient edges 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 achieve this in Safari with just three lines of CSS, but the cross-browser solution isn’t too complex either (the main parts are the backdrop-filter And mask CSS properties).

Given the current popularity of gradients, blurs, and dare I say it: glassit’s a pretty nice effect that you can probably adapt for other scenarios.

Offset gradient edge from img source – how would you get the result of the screen below? Real aperture transparency, edge 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

[image or embed]

– Ana Tudor (@anatudor.bsky.social) January 11, 2026 at 9:52 AM

You probably don’t need tabs

HTML, like CSS, is soooo good now. That said, even though we got all these new HTML elements that let us build interactive components without JavaScript, that doesn’t necessarily mean we should. So says Stephen Margheim Tab components are usually overdevelopedand explains why and what you can do instead.

A good choice after seeing another nice tab design: the classic “tab component” is over-designed for 90% of use cases. You probably don’t need it…

—Stefan Margheim (@fractaledmind.bsky.social) January 3, 2026 at 7:57 PM

Use your operating system as a CMS

Speaking of simplicity, Jim Nielsen introduced me to this incredibly cool OS-as-CMS concept, as he explains how he got “Edit Post” buttons on his website to open the local document on his computer in iA Writerthus completely negating the need for a CMS. Jim walks you through the entire process, but the key ingredient is just a little link with a custom URL scheme:

Edit

I love this because I also write in Markdown (with iA Writer, no less), and could will easily integrate this into my Eleventy build. But it got me thinking: do other apps have their own URL scheme? Well, it turns out some do! Here’s an incomplete list (with examples of ‘edit’ commands for each app):

• Obsidian: obsidian://open?vault=posts&file=post
• US code: vscode://exact/path/to/post.md:9:1 (:9:1 is the line and column number)
• Odysseus: ulysses://x-callback-url/open-item?id=ITEM_ID
• Sublime text (of under protocol): subl://exact/path/to/post.md:9:1
• Apple Shortcuts: shortcuts://run-shortcut?name=Edit&input=/path/to/post.md (great for doing things with apps that not have custom URL schemes)

Quick hits and new web platform features

As you (hopefully?) know, we’ll be posting Quick Hits all week. The best way to find them is in the sidebar of the homepage, and they’re links to things you can read in a minute or two, or just PSAs to read and remember. Anyway, here’s what you might have missed:

Ready for the first cool demo of the year? A mini Mario world with keyboard controls. Yes, you can move Mario and jump too! 👀 Demo: codepen.io/t_afif/full/… via @codepen.io ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experiment with modern CSS.

[image or embed]

— CSS by T. Afif (@css-only.dev) January 2, 2026 at 1:39 PM

And finally, here are my top picks from what Firefox and Chrome shipped on Tuesday:

Thanks for tuning in. I’ll see you in two weeks! Be there or be square (aspect-ratio: 1)!