The developer neighborhood hasn’t wasted any time kicking off 2026 with some actually nice articles, demos, and insights. Firefox 147 and Chrome 144 additionally shipped, and whereas they’re not jam-packed with options, the releases are nonetheless fairly thrilling for what’s usually a gradual time of 12 months, so with out additional ado, right here’s what’s vital from the final couple of weeks (or ought to I say the first couple of weeks, of 2026?)…
Chris Coyier (a well-known identify, maybe) exhibits us methods to construct context menus utilizing popovers and anchor positioning over at Frontend Masters. Curiosity invokers,
@starting-style, and fallback positions are additionally talked about, so seize a pickaxe, as a result of this one’s a little bit of a goldmine.
Additionally, anchor positioning went baseline this week, so you should use it on manufacturing web sites now! Do we have now our CSS characteristic of the 12 months already?
Scoping CSS with @scope
Funnily sufficient, I additionally acquired the chance to jot down one thing for Frontend Masters, and I went with @scope. @scope has been my most-anticipated CSS characteristic for fairly some time now, and Firefox delivery it of their ultimate launch of the 12 months (making it baseline) made it my characteristic of the 12 months, so I’m very joyful to kick off 2026 with this little how-to on utilizing @scope and scoping CSS total.
Producing gradient borders from a picture supply
On this demo, created and posted by Ana Tudor on Bluesky, Ana blurs a picture and masks it with a border. You possibly can truly accomplish this in Safari utilizing simply three traces of CSS, however the cross-browser resolution isn’t too advanced both (the important thing elements are the backdrop-filter and masks CSS properties).
Given the present reputation of gradients, blurs, and dare I say it, glass, it’s a reasonably candy impact that you could in all probability adapt for different situations.
Offset gradient border from img supply – how would you get the end result from the display beneath? Actual hole transparency, border gradient obtained from the picture.
My options on @codepen.io:
Safari solely in 3 declarations codepen.io/thebabydino/…
Cross-browser
codepen.io/thebabydino/…#CSS #filter
— Ana Tudor (@anatudor.bsky.social) 11 January 2026 at 09:52
You in all probability don’t want tabs
HTML, like CSS, is soooo good now. That being mentioned, although we’ve been getting all these new HTML components that allow us to construct interactive elements with out JavaScript, that doesn’t essentially imply that we should always. Stephen Margheim says that tab elements are over-engineered more often than not, and explains why and what you are able to do as a substitute.
A scorching take after seeing one more fancy tabs design:
the basic “tab element” is over-engineered for 90% of use circumstances.
You in all probability do not want it…
— Stephen Margheim (@fractaledmind.bsky.social) 3 January 2026 at 19:57
Utilizing your OS as a CMS
Talking of simplicity, Jim Nielsen launched me to this extremely cool OS-as-a-CMS idea as he explains how he acquired “Edit Put up” buttons on his web site to open the native doc on his pc in iA Author, utterly negating the necessity for a CMS. Jim walks you thru the entire thing, however the important thing ingredient is just a bit hyperlink with a customized URL scheme:
EditI like this as a result of I additionally write in Markdown (utilizing iA Author, no much less), and may will simply combine this into my Eleventy construct. But it surely acquired me considering: do every other apps have their very own URL scheme? Properly, because it seems, a few of them do! Right here’s an incomplete checklist (with examples of ‘edit’ instructions for every app):
- Obsidian:
obsidian://open?vault=posts&file=publish - VS Code:
vscode://precise/path/to/publish.md:9:1(:9:1is the road and column quantity) - Ulysses:
ulysses://x-callback-url/open-item?id=ITEM_ID - Chic Textual content (with subl protocol):
subl://precise/path/to/publish.md:9:1 - Apple Shortcuts:
shortcuts://run-shortcut?identify=Edit&enter=/path/to/publish.md(nice for doing stuff with apps that don’t have customized URL schemes)
Fast hits and new net platform options
As you already know (hopefully?), we publish Fast Hits all through the week. One of the simplest ways to search out them is within the sidebar of the homepage, and so they’re both hyperlinks to issues that you could learn in only a minute or two, or simply PSAs to learn and keep in mind. Anyway, right here’s what you may’ve missed:
Prepared for the primary cool demo of the 12 months?
A mini Mario world with keyboard management. Sure, you possibly can transfer Mario and in addition soar! 👀
Demo: codepen.io/t_afif/full/… through @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScriptA Chrome-only experimentation utilizing fashionable CSS.
— CSS by T. Afif (@css-only.dev) 2 January 2026 at 13:39
And eventually, listed below are my high picks from what Firefox and Chrome shipped on Tuesday:
Thanks for tuning in. I’ll see you in two weeks! Be there or be sq. (aspect-ratio: 1)!
