Web Weekly #160
- Published at
- Updated at
- Reading time
- 11min
Do you know how to preload responsive images with the link element? Have you heard of the contrast-color() CSS function? And are you excited about the long-awaited Temporal JS API slowly entering browsers?
Turn on the Web Weekly tune and find some answers below. Enjoy!
One of Germany's best live bands announced a new tour and album, and I'm so there for it. So, let me sneak into the Web Weekly jukebox and listen to "KRAFTKLUB - Schief in jedem Chor":
I've known the German band Kraftklub for a very long time but only made the effort to see them live two years ago. And they blew me away! Kraftklub is now one of the very few bands making me tear up, dance and scream at the same moment. If you'll ever have the chance to see them live, you won't be disappointed!
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.
A quick "repost" really helps this indie newsletter out. Thank you! β€οΈ
Apple's yearly WWDC25 happened last week. Let's see what it brought to web and Safari 26 and look at my personal highlights.
But firstβSafari 26? Aren't we at 18 or something? Yes, but if I get this right, Apple unifies the version numbers of their operating systems and Safari to match the current year plus 1; meaning the current macOS 15 (Sequoia) is followed by macOS 26 (Tahoe) and Safari 18.5 will be followed by Safari 26. That's "okay" I guess, but focusing on version numbers seems like an odd priority right now...
The probably most overdue feature coming to Safari is that it will finally support SVG favicons. As PaweΕ puts it; this means that "this favicon mess is finally over". Hallelujah! If you ignore the fact that we have the year 2025 (2026? π€£) and the other browsers shipping SVG favicons for at least five years, this is a huge milestone. Congrats!
Next on: CSS anchor positioning! Anchor positioning lets us finally anchor one element to another which is perfect for tooltips and popovers. So far, I only briefly played with it via the Anchereum (think flex box froggy for CSS anchors) but now that the two main engines (Chromium, Webkit) ship this feature, it's time to learn it!
If you want to ship CSS anchor positioning in prod today and are looking for a polyfill, our friends at Oddbird have you covered.
Apple continues playing catch up with Chromium and also will ship scroll-driven animations. Nice! If you want to learn how to animate things on scroll, Bramus has a free online course on YouTube!
What's the browser support here? Firefox is missing, but has scroll-driven animations implemented behind a flag. Maybe they're coming quicker than we think but either way, animations make a perfect target for progressive enhancement.
Are these features all the Safari 26 bangers? There are also some minor JS additions, text-wrap: pretty and three new single engine CSS features: contrast-color(), margin-trim and progress(), but that's about it I'd say. Read the release post yourself to get a better idea.
However, is this release a step forward in silencing the "Safari is the new IE" voices? I doubt it. If you look at the current web platform tests checking the tests failing only in one engine, Safari is still leading by a good mark.
And, of course, as always, if you're up for some spicy takes Alex doesn't disappoint with "Safari at WWDC '25: The Ghost of Christmas Past".
Some of these points for proving you're a Frontend dev are just too good! My favorite β looked like a wizard in front of your non-tech friends by deleting a paywall. I love doing this in front of "normal people".
- You should participate in this year's "State of CSS" survey because I'm sure you'll learn something new.
This is kind of a wild story. Shopify relied on JavaScript import maps in their custom store fronts but some characteristics weren't working for them:
- import maps must be specified before loading modules.
- only one import map is allowed.
You might now think that this was a show stopper, but Yoav and Jake went on to change the import maps specification and landed the new behavior in Chromium and Webkit. That's what I call showing initiative.
As mentioned above, Safari now ships contrast-color() and while reading about it I discovered that the CSS function only resolves to black or white. Whoot? Everybody caring about color now probably says that this isn't really helpful. You shouldn't use pure black and white, right?
Side note: if black or white resolution is what you're looking for, here's a nerdy CSS snippet to make contrast-color() work today.
Either way, this post on the Safari blog explains many details on colors and contrast. It's worth a read!
Optional chaining (?) works across all engines for a while, but let me tell you I have feelings about it. It might be the code base I've been working with for a while, but I consider constant checks for property presence to be a code smell. Don't get me wrong, sometimes, it's essential to check if a property is available but if every property access includes a ? something's off!
Regardless, if you want to learn more about it, Matt's overview is quite good!
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
Neal, who you might know from the password game or the internet artifacts published another project called the "Internet roadtrip". It's a roadtrip on which you and your most favorite internet strangers decide on the destination collectively. So far, we all have driven over 3000 miles!
Firefox is the first browser shipping the new Temporal namespace. What's Temporal? Working with dates in JavaScript sucks. It was so bad that people gave up fixing the Date object and built things from scratch and the result are over 200 static utility methods.
Safari started working on it. Chromium seems not to have started. However, I'm super excited to finally have a date API with good DX. Alexander put together a quick overview.
![type Prettify\<T\> = { [K in keyof T]: T[K]; } & {};](https://images.ctfassets.net/f20lfrunubsq/5SF4ntLCL0QRHKXh6w1wdj/6278daf92869eadfb248364c18953b3a/Screenshot_2025-06-07_at_18.10.09.png)
Dang! This week I learned about a little prettify TypeScript trick which makes composed types more readable!
FYI β it looks like that similar functionality will land in TypeScript eventually...
According to the web almanac, the median sizes attribute is 16% too large on mobile and 43% too large on desktop. That's a lot if you consider that images are by far the heaviest asset on the web. But to be fair, writing correct markup for responsive images is tough. Maybe that's why we need Frontend developers who know what they're doing. π
However, if you're wondering if you're doing things right, I discovered this responsive images linter and it's worth double checking if you know about all the details!
Side note: if you discover the auto sizes value in there, theoretically you can forget about responsive images if they're lazy loaded but, unfortunately, auto sizing is still a Chromium-only thing.
Ryan Carniato (Solid.js maintainer) explains how frameworks like React, Vue and friends render things to the DOM and makes the point that there aren't many approaches to rendering at all.
Understand framework rendering
From the unlimited MDN knowledge archive...
text-box (shorthand for text-box-trim and text-box-edge) isn't on the baseline yet (Firefox is missing), but if you want to peek into the future of vertical text alignment, these properties are for you!
Speaking of responsive images, do you know you can preload them via the good old link element? Now you do!
Find more short web development learnings in my "Today I learned" section.
- tomnomnom/gron β Make JSON greppable!
- pomdtr/tweety β An integrated terminal for your browser.
- hugomd/parrot.live β Bringing animated parrots to terminals everywhere.
The new CSS shape() function will soon enter the baseline because we're only waiting for Firefox to flip the switch (it's currently behind a flag). Let me tell you, it's a pretty big deal because it finally allows us to define SVG-like paths with CSS values like percentages.
If you want to play around with it and transform your SVG paths to shape() paths this tool is for you!
Find more single-purpose online tools on tiny-helpers.dev.
I've been approached by a "newsletter creator" for a cross-promo the other day. This happens all the time and isn't a big deal. If the content fits, I'm game for helping each other out in the creator / curator space.
The catch: the newsletter was entirely automated. A cron job scanned Reddit (or whatever) for the most engaging posts, fed the result into an LLM and spit out a newsletter summary. Great stuff! Of course, it's not.
Like many people today, this person didn't care. The person didn't care about putting in the work of discovering (and reading) good content, producing good quality or bringing in some sort of personality into their writing.
Where we're heading is just sad. Dan thinks that this status quo is disheartening and, oh boy, as someone spending countless hours on providing of what I think makes good and valuable content it really hit me β because I care. More people should care because otherwise what's the point in creating mediocre AI content that's consumed by AI?
In the Who Cares Era, the most radical thing you can do is care.
β€οΈ If so, join 23 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.
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! π
Join 6k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.