Guten Tag! Guten Tag! 👋

Did you keep track of the new Safari features? Do you know how to style CSS gaps? And do you worry about the future of the web?

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

::: song by="Paweł" title="Djrum - Waxcap" youtube="jQtvKD-h7bs" Wifey doesn’t like when this one is playing loud, but this one meant to be listened loud. Djrum is not for everyone, but you may like it if you’re into experimental garage and dnb. :::

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

You might have noticed that I took a two week newsletter break after sharing my concerns about the state of content publishing in the last edition. Many people reached out and a good bunch started to support Web Weekly. The newsletter now has 47 supporters. ❤️

A huge bag of karma points goes to Marco, Roman, Dave, Dieter, Carlos, chrillek, and Bernd for supporting indie publishing. Thank you! Karol and Steve also gave some nice testimonials for the Web Weekly site. A big thanks goes to all of you!

But let me be transparent and share some numbers: finding the "good stuff" and writing Web Weekly easily costs me 8-10 hours a week. And thanks to your support I make roughly 150 dollars a month. After subtracting hosting and email costs, this makes 100 dollars for 40h of work.

Obviously, you know that I include sponsors. In a good month this makes 500 - 600 dollars on top. This is all pre-tax and in total, this simply isn't a very good deal. I'm also exhausted from the weekly "pressure" to deliver.

I always loved learning and sharing but with the current state of the web / industry / community, I simply wonder where I'm heading with this "little side project". I also turned 40 and that's definitely not helping.

Where am I going with this? This edition is Web Weekly 194. I have a thing for numbers so I'll definitely push forward to edition 200. And I don't want to sound overly dramatic, this is just a newsletter hitting your inbox after all, but yeah... I'll need to sit down and really think about what to do. I'll keep you posted!

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! ❤️

Something that made me smile this week

I’ve spent almost a decade and a half identifying vulnerabilities and exploits at unicorn scale, but this is hands down the most unserious, "almost too stupid to be true" of them all.

I've been waiting for the first "major AI fu** up" for a while, but even Instagram account takeovers seem to be "fine".

<a class="btn btn__small" href="https://www.0xsid.com/blog/meta-account-takeover-fiasco">Don't worry!</a>

No code

Making a New Plan → "Admitting when your opinion has changed, and why, is an underrated leadership skill."
Do Things You’ll Love Yourself For → "You can iron your shirt because you “have ironing to do,” or you can iron it because you love the person who will be wearing it tomorrow."
The quiet grief of adult friendship → "Adult friendship became one of the most emotionally significant and least discussed losses of modern life."

Safari 27 Highlights

News from WWDC26: WebKit in Safari 27 beta

Did you notice this year's WWDC26? I must say that it was fairly quiet in my circles. Apple released their new Safari 27 beta.

It comes with "58 new features, 525 fixes and 4 deprecations". Here are my two favorites.

HTML snippet showing a select that include "selectedcontent" and more HTML in the "options" element.

First, Safari joins Chromium and will support "customizable selects" soon. This means <selectedcontent>, appearance: base-select, ::picker-icon and ::checkmark are slowly worth looking at!

img src=photo.jpg srcset=photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w sizes=auto loading=lazy alt=A mountain landscape

WebKit joins the club and will start to support sizes=auto for images! This means we'll enter baseline territory for easier image loading!

Other than that, this release post is loooooong and unfortunately I can't play with things right away because I can't install new TechPreview versions unless I update my OS. That means "bye-bye" Sequoia and "hello" Tahoe, I guess. More rounded corners here I come! How bad is the liquid glass world these days?

<a class="btn btn__small" href="https://webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta/">Check the new Safari</a>

Do we need a new perf metric?

The part that is often overlooked is that TBT is not an unbounded sum of all blocking work in the trace: it is a sum of all the blocking time between First Contentful Paint and Time to Interactive..

Harry explains the Total Blocking Time, First Contentful Paint, and Time to Interactive perf metrics and argues that we need yet another metric: the TBT window. It's a good explainer on how many metrics influence each other and I had no idea how time to interactive can influence the total blocking time.

<a class="btn btn__small" href="https://csswizardry.com/2026/06/front-ends-missing-metric-the-tbt-window/">Build a fast web</a>

Fun with the new `image()` CSS function

.hero { background-image: image(alpha(from black / 50%)), url('/mountains.avif'); }

Ollie looked into the future and shared how the super new image() function will enable some handy CSS-only background effects! image() seems to be so new that there's no real compat data yet, but it works in Chrome Canary and will ship in 150.

<a class="btn btn__small" href="https://olliewilliams.xyz/blog/image-function/">Add some color</a>

Gap decorations in CSS

.shelf { column-rule-width: 1px; column-rule-style: solid; column-rule-color: oklch(70% 0.14 235); rule-inset-cap: 10px; rule-inset: 130px; }

Chromium started to roll out gap decorations with v149 two weeks ago. And boy, am I excited about this. The Web Weekly site includes a lot of solid and dashed gaps and making this work was quite painful.

Brecht explains everything you can do and it's quite a lot!

<a class="btn btn__small" href="https://utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex">Style the gap</a>

The wonderful weird web – `personalsit.es`

This site was built to share and revel in each others’ personal sites, and is currently home to ~1040 of them. Witness these in wonderment and awe. Immaculate. Stunning. How did they do that? Yes, you should definitely get around to redesigning yours soon.

If you're missing the "old web", I occasionally love browsing this collection of personal websites.

<a class="btn btn__small" href="https://personalsit.es/">Discover the good stuff</a>

That said: maybe one day I'll build a stunning site like Elle's.

The State of CSS

The State of CSS survey is open for another two weeks! Go take it if you have a moment. I just finished it, and it took around 10 minutes. It's an important data point for spec makers and browser vendors, so let's get this all done.

<a class="btn btn__small" href="https://survey.devographics.com/survey/state-of-css/2026">Give some insights</a>

The future of Firefox and the web

So far I've only listened to half of this Syntax episode but it's always good to hear Jake talk and it's still weird to see him in the Firefox team. 😅

<a class="btn btn__small" href="https://www.youtube.com/watch?v=etgArQSC57I">Be aware</a>

Will we finally have context-aware headings?

h1Museums/h1 !-- heading level 1 -- section headingoffset=1 h1Free entry to the museum/h1 !-- heading level 2 -- /section

Granted, we're looking into the future here and the following only works in Firefox Nightly after enabling a flag. Still, this is super exciting. After two decades of struggling with properly grouped and structured headings, headingoffset might finally be a way to make things more manageable. Manuel gave a quick overview.

<a class="btn btn__small" href="https://matuzo.at/blog/2026/content-aware-headings">Level your headings</a>

And if you prefer a quick video, here's Jake explaining the new attribute as well.

Speaking about web security...

Since the robots are scanning and exploiting all possible code out there, web security becomes more important than ever. The upcoming npm release will finally harden what's possible when you run npm install. Install scripts will become opt-in. Hallelujah!

And if you want to be really safe, Nick shared in his wonderful "One Tip a Week" newsletter how to set up the free Socket firewall so that malicious code isn't even entering your machine!

And lastly, it's always good to stay ahead and check common best practices. Liran maintains npm-security-best-practices and it's worth a look!

Random MDN – `import with`

const data = await import("./data.json", { with: { type: "json" }, });

From the unlimited MDN knowledge archive...

Here's a quick reminder that you can use with in static and dynamic imports to load JSON. More types like CSS and text are on their way. 🤞

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with">Import the fancy way</a>

TIL recap – ARIA roles can change children semantics

Widget showing that an incorrectly applied removes listitem semantics.

Did you know that incorrectly applied ARIA roles can nuke semantics entirely? The standard rule applies: if you're reaching for ARIA, make sure you know what you're doing.

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/aria-roles-can-remove-their-childrens-semantics/">Be aware of ARIA</a>

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

New on the baseline

Newly available: @container style(--theme: dark) { .card { background: #1e1e2e; color: #cdd6f4; } } > Widely available .prose { margin-block: 1lh; scroll-padding-block: 2rlh; }

Friends, we made it! With Firefox 151 container style queries working with custom properties entered the baseline. And it's funny, according to caniuse.com, Firefox is now the only browser supporting the full functionality? What a funny world!

And on the widely available side, the lh and rlh units are now very safe to use!

Three valuable projects to have a look at

oddbird/show-when – Shows or hides an element based on provided conditions.
yousifamanuel/terraink – Create unique and customizable map posters.
andremichelle/openDAW – Next-generation web-based Digital Audio Workstation.

A new Tiny Helper

Metric and render comparison of two fonts.

If you're fighting the web font fallback game to reduce layout shifts, Fontastic Space might be able to help out!

<a class="btn btn__small" href="https://fontastic.space/">Compare fonts</a>

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

Thought of the week

I use AI because I'm too scared of being left behind, but certainly I'm not sure if that's the job I fell in love with.

::: highlight quote

But [using AI] is different because it is not asking engineers to learn a new way of doing what they do. It is asking them to stop doing the thing that made them engineers in the first place and become something else entirely. :::

And if you now wonder if this newsletter is generated, it definitely is not.

Did you learn something from this issue?

❤️ If so, join 47 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 #194