The developer group 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 sluggish time of yr, 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 title, maybe) exhibits us learn how 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’ve got our CSS characteristic of the yr already?
Scoping CSS with @scope
Funnily sufficient, I additionally obtained the chance to write 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 yr (making it baseline) made it my characteristic of the yr, 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 really accomplish this in Safari utilizing simply three strains 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 fairly candy impact that you could most likely adapt for different situations.
Offset gradient border from img supply – how would you get the end result from the display screen under? 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 most likely don’t want tabs
HTML, like CSS, is soooo good now. That being stated, regardless that we’ve been getting all these new HTML parts that allow us to construct interactive elements with out JavaScript, that doesn’t essentially imply that we must 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 sizzling take after seeing one more fancy tabs design:
the traditional “tab element” is over-engineered for 90% of use instances.
You most likely 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 obtained “Edit Publish” buttons on his web site to open the native doc on his laptop in iA Author, fully 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 really 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. Nevertheless it obtained me considering: do some other apps have their very own URL scheme? Properly, because it seems, a few of them do! Right here’s an incomplete listing (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 - Elegant Textual content (with subl protocol):
subl://precise/path/to/publish.md:9:1 - Apple Shortcuts:
shortcuts://run-shortcut?title=Edit&enter=/path/to/publish.md(nice for doing stuff with apps that don’t have customized URL schemes)
Fast hits and new internet platform options
As (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 bear in mind. Anyway, right here’s what you may’ve missed:
Prepared for the primary cool demo of the yr?
A mini Mario world with keyboard management. Sure, you may transfer Mario and in addition leap! 👀
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 here 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)!
