Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! Guten Tag! 👋

Do you know how to feature detect @container, @layer or @starting-style? Are you excited about the new CSS logo? And are you excited about Interop 2025?

Turn on the Web Weekly tune and find all the answers below. Enjoy!

Mario listens to "Röyksopp - Oh, Lover":

Oh Lover makes me always feel like floating and dancing while sitting on my office chair. It´s the perfect song for me to come down and it works every time.

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are two more songs left in the queue.

Something that made me smile this week

Stack Exchange issue: Why does man print "gimme gimme gimme" at 00:30?

The man command, which you can use to access a programs manual, comes with an ABBA-themed easter egg printing out gimme gimme gimme. I love it!

ABBA all the things

Open tabs

How to get started with a screen reader

How to get started with VoiceOver (Mac) and NVDA (Windows)

Checking accessibility is required to ship good stuff for the web. But how do you get started?

Accessibility is a huge topic, but knowing how to control a screen reader is a valuable first step. Martin provides some guides to get you started on Windows and Mac.

Side note: if you're looking for a quick-to-use accessibility checklist, Moritz's cheatsheet is great.

Wonderful conference talks

Video Archive — Conference talks from eight years of XOXO.

So far, I've watched three newly released XOXO conf talks:

Leave Netflix alone tonight and watch these inspiring talks instead!

promise.try entered ECMAScript proposal Stage 4

JS Code: Promise.try(someNastyFn) 	.then((value) => { 		console.log(value); 	}) 	.catch((error) => { 		console.error(error); 	});

You probably know the Promise methods resolve and reject. The two static methods just got company — Promise.try. If you must handle functions that could return errors, values or other promises, Promise.try is a handy addition to avoid some try/catch blocks.

So far, only Chromiums ship it, but now that we have reached Stage 4, it'll be implemented quickly.

Learn more about "Promise.try"

The two competing masonry CSS standards

Examples of the two competing masonry. One integrates in CSS grid the other one is independent.

When you check the "Grid Layout Module Level 3" spec, you might be surprised to discover Masonry layouts.

And you might be even more surprised to learn that the editor's draft includes two competing standards. One will integrate Masonry layouts into the existing CSS grid functionality (grid-template-rows: masonry;) while the other is grid-independent (display: masonry).

Both proposals come with good arguments, and Geoff summarizes the discussion perfectly.

Learn more about Masonry

You're halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – Is my blue your blue?

Is my blue your blue?

Give it a try — I'm a true neutral with a hue boundary at 174. 😅

Decide!

How to feature detect CSS @-rules

Multiple CSS at-rules (@container, @counter-style, @starting-style,...) and their visualized browser support

With the CSS evolution in full swing, many new at-rules are entering the web. We already have baseline-supported @container, @property and @layer. But we still have to wait for some at-rules to reach general support. @view-transition or @starting-style immediately come to mind.

How could you feature detect these at-rules and bet on progressive enhancement?

@support-at-rule doesn't work yet

Theoretically, you could use @supports at-rule(). Unfortunately, the CSS at-rule function isn't supported anywhere yet.

Here are the browser bugs if you want to follow at-rule() implementations: Webkit (Safari), Gecko (Firefox) and Chromium (Chrome, Edge).

But there's a trick to evaluating at-rule browser support. CSS at-rules often come with "normal" CSS properties. @container comes with the container-type property. @position-try enables position-try: flip-block. Juan explains how to use this knowledge to detect all the juicy new CSS rules.

Feature detect the new'n'fancy

And if you want to dive even deeper, Bramus is on a feature detection world tour lately and covers the at-rules Juan missed.

Consider all the trade-offs

Why GOV.UK’s Exit this Page component doesn’t use the Escape key

The Gov.uk team implemented a new "Exit this Page" component to offer visitors a quick keyboard-only way to leave a page. And they offer this feature by pressing shift three times.

Shift? Three times? beeps explains in fabulous detail all the considerations for building JS functionality with the fewest trade-offs.

Think things through

Node.js v23 comes with node --run, but ...

Examples showing that `node --run` is slightly faster than `npm run` but also doesn't execute npm life cycle scripts.

Node.js v23 was released last week and ships a new and stable node --run flag. The flag allows running package.json scripts without npm. It's slightly faster than npm run (we're talking a couple of hundred ms) but doesn't run life cycle scripts (e.g. prestart). So, npm --run is not an npm run replacement.

Will you use it? I'll stick with npm run in this case... 🤔

The state of Interop 2025

Interop focus areas sorted by number of emojis. JPEG XL, Scrolling on mobile devices and @custom-media are leading.

Someone asked me the other day how it's decided what browser features make it into Interop, and I didn't have an answer. So, I researched a bit, and it doesn't look like the voting and decision process is documented anywhere. Do the browser makers decide in secret where the web is heading?

The Open Web Advocacy group filed an issue demanding more transparency. And I agree — all I know is that some humans will pick the Interop focus areas before December 19th, 2024. I've no idea how decisions will be made... Ouch.

But in the meantime, if you're curious about what feature requests received the most community upvotes, the labeled GitHub issues provide a quick idea of web feature demand.

Random MDN – light-dark()

CSS: :root {   color-scheme: light dark; } body {   color: light-dark(#333b3c, #efefec);   background-color: light-dark(#efedea, #223a2c); }

From the unlimited MDN knowledge archive...

Did you know that the light-dark CSS color function allows you to style light and dark mode in a single declaration and also is baseline supported? Now you do. 🫵

Remove some media queries

TIL recap – the start and value attribute

Code example showing how to apply the li item "start" attribute.

Here's a quick HTML party trick: did you know you can apply a start value to ordered lists or even give specific values to list entries?

Control your lists

Find more short web development learnings in my "Today I learned" section.

Classifieds & friends

ECMAScript news — Stay up-to-date on JavaScript and tools

The ECMAScript news newsletter is one of my favorite ways to stay up-to-date with the fast-moving JS ecosystem. It's short, very well-curated, and to the point. You should check it out!

Three valuable projects to have a look at

A new Tiny Helper

Screenshot of VTracer vectorizing the Web Weekly header.

If you're looking for a quick way to vectorize images to SVG, you should check out VTracer. I tried the Web Weekly header, which did a decent job of SVGing it.

Vectorize

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

I enjoyed this quick article on self-reflection a lot.

If you do what everyone does, you're gonna become what everyone is.

Did you learn something from this issue?

💙 If so, join 15 other Web Weekly readers and give back with a small monthly donation on Patreon or GitHub Sponsors.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

If you enjoyed this article...

Join 5.4k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles