Guten Tag! Guten Tag! 👋

Did you check out the new WebKit grid-lanes resources already? Do you "view transition" with match-element? And have you heard of HTML streaming maybe becoming a thing?

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

::: song by="Pablo" title="GENER8ION - STORM starring Yung Lean" youtube="x6_mbnsh6VU" I loved the cinematography, choreography and the whole bad-boys-from-high-school vibe. :::

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

Let's open this week with some fancy CSS grid stuff!

.grid { grid-auto-columns: 1fr; grid-auto-flow: column; }

Peter-Paul explained how the grid layout algorithm works. For most cases you don't need to think about the internals, but it's good to know how things work. If you don't know what grid-auto-flow does, this post is for you!

Masonry grid example with controls and source code below.

And speaking of the grid algorithm, things get more and more complicated when you consider the new display: grid-lanes (Safari-only so far). Our friends at WebKit released a new cheatsheet with a built-in configurator and lots of examples. It has strong vibes of the CSS-Tricks materials back in the day!

A CSS grid showing how gaps will be filled.

And if all this isn't enough, Patrick published a tutorial explaining alignment in the new masonry world.

That's some funky new CSS we'll be able to use eventually! 🎉

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

🦋 Bluesky
🐘 Mastodon
💼 LinkedIn

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

::: highlight sponsored

Turn your component tests into visual coverage

Free visual testing for VITEST Browser Mode

The new Chromatic plugin for Vitest’s Browser Mode adds visual tests and collaborative UI review with no changes to your existing test suite. Tests run in a stable, parallelized cloud infrastructure for reduced flake and accelerated shipping.

Early access includes hands-on support from the Chromatic team and free usage while the plugin is in beta.

<a class="btn btn__small" href="https://www.chromatic.com/blog/vitest-visual-testing-sneak-peek/?utm_source=webWeekly&utm_medium=newsletter&utm_campaign=newsletterSponsorshipWebWeeklyVitestEAP">Get early access</a>

<small>Web Weekly is open for sponsorships. When you want to reach 6k developers, <a href="https://webweekly.email/sponsor">you know what to do</a>!</small> :::

Web Weekly Housekeeping

A huge bag of karma points goes to Caspar, Den, Marco, Savio, and Zoe this week. 50 people now support Web Weekly financially, thank you all! ❤️

If you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors.

The state of content creation is rough these days, and while I have let go of the idea of making this newsletter a sustainable income, every tiny support helps me keep going.

Something that made me smile this week

no slop grenade. Stop throwing AI-generated walls of text into conversations.

You know that I'm a sucker for single-purpose URLs and this one is right up my alley.

No code

We have a communication problem → "I'm convinced that many of society's problems come from how we communicate online."
If You are Asking for Human Attention, Demonstrate Human Effort → "If you are requesting human attention, demonstrate human effort."
Why DIY Software Is Great Until It Is Not → "When you build for others, you are working with someone else’s idea of what the product should do, not yours."

Web development trivia

pushState(state, unused); pushState(state, unused, url);

Here's something for you to shine at nerdy dinner parties. Did you know that history.pushState has a parameter that's "officially" unused? Alex gives a nice history lesson.

<a class="btn btn__small" href="https://alexwlchan.net/2026/wonky-web-apis/">Don't use the unused</a>

TIL — there's three ways to ignore files in Git

$ git config --global core.excludesFile ~/.gitignore

So, I've been using global Git ignores since forever (bye bye .DS_Store), but I didn't know .git/info/exclude is a thing.

<a class="btn btn__small" href="https://nelson.cloud/.gitignore-isnt-the-only-way-to-ignore-files-in-git/">Ignore</a>

`view-transition-name: match-element`

I can't be the only one not realizing match-element works across browsers these days, can I? Bramus explains when to use match-element or go for the advanced attr() CSS function.

<a class="btn btn__small" href="https://www.bram.us/2026/06/19/view-transition-name-attr-or-match-element/">Match it!</a>

Streaming HTML?

div ?start name=another-placeholder Loading… ?end /div ... template for=another-placeholder Here is some emHTML content/em! /template

I've got no idea how I could have missed that, but Ollie shared that streaming HTML might become a thing. Granted, it's very early days still but this is exciting. It's yet another example of framework patterns entering the web!

<a class="btn btn__small" href="https://developer.chrome.com/blog/declarative-partial-updates">Stream</a>

The wonderful weird web – Clues by Sam

Four cards with three characters showing their job and clues for each.

I've seen multiple people talk about the logic puzzle game "Clues by Sam". And I must admit, it's a lot of fun!

<a class="btn btn__small" href="https://cluesbysam.com/">Solve some puzzles</a>

MDN now has an MCP server

Claude conversation asking for browser support of container style queries.

I know that many Web Weekly readers aren't big AI fans. However, the new MDN MCP server is very useful to access docs and browser support data.

There's a prop for that...

Adam released a new JS library that transforms JS runtime values into CSS custom properties. Just like that? Yes, if you want to use form values, pointer positions or even the current time in CSS, prop-for-that will make that possible without writing custom JS.

<a class="btn btn__small" href="https://prop-for-that.netlify.app/">Use props</a>

Side note: Adam also spoke at CSS Day and presented a MEGA LIST of the ways CSS can enable highly adaptive, contextually relevant components. This slide deck is very well worth your time. Trust me.

Good to be aware: contrast themes

When a change in background or box-shadow is used as a focus indicator instead of the default focus outline, a Contrast Theme will render it invisible. Instead of removing the outline with outline: none, use outline: 2px solid transparent.

You're probably checking light and dark mode when writing your CSS. But do you check contrast, too? Here's a quick explainer telling what to watch out for.

<a class="btn btn__small" href="https://accessibility.huit.harvard.edu/news/2026/05/deep-dive-contrast-themes">Be aware</a>

HTML in canvas demos

HTML in canvas is still a long way off, but of course people are going wild with it already. I also wonder how useful this all will be, but hey... I'm always game for some eye candy.

<a class="btn btn__small" href="https://html-in-canvas.dev/">Check the future</a>

Random MDN – `overscroll-behavior`

.messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; }

From the unlimited MDN knowledge archive...

Overscroll behavior is one of those CSS properties that aren't used enough. I'm using a Mac and way too often do I accidentally swipe the history, just because a horizontal scroller wasn't containing the scroll. Let's fix that!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overscroll-behavior">Container</a>

TIL recap – orientation in container size queries

A interactive component showing an image frame and a handle telling to resize its container.

Did you know that container size queries can detect landscape and portrait ratios? Now you do!

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/size-container-queries-can-detect-landscape-portrait-orientation/">Detect</a>

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

New on the baseline

Newly available: field-sizing: content; Widely Available: CSS nesting.

I've mentioned CSS field-sizing plenty of times here and with Firefox supporting it now with version 152, it's finally baseline newly available.

And it feels like yesterday, but native CSS nesting is now widely available. Time flies!

Three valuable projects to have a look at

webstonehq/tuxedo – A TUI for todo.txt
raphaelsalaja/audio – Declarative audio synthesis for the web.
useplunk/plunk – An open source email platform.

A new Tiny Helper

With more and more throwaway tools being generated, I started to question Tiny Helper's usefulness. The project is also "under fire" with lots of useless vibe code submissions.

What do you think? Should we keep it? If 50 people reply and let me know that it's valuable, I'll keep going. Otherwise, I think it's time to "finish" this project.

Thought of the week

Yep.

::: highlight quote

Paying for software isn't paying for a solution. It's paying for someone else to own a problem. :::

Did you learn something from this issue?

❤️ If so, join 50 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 #195