Guten Tag! Guten Tag! 👋

Have you heard of Chrome's soft navigations? Do you parse the sec-fetch header to prevent CSRF? Or do you know that elements with overflow: hidden are still scrollable?

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

::: highlight quote Pablo listens to ROSALÍA - Berghain and says:

Rosalía's Berghain (& the LUX album) are real masterpieces. Berghain has passages in German, showing us in the key of Opera what Hildegard of Bingen was experiencing, who saw "the reflection of the living Light" as a vision of God. Rosalía's Berghain translates in German the religious visions as "The flame penetrates my brain Like a lead teddy bear". I absolutely recommend listening to this album, sung in German, French, Catalan, Italian, Ukrainian, Japanese and Spanish. :::

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are six 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! ❤️

No code

Developing Taste → "Expose yourself to great work, this way you’ll learn how greatness looks and feels like."
Why Am I Doing the Thinking for You? → "when you ask someone 'what do you think?' without sharing what you think, you’re not collaborating, but more like outsourcing?"

Soft navigations in Chrome

What is a soft navigation? We came up with the following definition: The navigation is initiated by a user action. The navigation results in a visible URL change to the user, and a history change. The navigation results in a DOM change.

This is probably old news for all the performance experts, but I learned this week that Chrome has been experimenting with a new navigation type for a while: soft navigations.

The goal is to gather common web vitals across JS-navigations in single-page apps. I'm game!

<a class="btn btn__small" href="https://developer.chrome.com/docs/web-platform/soft-navigations-experiment">Measure!</a>

Laws of UX

Postel's Law "Be conservative in what you send, be liberal in what you accept."

Just in case you want to be the person quoting UX laws in your next interface discussion, Raphael put together a nice guide with interactive examples.

<a class="btn btn__small" href="https://www.userinterface.wiki/laws-of-ux">Follow the law</a>

`setHTML` is coming to Firefox

Firefox became the first browser shipping the new setHTML method. What's wrong with good old innerHTML? innerHTML and older ways to change the DOM were all open to XSS attacks.

setHTML finally tries to fix this!

<a class="btn btn__small" href="https://hacks.mozilla.org/2026/02/goodbye-innerhtml-hello-sethtml-stronger-xss-protection-in-firefox-148/">Don't allow XSS</a>

Yet another way to center elements in CSS

.element { position: absolute; place-self: center; inset: 0; }

Here's Juan sharing another way to center absolutely positioned elements in CSS.

I don't have anything else to say other than that centering things in CSS is a solved problem in 2026, don't you think?

<a class="btn btn__small" href="https://css-tricks.com/yet-another-way-to-center-an-absolute-element/">Center everything</a>

Side note: and if this post isn't enough, here's another post explaining how margin: auto can help with absolutely positioned elements, too.

The wonderful weird web – `aem1k`

A minified JavaScript code snippet looking like a spinning globe.

Martin is a fairly famous code golfer and man... every time I see his work I'm blown away.

What's code golfing? When you're code golfing, you're trying to use the fewest possible characters. This is hard and complicated in itself already, but Martin pushed this even further.

Do you see this ASCII globe there? 👆 This globe is the script that renders itself. Unbelievable!

Here are my favorites:

<a class="btn btn__small" href="https://aem1k.com/">Be amazed</a>

TIL - tabs and newlines are removed from URLs

Example link including news lines and tabs and it still works because these characters are removed by the browser

Well, did you know that browsers remove newlines and tabs from link URLs? I definitely didn't!

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/new-lines-are-removed-from-whatwg-urls/">Break things apart</a>

`sec-fetch` as modern CSRF protection

The so called "modern" method to protect against CSRF attacks is based on the Sec-Fetch-Site header, which all modern desktop and mobile browsers include in the requests they send to servers.

Cross-Site Request Forgery (CSRF) is an attack in which an attacker tricks a user's browser into making an unintended request to a site where they might be logged in. If someone is on evil.com and the browser makes a POST request to my-bank.com, it could go through because all cookies are sent with it. Not good.

To protect yourself, many sites implement CSRF tokens to ensure that the user is really on the site when the request is made. But there's a header that we can use since 2023: sec-fetch.

Miguel shared this discovery in December and the MDN docs on CSRF are also quite good. Enjoy and be safe!

Does this demo still count as a `select`?

I shared that customizable selects are coming to the web in Web Weekly 183. They're still Chromium only, though.

Now, Temani pushed the concept to the next level and I'll let you decide if you would call this experience a select box.

<a class="btn btn__small" href="https://codepen.io/t_afif/pen/PwGPJOB">Pick a fruit!</a>

Random MDN – `:open`

An open date input which is styled blue because the date picker is open.

From the unlimited MDN knowledge archive...

Here's a little party trick: do you know that input elements with a picker like select or date inputs also support :open? You're welcome!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:open">Style the open</a>

Side note: while looking at :open I discovered that Safari still doesn't support it? Not even for details elements? I'm a bit disappointed...

TIL recap – `overflow: hidden` is still scrollable

Do you know that elements with overflow: hidden set can still be scrolled? If you don't, check out the blog to learn which property prevents scrolling.

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

New on the baseline: `rcap`, `rch`, `rex` and `ric`

Browser support table for rcap, rch, rem, rex, and ric

Firefox started to support the relative <length> CSS values: rcap, rch, rex and ric.

Granted, these units are a bit niche, because how often do you need to style something based on the width of the glyph 0 (rch)? But it's still good to know they exist.

And cap isn't actually that exotic: here's how the cap unit can help with vertical alignment.

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length#browser_compatibility">Use the fancy relatives</a>

Classifieds & friends

If you're based in the Netherlands and would like to go to the JS Nation conference (June 11 & June 15), I've got one ticket to give away for free! Hit reply and let me know! And even if you don't win, Web Weekly readers get 10% off with the code WEBWEEKLY. 🎉

Three valuable projects to have a look at

thisiskps/fetch-network-simulator – A request/response network behavior simulator for frontend applications.
dlvhdr/diffnav – A git diff pager with a file tree, à la GitHub.
edge-js/edge – Node.js template engine with a breath of fresh air.

A new Tiny Helper

Graph from CruxViz showing overall green Core Web Vitals

CruxVis isn't a new tool, but I'm sure some of you haven't seen it.

If you want to check a site's Core Web Vitals coming from real users via Crux, the site offers quick-to-use graphs and visualizations.

<a class="btn btn__small" href="https://cruxvis.withgoogle.com/">Check your Vitals</a>

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

Thought of the week

One might think Ibrahim has a point here. 🫣

::: highlight quote

When a customer reaches for your chatbot, it's not because they think chatbots are cool. It's because you've failed them. :::

Did you learn something from this issue?

If so, join 37 other Web Weekly supporters and earn a huge bag of karma points by supporting Web Weekly via 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 #185