Web Weekly #186
Guten Tag! Guten Tag! 👋
Are you struggling to understand why your anchor positioning doesn't work? Did you know that there's a window.stop() method? And did you ever wonder how to apply a theme color to Safari?
Turn on the Web Weekly tune and find some answers below. Enjoy!
::: highlight quote I am listening to "KRAFTKLUB - Marlboro Mann" and say:
I've seen Kraftklub live twice so far. The first time I was surprised by the excellent show. The second time I was truly amazed. This week, I'm going to see Germany's best live band for the third time, and I'm sure that I'll tear up while dancing my ass off. I can't wait! :::
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are six more songs left in the queue.
A huge thank you and a huge bag of karma points go to Paweł, Johann, and Corey 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! ❤️
If you enjoy Web Weekly, too, join 39 supporters on Patreon or GitHub Sponsors. It really makes a difference!
And if you learned something from this week's edition, share Web Weekly with your friends and family.
A quick "repost" really helps the newsletter out. Thank you! ❤️
No code
Don't Make Me Talk to Your Chatbot → "It's fine that people talk to chatbots, but they should not expect me to listen to theirs".
Nobody Gets Promoted for Simplicity → "Nobody gets promoted for the complexity they avoided".
Heads up: Chrome will adopt a new release cycle
Starting in September, Chrome will ship a new version every two weeks, and I already see these version numbers going through the roof. But honestly, more updates are a good thing.
<a class="btn btn__small" href="https://developer.chrome.com/blog/chrome-two-week-release">Catch up</a>
Do you remember theme-color?
The theme-color meta element used to color Safari's frame and configure a color for progressive web apps.
Turns out, Safari dropped the theme color support for "normal" websites. And yet, sometimes the Safari frame is colored in website colors.
What is going on? Martin investigated Safari's behavior.
<a class="btn btn__small" href="https://grooovinger.com/notes/2026-02-27-safari-26-header-background">Color the Safari frame</a>
Yes, this is a custom select!
Disclaimer: customizable select elements are still a Chromium-only thing, but man, look at this beauty!
<a class="btn btn__small" href="https://codepen.io/editor/cbolson/pen/019cbfe5-85da-7d31-a7de-44b6b35e7c1c">Select with style</a>
: and = in style queries
Style queries aren't supported in Firefox yet, so I must say that I didn't really play with them yet. But today I learned there's a difference between using : and =.
Whoot? Big thanks go to Temani for sharing yet another CSS pro tip!
<a class="btn btn__small" href="https://css-tip.com/if-trick/">Compare styles</a>
Problems with anchor positioning
I still haven't fully adopted anchor positioning, but I figured there are many edge cases, and sometimes I'm also just scratching my head. Temani covered many reasons why the anchors might not show up where you expect them to.
<a class="btn btn__small" href="https://css-tip.com/anchor-issues/">Master all these anchors</a>
And if you want to see Chris rant a bit, he also talks about common anchor positioning mistakes.
Style restrictions of the new geolocation element
And speaking of Chris, he also played with the new geolocation element (currently Chrome-only, and I covered it six weeks ago) and found some "interesting" CSS quirks of this new native element.
<a class="btn btn__small" href="https://frontendmasters.com/blog/the-enforced-accessibility-of-the-geolocation-element/">Style the location</a>
The wonderful weird web – A map of us
AMOU is a map of memories. People can share memories from a certain place. I've spent quite some time discovering all these unknown memories in my neighborhood. ❤️
<a class="btn btn__small" href="https://amapof.us/map">Discover memories</a>
npmx is having a moment
I plugged npmx in a previous Web Weekly, and while I thought the project was cool, I secretly didn't have high hopes of me using it. But I do! And the team is building a nice community around the project. Good stuff!
<a class="btn btn__small" href="https://npmx.dev/">Check packages with style</a>
A CSS state machine
Patrick tried to find a CSS-only way to store the information of whether an element was previously focused. The solution is hacky but also... elegant?
<a class="btn btn__small" href="https://patrickbrosset.com/articles/2026-03-09-using-css-animations-as-state-machines-to-remember-focus-and-hover-states-with-css-only/">Remember focus</a>
You Don't Know HTML Tables
Frank claims that I don't know HTML tables, and turns out he's right. This is a massive read, but I'm sure you'll learn a thing or two. I mean, did you know that there's a TOM (table object model)?
<a class="btn btn__small" href="https://blog.frankmtaylor.com/2026/03/05/you-dont-know-html-tables/">Level up your table game</a>
Creative ways to select :root
Temani and Daniel get into an unofficial competition about unconventional ways to select the :root element and some of these approaches made me smile. I love CSS.
Random MDN – stop()
From the unlimited MDN knowledge archive...
Here's a fun one: did you know that there's a global stop() method? Well, now you do!
<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/stop">Stop!</a>
TIL recap – Overwrite your dependencies' dependencies
Did you know that npm supports an overrides key in your package.json? If one of your dependencies is pulling in something nasty, you can fix the dependency right from the root level. Handy!
<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/how-to-override-your-dependencys-dependencies/">Fix your deps</a>
::: highlight info Find more short web development learnings in my "Today I learned" section. :::
New on the baseline — Trusted Types
With Firefox 148 and Safari 26, Trusted Types entered the baseline! 🎉 What are they for?
Whenever you're dealing with user-generated content, you can enforce content to pass a sanitization step before injecting it into the DOM. You can enforce this via CSP, too. Pretty cool!
<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API">Be safe</a>
Three valuable projects to have a look at
lokesh/color-thief – Grab the color palette from an image using just JavaScript. The demo site is pretty nice!
searlsco/posse_party – Crossposting content from your site to a variety of social media platforms.
webpro-nl/unbarrelify – Barrel file removal tool for JavaScript & TypeScript.
A new Tiny Helper
I can't be the only person who tries to transform a png to an svg at least once a month. I played with this converter a bit, and the results looked promising.
<a class="btn btn__small" href="https://svgconverter.online">Convert</a>
::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::
Thought of the week
Here's Matteo on everyone's "favorite" topic.
::: highlight quote
The human in the loop isn't a bug to be fixed. It's a feature to be protected. :::
Did you learn something from this issue?
❤️ If so, join 39 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! 👋
reader loved this