Guten Tag! Guten Tag! 👋

Have you heard about the CSS sticky spec change? Or have you used the position-visibility property before? And are you aware of the new JavaScript features landing in 2026?

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

::: highlight quote Mark listens to "Jet Black" by Fletchr Fletchr and says:

An anthemic crashing guitar explosion, "Jet Black" ruined a perfectly good nap in the sun for me at Boardmasters Festival this summer by erupting on stage, and it's gone on heavy rotation since. :::

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

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

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

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

A big thank you and a huge bag of karma points go to "vaupeh" this week. Thank you for supporting indie publishing in the times of AI slop by covering a small fraction of the cost it takes to send Web Weekly every week! ❤️

You can support Web Weekly on Patreon or GitHub Sponsors.

No code

The last quiet thing → "Nothing you own is finished. Everything exists in a state of permanent incompletion, permanently needing."
Don't Let AI Write For You → "Letting an LLM write for you is like paying somebody to work out for you."
AI Shrinks the Team, Not the Problem → "Reducing the team [because of AI] does not reduce the number of things that can go wrong. It reduces the number of people available to own them."

Use `subgrid` to deal with "controlled" content

.full-width { display: grid; grid-column: inline; grid-template-columns: subgrid; :where(&) >

Short'n'sweet: David explains how CSS subgrid (available across browsers since September 2023) helps with laying out content coming from CMS systems.

TS Type guards vs. assertion functions

// let's pretend JSON.parse is an unknown data source const data = JSON.parse('{"name": "Stefan"}'); assertIsUser(data); // throws if not a User data.name.toUpperCase(); // narrowed to User after assertion

While reading Absorbing unknown Into the Type Realm I learned a new TypeScript thing. Usually, I'm going for type guards to narrow types, but with assertion functions (asserts data is Something) you can narrow the type inside of the current scope. No ifs or anything like that needed. Good stuff!

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/the-scope-of-type-guards-and-assertion-functions/">Narrow things down!</a>

What to know in JavaScript 2026

CSS has been so much on fire that it sometimes feels as if nothing is happening in JavaScript land. Chris was so kind and summarized what you need to know this year!

Everybody's raving about `pretext`

The pretext project is only one month old and already gained 40k GitHub stars. People are excited. Why?

pretext is a "JavaScript/TypeScript library for multiline text measurement & layout". That means you can give it some text and it'll figure out how much space the text will need. Under the hood it normalizes the input text and then uses canvas.measureText() to get the size and layout information. I didn't even know that measureText is a thing in canvas land.

Now, some of the demos are very impressive but I agree a lot with Donnie's take. Just because something can be done in JS, it doesn't mean it needs to be done with it. And also, CSS is moving fast, some of the layout issues might be resolved sooner than later if enough people show interest. What's your take?

<a class="btn btn__small" href="https://github.com/chenglou/pretext?tab=readme-ov-file">Be fancy</a>

The View Transitions Toolkit

View Transitions Toolkit — A collection of utility functions to more easily work with View Transitions.

Bramus released a new npm package full of view transition utilities. The GitHub docs are also worth a read if you want to learn more about view transition inner workings. For example, I didn't know that you can pause view transitions.

<a class="btn btn__small" href="https://chrome.dev/view-transitions-toolkit/">Level up your transition game</a>

Side note: while playing around with all these snippets I've also run into the situation of view transitions blocking document interactions. Luckily, Bramus had a fix for that one, too.

The wonderful weird web – `CSS-or-BS`

I must admit this was harder than I thought! Are you certain you can differentiate real from made up CSS properties?

<a class="btn btn__small" href="https://www.keithcirkel.co.uk/css-or-bs/">Decide!</a>

The `human.json` protocol

{ "version": "0.1.1", "url": "https://example.com/~alice", "vouches":

More and more content is primarily generated without any human reviewing things. The human part is more at danger in our beloved web. To counter this movement, I've seen multiple people implement the human.json protocol. People can vouch for each other so that we can build a network of trust. Should we all get on board?

<a class="btn btn__small" href="https://codeberg.org/robida/human.json/src/branch/main/README.md">Trust your fellow webmaster</a>

`light-dark()` works soon for images

.element { color-scheme: dark; background-image: light-dark(url(light.png), url(dark.png)); }

The light-dark() CSS function was limited to color values but very soon will work for images in CSS, too. It'll land in Chromium and Firefox soon. Let's see when Safari joins the party.

<a class="btn btn__small" href="https://www.bram.us/2026/03/19/more-easy-light-dark-mode-switching-light-dark-is-about-to-support-images/">Flip some images</a>

A `sticky` CSS spec change

The Change — A recent change to CSS fixes this issue: position: sticky can now track the nearest scrolling container per axis.

A nine-year-old CSS spec issue has been resolved and position: sticky now tracks the nearest scrolling container per axis. So, if you want to stick an element to a scroll container and the document, this will soon be possible. As usual, today, we're still in Chromium only land. Still, great that this landed!

<a class="btn btn__small" href="https://www.bram.us/2026/03/30/css-sticky-per-axis/">Stick!</a>

Edge's experimental network efficiency guardrails

Data source (Analytics, Data, Images) going into the network to be displayed as a website.

Now, that's cool! Edge is experimenting with a new way to track and report low-quality network resources. The initial criteria are uncompressed text resources, images larger than 200 kB and data URLs larger than 100 kB. I'm game!

<a class="btn btn__small" href="https://blogs.windows.com/msedgedev/2026/03/17/monitor-and-improve-your-web-apps-load-performance/">Watch out</a>

CSS containment explained

.article { contain: layout paint style; }

Harry has a gift for publishing reference pieces. This time the new article is about CSS containment (contain, content-visibility or contain-intrinsic-size). It's a stellar piece and if you wonder how to save the browser some rendering and recalculation work, you should check it out!

CSS containment can be used in other situations, too, though. Ryan explained how contain helped with a tricky layout situation.

Random MDN – `position-visibility`

.infobox { position-anchor: --my-anchor; position: fixed; position-area: top span-all; position-visibility: always; }

From the unlimited MDN knowledge archive...

Now that anchor positioning works across browsers, do you know that there's a CSS property to control when an anchored element is shown?

TIL recap – Forbidden `fetch` headers

fetch('https://api.example.com/data', { headers: { 'Content-Length': '100', // This will be ignored 'X-Custom-Header': 'This is fine' // This will be sent } })

Did you know that you can't set all the headers in your "common" fetch calls?

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

New on the baseline

.article { text-indent: 3em each-line; }

I'm not sure I'll ever use this but if you're into typography and fancy text layouts, you might dig it. The text-indent values hanging and each-line are now supported across browsers.

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-indent">Move your text around</a>

Three valuable projects to have a look at

jaywcjlove/awesome-mac – A collection of high-quality macOS software.
unhappychoice/gitlogue – Turn your Git history into a living, animated story.
zhw2590582/ArtPlayer – A modern and full featured HTML5 video player.

A new Tiny Helper

If you're looking for a quick way to pixelate images, this tiny helper is for you!

<a class="btn btn__small" href="https://www.pixelateimage.co">Pixelate</a>

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

Thought of the week

So true.

::: highlight quote

Software engineering projects are not dominated by the known work, but by the unknown work, which always takes 90% of the time. :::

Did you learn something from this issue?

❤️ If so, join 40 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! 👋

Web Weekly #188