Skip to main content

Web Weekly #199

Guten Tag! Guten Tag! 👋 

Do you know how Interop 2026 is doing right now? Will you use the new CSS progress() function? And do you know how ESM module resolution really works?

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

Web Weekly Jukebox

Kalabrese - Fresh And Foolish

Pawel says:

Is it only me, but this one reminds me the vibes of early Roisin Murphy? Love the vocal and jazzy parts on this one.

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

How much controversy can there be around dark/light mode toggles? Turns out, a lot. Lea Verou kicked off a whole thing. People have opinions on these little two- or three-state toggles.

So, Lea started the discussion by arguing that website visitors don't care about dark mode toggles (I agree) and that they only reach for them when something's off.

A dark mode toggle is a temporary comfort adjustment. [...] It’s situational, it’s immediate, and it’s usually about the environment you’re in rather than a considered long-term stance on color schemes.

From there, she argues that a dark mode toggle should only have two options: the system preference (shown as dark or light) and the opposite. That's smart. Whenever things are different from the system, you can store the preference that's not the system default. If it matches their general settings, there's nothing to do, and if you go back to the system setting, you clear the preference. This approach seems reasonable to me at first sight.

Bramus disagreed, though.

When building these types of control, I think that one of the main goals here should be to keep things predictable for users.

And well, that's a strong point, too, I'd say. A little sun icon that actually means "system preferences" is a bit tricky to understand if you really care about light and dark modes. I tend to agree here, and it seems like a "Agree to disagree." case, but the whole community had feelings about this. Lea shared more feedback in a follow-up post. And it closed with a banger:

And then it dawned on me: all these persistent dark mode toggles I had seen, literally all of them have been on developer-facing sites!

And I think that's what I came to conclude, too. It's an interesting discussion to have but I really don't think normies care too much about two, three, or no dark/light mode states. Things can always be better and smoother, but for this case I think it's just us nerds who love discussing these things. 😅

If you enjoy Web Weekly, share it with your friends and family.

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

Web Weekly Housekeeping 

This week's bag of Karma points goes to Torsten!

I've been out conferencing for the last two weeks, so Web Weekly had to be put on the back burner for a bit. But today marks edition 199. I'm not sure if I'll do something special for 200 but man... this newsletter has been going for a looooooong time.

A big thanks this week goes to Torsten. 57 people help me out with a little bit of money now. Thank you all! These small gestures really keep me going. If you also want to support indie publishing, you can do so on Patreon or GitHub Sponsors. It really makes a difference in these hard times of AI slop and low-effort web creation.

No code 

Peek into the future: a new universal selector? 

/* Matches `btn-primary`, `btn-secondary`, ... */ .btn-* { /* ... */ }

The CSS working group came up with a new way to select elements matching prefixed classes. You can think of the Class Prefix Selector (.prefix-*) as a new way to select btn-primary, btn-secondary, btn-whatever, and whatever btn- class comes next.

See what's coming

I like it, but many are skeptical, too. Here's Anselm with a whole list of questions and feedback.

Well-known change-password URLs 

GET /.well-known/change-password HTTP/1.1 Host: example.com HTTP/1.1 302 Found Location: https://example.com/account/security/password

Quick reminder, if you're working on a SaaS product that requires a login, please check if you've defined the well-known URL to change passwords. Password managers will check /.well-known/change-password to offer a quick way to change passwords. It's a tiny thing, but it makes life easier for everyone.

Check the spec

Interop proposals for next year 

Graph showing the support of interop features across browsers. Chrome/Edge are leading, followed by Firefox and Safari.

Interop for 2026 is in full swing, but do you remember what was included? Let me show you my favorites and where we are at right now.

  • Container Style Queries: 100% interop
  • CSS contrast-color(): 100% interop
  • CSS anchor positioning: 99.4% interop
  • CSS attr(): 99.7% interop
  • Custom highlights: 98.8% interop
  • Media pseudo-classes: 100% interop

I know there's some criticism about Interop, but I still think it's a great initiative. Not surprising, but still cool to see: Chromium is leading and has almost finished all its 2026 promises. We're in September, so that's cool. Firefox and Safari aren't that far behind, though.

But what should be included next year? What features are you missing on the web? We can all now propose focus areas for Interop 2027 on GitHub. If you want to get involved, now's the time.

Submit a focus area

A new syntax highlighter in town 

<micro-lighter data-syntax-theme="github" line-numbers controls="copy"> <pre><code>Code goes here</code></pre> </micro-lighter>

I'm still guilty of not using "span-free syntax highlighting" on my blog. And now there's a new custom element to get colorful code on your pages with a single import. Dave explained how and why he came up with the microlighter project.

Drop the spans

And if you want to have something to compare microlighter with, check out syntax-highlight which highlights code blocks using the CSS Custom Highlight API, too.

The wonderful weird web – Cows on a roadtrip 

Cows on a field surrounded by some broken cars.

I don't know why this exists, but the randomness makes me smile. And no, no cow will be harmed here!

Go on a roadtrip

Module resolution explained 

Comparison of module resolution and live bindings.

This post covers common footguns when it comes to module resolution. It compares CommonJS and ESM modules, and while CommonJS and the good old require slowly but surely lose importance, it's good to know about live bindings, import hoisting, and general module internals. Highly recommended.

Import all the things

New things coming to HTML 

<usermedia id="media-ctrl"> <button>Enable camera and microphone</button> </usermedia>

Chris came up with a real banger. Have you seen all these new HTML elements entering the platform? There's <geolocation>, <usermedia>, and <install>, just to name a few. Granted, many of these are Chromium-only, but I like where we're heading here.

Discover the new HTML

And if you want to dive deeper into <geolocation>, our friends at Piccalilli released a deep dive and Chrome has some more new elements already in the making (<microphone> and <camera>).

AI;dr 

AI;DR - abbr. AI; didn't read. Reply earned when AI-written text is sent with zero human-editing.

AI remains the stickiest conversation topic I've ever seen. It even tops the recent German state elections. #fckafd It's simply exhausting. Here are some things you might enjoy.

Things to put into your head in 2026 

My HTML boilerplate in 2026

Manuel shared his current HTML boilerplate for new projects, and you can probably borrow some things for your own projects from it.

Set things up

TIL: @property changes property computation 

&lt;div&gt;&lt;/div&gt; &lt;div class=&quot;second-item&quot;&gt; &lt;p&gt;…&lt;/p&gt; &lt;/div&gt; .second-item { --index: sibling-index(); & > :first-child { /* 👇 what's `scale`? */ scale: var(--index); } }

Well, here's Jake sharing yet another detail about custom properties that I'm sure not many people know about. It's funny how many footguns can show up in a "simple variable system". Years ago, I stumbled over a surprising !important behavior when using custom properties.

Either way, Jake's article is great. Go and read it. I'm sure you'll learn something!

Compute properties

Random MDN – Server-Timing 

// A metric with a name only Server-Timing: missedCache // A metric with a duration Server-Timing: cpu;dur=2.4

From the unlimited MDN knowledge archive...

If you're monitoring your site's performance and you have some server-side processing at play, you might wonder how much time was spent on a certain task in the backend. The Server-Timing HTTP header allows you to make this time visible in the frontend via a PerformanceObserver.

Track server performance

TIL recap – Hide critical commands from your terminal history 

# command goes into the history $ delete everything # command does not go into the history $ delete everything # ^ note the leading space

If you're wrangling with critical commands and lots of environment variables, you probably want to avoid all of them entering your shell history. A preceding space character might help you out!

Keep your history clean

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

New on the baseline: progress() 

Support matrix for Firefox 155 showing that `progress` went into baseline.

With Firefox 155, released September 1st, the progress() CSS function became Baseline newly available.

Classifieds & friends 

Polypane 30: Playgrounds, Side Panel extension API, updated video recording and Chromium 152

Polypane hit version 30 and it's a massive release. If you've been on the fence about using a browser built for web development, you should check it out right now.

Give Polypane a try

Three valuable projects to have a look at 

Thought of the week 

Yep, I can confirm this holds. 😅

The less you understand, the more you trust AI. But the more you trust AI, the less you understand.

Did you learn something from this issue? 

❤️ If so, join 57 other Web Weekly supporters 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! 👋

Join 6.5k+ developers and

Subscribe to Web Weekly