Are you excited about sizes="auto" landing in browsers? Did you ever run into issues with the bfcache and didn't know what to do? Or are you looking for a native way to lazy load videos?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are four more songs left in the queue.
A big thank you and a huge bag of karma points go to Mathias 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! ❤️
You can support Web Weekly on Patreon or GitHub Sponsors.
And if you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you!
Naming is hard, I get it. But it seems more like Microsoft has given up on giving AI features another name than copilot.
font-family fallbacks 
If you sometimes see Times New Roman flashing somewhere, Harry describes that the issue is most likely incorrect font-family properties. It might seem obvious, but I bet many people have these issues in their stylesheets.
bfcache problems 
Guilherme wanted to implement a quick and easy theme toggle on his site and discovered that sometimes things aren't that easy.
If I had kept it simple (just a regular dark mode using @media (prefers-color-scheme: dark) and light-dark()) I wouldn’t have hit so many problems.
I've discovered the same when implementing the theme toggle on webweekly.email. Regardless, it's a good read on the BFCache, pageshow events and how you can work around aggressive but very welcome browser caching behavior.
I remember when MDN got a little style overhaul last year, but I didn't realize that it was an entire rebuild to drop React. The team responsible realized that React might not have been the best choice because:
Our React app was merely a wrapper around our static content.
MDN is a massive collection of docs pages with occasional demo or UI sprinkles. So what are they doing now? The new (current?) MDN is built with a custom render pipeline and Lit web components.
The article is a great read to learn more!
Once a year, WebAIM analyzes the top 1,000,000 home pages for accessibility issues and it's been looking good (or at least better) for a while but now the overall state of the web is getting worse again.
There are now more errors, more ARIA usage and an overall worse experience.
Home pages with ARIA present had significantly more errors (59.1 on average) than pages without ARIA (42 on average)
This makes me sad.
Let's pretend I didn't play this game for fifteen minutes and still only made it to 62 jumps. 😅
canvas might become a thing 
Do you remember the times when some companies rebuild the entire DOM for better performance? Those were wild times (and obviously a pretty bad idea). But check this out, there's a new proposal to render HTML into the canvas element. It's pretty wild!
Granted, this is very cutting edge (Chrome Canary with a flag) and canvas stuff can involve a lot of heavy math, Matt shared some very fancy examples of what you can do with this.
Intl can localize units, too! 
This week I learned that you can use the built-in Intl object to localize and format numbers with units! I love love love it!
And side note: Intl is one of the hidden gems that we should all be using more. Kilian published a long guide explaining many more things you can do with powerful JS API.
@scope) 
If you open this post, make sure to read it to the end.
Safari 26.4 started to support name-only container queries (@container [name] {} without a condition). Chris discovered that name-only container queries could be used for CSS scoping similar to how CSS modules work. It's a valid and creative take, but here's the kicker: Miriam shared that you can do similar things with CSS @scope (the post was updated later on).
I'm still not 100% on the CSS scoping train, but this post definitely included some good-to-know details!
It's wild that we couldn't lazy load videos until now, isn't it? Scott and his team thought the same and fixed that by contributing to Webkit and Firefox. I love all of this. If you're curious about when it'll land and what needs to be considered when lazy loading videos, this post is golden!
ReportingObserver ![const observer = new ReportingObserver( (reports, observer) => { reports.forEach((report) => { log(JSON.stringify(report, null, 2)); }); }, { types: ["deprecation"], buffered: true, } );](https://images.ctfassets.net/f20lfrunubsq/6mA6nANToynVVOlFbbTXv/99dd922b716e1fcc5d033fe18cda8bf5/Screenshot_2026-04-13_at_13.58.11.png?w=800&fm=avif)
From the unlimited MDN knowledge archive...
Did you know that there's a JavaScript API to listen to reports like the usage of deprecated browser features? Now you do!
pathLength attribute 
You've probably seen these SVG effects that look like a line or signature is drawn. The most common solution to build these animations is to combine stroke-dashoffset and stroke-dasharray. And they work fine, but usually rely on some magic numbers that depend on the SVG path length (e.g. stroke-dasharray: 7151;). A while ago I learned that pathLength can make everything a whole lot easier.
sizes=auto 
Disclaimer: sizes=auto isn't on the baseline yet, but I'm so excited about it so that I'll plug it already. Responsive images are tough and many people implement them incorrectly. With sizes=auto we can provide the image sizes and let the browser figure out the rest.
There's one catch: images need to be lazy loaded so that the browser did layout already. Still, I think this is a much needed addition.
Where are we browser support wise:
Great times ahead!
If you're looking for a quick way to mock or prototype UIs or service architectures, Wiretext is a quick app to rock all these ASCII characters. I love the look of these diagrams!
Eric got into the complex topic of keyboard shortcuts and accessibility and this sentence is an absolute banger, isn't it?
Your web app is not the center of the universe.
❤️ If so, join 40 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 6.5k+ developers and
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。