Web Weekly

Web Weekly #190

Sun, 19 Apr 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Do you use image-set for background images in CSS? Have you used Wakamai Fondue to analyze your variable fonts? And do you know that field-sizing isn't only about textareas?

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

::: highlight quote Jesper listens to Yttling Jazz — "Illegal Hit" and says:

This is a song that helps me keep my head up during winter and look forward to spring! :::

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

Let's kick things off with some quick-to-read accessibility resources that didn't fit elsewhere!

Not new, but still relevant: Adrian shared Where to Put Focus When Opening a Modal Dialog. It comes with the banger opener:

Blanket statements about where to put focus when opening a modal dialog are wrong, including this one.

I also discovered Steve's post explaining that hidden content still makes it into the computation of an element's accessible name. This fact is important when you're connecting error messages with aria-describedby and hiding a possible error with display: none. The error won't be visible, but it'll still be part of the accessible name computation. Not good.

And lastly, Manuel reminds us all that box-shadow isn't an alternative to a proper outline! Let's stick to the defaults.

I'll share some more accessibility resources next week. Is there anything great I should include?

A big thank you and a huge bag of karma points go to Daniel who provided a new testimonial! If you have something nice to say about Web Weekly or want to support indie publishing in the times of cheap AI slop, reach out.

You can support Web Weekly on Patreon or GitHub Sponsors. We're currently at 40 supporters, and I'd love to hit the magical 50. ❤️

And if you enjoy Web Weekly, share it with your friends and family.

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

A quick "repost" really helps my indie newsletter out. Thank you!

::: highlight sponsored

Build any web layout, with confidence.

The Layout Maestro is a written, interactive CSS course that teaches you how to think, build, and debug layouts, not just memorize properties. It covers flexbox, grid, :has(), and container queries. Use the coupon code WEBWEEKLY for $50 off.

Level up your layout game

Side note from me: I plug Ahmad's interactive blog posts from time to time, and looking at all the outstanding resources he's published over the years, I'm sure this course is more than worth it! :::

Something that made me smile this week

Jack learned that there are "only" 84k Firefox extensions out there and thought "Challenge accepted. I'm gonna install them all!" while documenting his journey.

YOU CAN (barely) RUN FIREFOX WITH ALL 84 THOUSAND EXTENSIONS.

Who would have guessed. 😅 Man, I love the internet.

Install them all

No code

The unwritten laws of software engineering → "It took me embarrassingly long to learn that when production breaks and you recently deployed anything, you shouldn’t spend an hour proving your change is innocent..."
What, then, are we paying for? → "Paying for software isn’t paying for a solution. It’s paying for someone else to own a problem."

Analyze your font's features set

You know, I'm no font or typography nerd but occasionally I need to inspect what features are included in a font. Font features? Yes! There are variable font axes controlled via font-variation-settings or open type features controlled via font-feature-settings.

But how can you inspect a font and know what you can do with it? Well, Wakamai Fondue just hit v1.0, and it looks great!

Get nerdy about fonts

More view transition tools and resources

After plugging Bramus' View Transition Toolkit two weeks ago, people pointed me to the "View Transition Bag". It includes plenty of resources and yes, view transition tools are included, too!

Level up your transitions

Modern features misbehaving in the shadow DOM

Granted, it's been a minute since I've used the shadow DOM with web components, but today I learned that there are quite a few issues with modern web features when crossing the boundaries.

For example, cascade layers, container queries, @scope, and @property can behave differently between light and shadow DOM.

The team behind Adobe Spectrum started documenting some common issues.

Know what works

`sizes=auto` requires `width` and `height`

elements have width and height attributes.">

Here's a quick addition from last week's sizes=auto update. I'm still super excited about it and Eric reminds us that you need to define width and height attributes. You probably do that anyways, but I thought it'd be good to share that with you!

Help the layout

Smart: using fallback values to work around layer clashes

David uses cascade layers and has run into a problem. The style requirements were colliding with the defined layer order. He used a smart trick to work around clashing layers.

Keep things flexible

Side note: David also shared that !important works across layer boundaries. Can someone explain that to me?

The wonderful weird web – Train Jazz

Unfortunately, the Train Jazz doesn't work for Berlin (does it work for your city?). The site plays jazz music depending on a city's train/subway data. Is this very useful? Probably not, but I love everything about this! ❤️

Listen to some trains

A nifty flexbox trick

Granted, the title of this blog post is a bit misleading (container queries using break points still use... breakpoints), but I enjoyed this little flexbox snippet! 👆

Flex!

Squashing and stretching animations

Josh published a new post, and we all know what this means. There's a new high-quality post available including lots of demos and eye candy. I must admit I've forgotten about the ability to overwrite the SVG d attribute in CSS and am still on the fence about whether that's a good idea. 😅

Apply animation principles

Make interfaces feel better

Granted, everything in this post is also packaged up as an AI skill, but the advice on building good-looking UIs is solid. I wasn't aware of this little outline trick at the end.

Polish your interfaces

Why do some images look brighter than the rest?

Tom came out of nowhere and finally explained to me why some images on my Mac are glaring on my screen. There are chances you haven't seen what I'm talking about, but for me on my MacBook Pro using the Signal App (it must be Electron-based), sometimes I receive a photo and it almost feels like the rest of the screen is getting darker because the image is so bright. Turns out, some hardware/software combinations simply display HDR images. Wow!

Understand images

Random MDN – `transition-behavior`

From the unlimited MDN knowledge archive...

Everybody was talking about transition-behavior a year ago. Do you use it? The CSS property allows you to finally combine property transitions including display. And the best thing, it's been on the baseline since 2024!

Change the behavior

TIL recap – `field-sizing` doesn't only work for `textarea`s

field-sizing enables textareas to automatically grow. And that's great, but do you know that it works for "normal" inputs and select boxes, too?

Resize your elements

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

New on the baseline

After including baseline updates for quite a while here, I realized I'm riding pretty much on the cutting edge. And many folks are also interested in the baseline "widely available" updates. So here we go!

Do you know that you can use image-set to serve different background images right in CSS? Now you do and image-set is "widely available" since last month! 🎉

Be responsive

And I'm sorry but I can't help it and I know you're also waiting for some cutting-edge stuff: the team over at Mozilla added container style queries support to Firefox Nightly, which means it's slowly time to start looking into them. Bam!

Three valuable projects to have a look at

thoughtfulllc/gridland – Terminal apps that run anywhere - even the browser!
getelena/elena – A simple, tiny library for building Progressive Web Components.
meodai/heerich – An engine for 3D voxel scenes rendered to SVG. 👈 That one's very fancy!

A new Tiny Helper

Now, I'm not sure if it's a good idea to have complex vector graphics like the above in CSS, but hey. Temani updated his SVG to CSS tool and it now supports multiple path elements. So if you ever wanted to transform SVGs into clip-path (or the new border-shape) properties, this tool is for you!

Clip all the paths

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

Thought of the week

Ezhik's post really hit a nerve with me. The world is changing. Heck, our entire industry and profession might be completely turned on its head. I'm beyond scared. What puzzles me the most is that quality might become less important.

Many builders, designers, and [insert whatever digital profession you like] slowly lose the desire to create high-quality "things". Many are totally fine with generating something quickly. Done is better than perfect, right? And this approach might be alright. For many teams and companies it's always been like that. In the end, everybody can build whatever they like. It is how it is.

However, what scares me is the other side. And of course, that's not true for everybody, but does the majority out there care about a stellar product that took months to build? Do people care about a well-researched article? Does it matter if someone actually put in the work?

I know this is a downer to close this Web Weekly, but I'm honestly not sure anymore.

::: highlight quote

I'm terrified of the good enough to ship — and I'm terrified of nobody else caring. :::

Did you learn something from this issue?

❤️ If so, join 40 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 #189

Sun, 12 Apr 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

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!

::: highlight quote Boris listens to Wheatus - Teenage Dirtbag and says:

I'm currently rediscovering Teenage Dirtbag and the story behind the song. Maybe you'll find it interesting too! :::

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.

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you!

::: highlight sponsored

Practice Real Frontend Interviews

FrontendAtlas helps frontend engineers prepare with practical coding challenges, frontend interview questions, and a frontend system design blueprint. Built for JavaScript, React, Angular and Vue interviews — with implementation-heavy practice instead of generic puzzle grind.

Start practicing for free

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do! :::

Something that made me smile this week

Naming is hard, I get it. But it seems more like Microsoft has given up on giving AI features another name than copilot.

Name everything the same

No code

If you thought the speed of writing code was your problem - you have bigger problems → "If you want to ship faster, look at where things are waiting."
I Tried Vibing an RSS Reader and My Dreams Did Not Come True → "The making from nothing isn't as hard anymore. But everything after that still is."

Not existing `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.

Fall back properly

`bfcache` problems

{ if(event.persisted) { let theme = localStorage.getItem('theme'); let root = document.documentElement; root.classList.remove('light-theme', 'dark-theme'); if (theme) { root.classList.add();}}});">

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.

Tweak the cache

Why (and how) MDN was rebuilt without React

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!

Consider simple architecture

The accessibility report of the top 1,000,000 home pages

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.

Look at sad numbers

The wonderful weird web – 100 jumps

Let's pretend I didn't play this game for fifteen minutes and still only made it to 62 jumps. 😅

Jump!

HTML in `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.

Render HTML

TIL — `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!

Format your numbers

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.

Scoping with name-only container queries (or `@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!

Scope your styles

New to the platform: lazy loading video

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!

Delay all the heavy videos

Random MDN – `ReportingObserver`

{ reports.forEach((report) => { log(JSON.stringify(report, null, 2)); }); }, { types: ["deprecation"], buffered: true, } );">

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!

Read the reports!

TIL recap – the `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.

Animate all the paths

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

Soon on the baseline - `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:

✅ Chromium already supports the attribute
⌛ Firefox will support it in two weeks with 150
⌛ Webkit shipped it in tech preview

Great times ahead!

Three valuable projects to have a look at

SacDeNoeuds/yawn – A Frontend framework built on async iterables.
kamranahmedse/slim – Give your localhost a local or public URL.
unmta/emailmd – Render markdown into email-safe HTML.

A new Tiny Helper

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!

Draw with text

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

Thought of the week

Eric got into the complex topic of keyboard shortcuts and accessibility and this sentence is an absolute banger, isn't it?

::: highlight quote

Your web app is not the center of the universe. :::

Did you learn something from this issue?

❤️ If so, join 40 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 #188

Sun, 05 Apr 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Have you heard about the CSS sticky spec change? Or have you used the position-visibility property before? And are you aware of the new JavaScript features landing in 2026?

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

::: highlight quote Mark listens to "Jet Black" by Fletchr Fletchr and says:

An anthemic crashing guitar explosion, "Jet Black" ruined a perfectly good nap in the sun for me at Boardmasters Festival this summer by erupting on stage, and it's gone on heavy rotation since. :::

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.

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

A big thank you and a huge bag of karma points go to "vaupeh" 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.

No code

The last quiet thing → "Nothing you own is finished. Everything exists in a state of permanent incompletion, permanently needing."
Don't Let AI Write For You → "Letting an LLM write for you is like paying somebody to work out for you."
AI Shrinks the Team, Not the Problem → "Reducing the team [because of AI] does not reduce the number of things that can go wrong. It reduces the number of people available to own them."

Use `subgrid` to deal with "controlled" content

* { grid-column: main; } }">

Short'n'sweet: David explains how CSS subgrid (available across browsers since September 2023) helps with laying out content coming from CMS systems.

Lay out!

TS Type guards vs. assertion functions

While reading Absorbing unknown Into the Type Realm I learned a new TypeScript thing. Usually, I'm going for type guards to narrow types, but with assertion functions (asserts data is Something) you can narrow the type inside of the current scope. No ifs or anything like that needed. Good stuff!

Narrow things down!

What to know in JavaScript 2026

CSS has been so much on fire that it sometimes feels as if nothing is happening in JavaScript land. Chris was so kind and summarized what you need to know this year!

Stay up to date!

Everybody's raving about `pretext`

The pretext project is only one month old and already gained 40k GitHub stars. People are excited. Why?

pretext is a "JavaScript/TypeScript library for multiline text measurement & layout". That means you can give it some text and it'll figure out how much space the text will need. Under the hood it normalizes the input text and then uses canvas.measureText() to get the size and layout information. I didn't even know that measureText is a thing in canvas land.

Now, some of the demos are very impressive but I agree a lot with Donnie's take. Just because something can be done in JS, it doesn't mean it needs to be done with it. And also, CSS is moving fast, some of the layout issues might be resolved sooner than later if enough people show interest. What's your take?

Be fancy

The View Transitions Toolkit

Bramus released a new npm package full of view transition utilities. The GitHub docs are also worth a read if you want to learn more about view transition inner workings. For example, I didn't know that you can pause view transitions.

Level up your transition game

Side note: while playing around with all these snippets I've also run into the situation of view transitions blocking document interactions. Luckily, Bramus had a fix for that one, too.

The wonderful weird web – `CSS-or-BS`

I must admit this was harder than I thought! Are you certain you can differentiate real from made up CSS properties?

Decide!

The `human.json` protocol

More and more content is primarily generated without any human reviewing things. The human part is more at danger in our beloved web. To counter this movement, I've seen multiple people implement the human.json protocol. People can vouch for each other so that we can build a network of trust. Should we all get on board?

Trust your fellow webmaster

`light-dark()` works soon for images

The light-dark() CSS function was limited to color values but very soon will work for images in CSS, too. It'll land in Chromium and Firefox soon. Let's see when Safari joins the party.

Flip some images

A `sticky` CSS spec change

A nine-year-old CSS spec issue has been resolved and position: sticky now tracks the nearest scrolling container per axis. So, if you want to stick an element to a scroll container and the document, this will soon be possible. As usual, today, we're still in Chromium only land. Still, great that this landed!

Stick!

Edge's experimental network efficiency guardrails

Now, that's cool! Edge is experimenting with a new way to track and report low-quality network resources. The initial criteria are uncompressed text resources, images larger than 200 kB and data URLs larger than 100 kB. I'm game!

Watch out

CSS containment explained

Harry has a gift for publishing reference pieces. This time the new article is about CSS containment (contain, content-visibility or contain-intrinsic-size). It's a stellar piece and if you wonder how to save the browser some rendering and recalculation work, you should check it out!

Save some work

CSS containment can be used in other situations, too, though. Ryan explained how contain helped with a tricky layout situation.

Random MDN – `position-visibility`

From the unlimited MDN knowledge archive...

Now that anchor positioning works across browsers, do you know that there's a CSS property to control when an anchored element is shown?

Hide and seek

TIL recap – Forbidden `fetch` headers

Did you know that you can't set all the headers in your "common" fetch calls?

Stay in your lane

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

New on the baseline

I'm not sure I'll ever use this but if you're into typography and fancy text layouts, you might dig it. The text-indent values hanging and each-line are now supported across browsers.

Move your text around

Three valuable projects to have a look at

jaywcjlove/awesome-mac – A collection of high-quality macOS software.
unhappychoice/gitlogue – Turn your Git history into a living, animated story.
zhw2590582/ArtPlayer – A modern and full featured HTML5 video player.

A new Tiny Helper

If you're looking for a quick way to pixelate images, this tiny helper is for you!

Pixelate

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

Thought of the week

So true.

::: highlight quote

Software engineering projects are not dominated by the known work, but by the unknown work, which always takes 90% of the time. :::

Did you learn something from this issue?

❤️ If so, join 40 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 #187

Mon, 16 Mar 2026 23:00:00 GMT

Guten Tag! Guten Tag! 👋

Have you heard of focusgroup? Did you try aliases in Node.js imports already? Or do you know that CSS is available in JavaScript?

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

::: highlight quote Mario listens to "Ethel Cain - Waco, Texas" and says:

This is my kind of opera. :::

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

Web Weekly housekeeping

A big thank you and a huge bag of karma points go to Jonathan 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! My little side project is now supported by 40 people. This makes me incredibly happy (and proud). ❤️

You can support Web Weekly on Patreon or GitHub Sponsors.

And also, I messed up a link last week. I clicked all the links before sending the email, but because last week was an "unofficial Temami edition", I didn't recognize that I linked to the wrong post. Here's the correct link to anchor positioning issues. Sorry!

No code

I didn't discover good "No code" articles this week. Did you read something great beyond coding lately? I'd love to read it, too!

`color-contrast()` beyond black & white

With Chrome 147 (planned for Mar 25), the contrast-color() function will be newly available across all browsers. Theoretically, the function lets you throw a color in and get an accessible contrast color out. It's a great idea, but contrast-color() is limited to returning black or white right now.

Una describes how to work around this limitation.

Mix all the colors

Form-associated custom elements

Granted, Rob's article is very long, but the intro paragraphs make it worth reading already.

I've seen the attachInternals() method quite a few times in custom elements materials, but I never really understood what it's about.

Now I do, and it's quite cool if you're dealing with web components. Thanks, Rob!

Attach your inputs

A new `focusgroup` RFC

There's a new HTML feature shipping behind a flag in Chromium: focusgroup. The idea is that the attribute will make it easier to build components that require custom focus handling.

It's also wild that a focusgroup is supposed to set the correct ARIA roles automatically. If this works, maybe that will make the web a bit more accessible? I've heard some skeptical voices already, though.

Browsers are asking for feedback, so now is your chance!

Test it out!

Stop checking for view transition support

You've probably written this snippet many times by now. 👆 Even though view transitions have been cross-browser supported for a while, you still have to check every time if they're available with if (document.startViewTransition). What if you didn't have to do that? Bramus released a non-visual polyfill.

Remove some ifs

The wonderful weird web – JND

Today I learned about JND: Just Noticeable Difference. Keith built a fun little game for your lunch break. To what point can you differentiate the colors?

Look closely

Native JSON modules with import attributes

You can load JSON files via import attributes (that's the fancy with syntax) across modern browsers for roughly a year now. But how do import attributes affect caching? And are they really that much better than what bundlers already provided for years? Matt has some answers.

Import your JSON

Even more customizable selects

I know that I plugged a great-looking select last week already, but man... I'm very much into these new ways of customizing select elements. Patrick's article comes with many explanations this week.

Select!

Feature detection of at-rules

Disclaimer: at-rule() is far from being cross-browser supported and will only hit Chrome in version 148 (we're currently at 146), but it's still cool that we'll be able to check support for at-rules (e.g. @starting-style) in the future.

Detect

Node.js subpath imports

Do you know that you can set custom import paths in vanilla Node.js? If not, John explains how they work. He's kind of skeptical about the idea, but I'm really digging it!

Shorten your imports

Random MDN – CSS `.to()` in JS

From the unlimited MDN knowledge archive...

Here are two fun ones. First, do you know that CSS exists in JavaScript? And second, how cool is it that you can convert one unit into another?

Convert

Disclaimer: .to() doesn't work in all browsers yet but will land in Firefox soon!

TIL recap – `svg` elements can be nested

Here's a quick learning from eight years ago: did you know that you can nest svg elements? Now you do!

Nest all these SVGs

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

New on the baseline — CSS `shape()`

With Firefox 148, the CSS shape() function entered the baseline, which means that you can now pair offset-path or clip-path with a function that understands CSS. That's right! No more SVG syntax fiddling!

Shape!

Three valuable projects to have a look at

arktypeio/arktype – A TypeScript validator that's optimized from editor to runtime.
mcollina/snipgrapher – A CLI to generate image snippets from code files.
jalonsogo/tui-studio – A visual design tool for building Terminal User Interfaces.

A new Tiny Helper

As a WW subscriber, you should be pretty well aware of what's going on with browser features and the baseline. If the newsletter isn't enough, BaseWatch looks great!

Stay up to date

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

Thought of the week

Here are some wise words from one of my favorite bloggers.

::: highlight quote

Data tells you what people consume, not what you should make. [...] "What is happening?" and "What should happen?" are two completely different questions and should be dealt with as such. :::

Did you learn something from this issue?

❤️ If so, join 40 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 #186

Mon, 09 Mar 2026 23:00:00 GMT

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.

🦋 Bluesky
🐘 Mastodon
💼 LinkedIn

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.

Catch up

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.

Color the Safari frame

Yes, this is a custom `select`!

Disclaimer: customizable select elements are still a Chromium-only thing, but man, look at this beauty!

Select with style

`:` 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!

Compare styles

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.

Master all these anchors

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.

Style the location

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

Discover memories

`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!

Check packages with style

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?

Remember focus

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)?

Level up your table game

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!

Stop!

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!

Fix your deps

::: 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!

Be safe

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.

Convert

::: 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! 👋

Web Weekly #185

Mon, 02 Mar 2026 23:00:00 GMT

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

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!

Measure!

Laws of UX

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.

Follow the law

`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!

Don't allow XSS

Yet another way to center elements in CSS

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?

Center everything

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`

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:

Be amazed

TIL - tabs and newlines are removed from URLs

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

Break things apart

`sec-fetch` as modern CSRF protection

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.

Pick a fruit!

Random MDN – `: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!

Style the open

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.

Clip it!

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

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

Firefox started to support the relative 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.

Use the fancy relatives

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

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.

Check your Vitals

::: 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 #184

Mon, 23 Feb 2026 23:00:00 GMT

Guten Tag! Guten Tag! 👋

Have you ever struggled with lazy loading videos? Or have you used CSS zoom before? And do you know what Map.getOrInsertComputed does?

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

::: highlight quote André listens to "Ordinary" by Alex Warren and says:

This is genuinely one of the most beautiful songs I've ever listened to. It landed instantly on my short-list playlist of personal 'masterpieces' — the kind of songs that feel timeless to me, alongside classics like 'The Sound of Silence'. It's emotionally honest, restrained, and quietly powerful in a way that really stays with you. :::

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

This Web Weekly turned out very beefy already, so I'll keep the intro short. I discovered modern.css and it's outstanding.

The site lists old practices next to their modern counterparts. I'm sure you'll learn some new tricks by simply browsing around. Highly recommended!

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

On screwing up → "Managers will forgive mistakes, but they won't forgive being made to look like a fool".
14 More lessons from 14 years at Google → "Most meetings fail not because they're unnecessary, but because they're disguised journaling".
The Unbearable Joy of Sitting Alone in a Café → "When you let your thoughts wander, they take you on a journey you'll never think possible".

New on the blog

Web Weekly Housekeeping

Since I doxed my inbox two weeks ago asking for more replies, I've been having many nice email conversations. And because I enjoy this, let's keep the housekeeping going for a bit longer.

Question this week: many people told me that Web Weekly is a bit too long at times. I can totally relate to this. And frankly, writing Web Weekly is a ton of work.

So, what would you cut? I'm torn because I actually like it as is. Reply and let me know!

Oh and a quick reminder: Web Weekly is open for sponsorships. If you want to reach 6.5k developers, you know what to do!

An in-depth guide to customizing list styles

If you want to spice up your list styling going beyond some bullets or numbers, Richard dropped a massive article explaining ::marker, @counter-style and symbols(). My highlight: I had forgotten that list-style-position is a thing...

List with style

TIL — CSS `zoom`

I've seen the zoom property before but I didn't realize that it can actually be pretty dang useful. If you want to learn more about the difference between zoom and scale, check out this demo on the blog.

Zoom!

The web breaks free from rectangles

If you had told me that one day I'd be excited about a property called border-shape, I wouldn't have believed you. And yet, here we are. Una shared the new CSS property coming to Chrome that allows you to actually "shape" elements.

Unlike clip-path, which simply masks an element, border-shape actually redefines the "box" itself. When you apply a shape to a border, the background, the border-image, focus outline, and the box-shadow all follow that new geometry.

Shape the web

Safer JS error checking

Short and sweet: Matt explains why Error.isError is the way to go for error checking.

Check the error

The wonderful weird web – Kaomoji Cool Club

Did you know that these "emojis" are called Kaomoji? "Kaomoji" is a mix of the Japanese words "kao" 顔 (face) and "moji" 文字(character). Today I learned. And if you want to snatch some of the funky faces to look cool, that's what the Kaomoji Cool Club is about!

Express yourself with Unicode

Lazy loaded videos are coming to the web

Scott and his team at Squarespace are working on bringing loading="lazy" to video and audio elements, and it's wild that we didn't have this in 2026, isn't it?

Defer the heavy load

Side note: Scott was also behind pushing browser vendors to add responsive video support, and I honestly think that his "little side projects" are very inspiring.

Are image sprites still a thing?

Josh got into the topic of image sprites which, I must admit, I haven't used in at least a decade. But because Josh's posts are always so much fun to read and he explains object-fit, object-position and the animation step() function, it's definitely worth a read!

Remember sprites

Yet another list of web dev stuff

You probably know about caniuse.com. But do you know about caniemail.com? Or canidev.tools, whocanuse.com and cssdb.org?

I love a good list, and canwe.dev lists all these utility webdev sites.

Get some resources

New in Chrome DevTools — `Render blocking`

If you care about web performance, you probably check for render-blocking resources. Chrome supports a handy JS API to discover all these offenders.

And there's now a new column in the network panel giving you this information.

Random MDN – `text-box-trim`

From the unlimited MDN knowledge archive...

Unfortunately, text-box-trim doesn't work in Firefox yet, but man, I can't wait for this to work everywhere because it will make vertical alignment so much easier!

Align

TIL recap – `text-transform` can affect screen readers

Did you know that text-transform: uppercase can affect how screen readers read out the content? Well, now you do!

Be aware

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

New on the baseline — new `map` methods

; console.log(map.getOrInsertComputed("baz", defaultCreator)); // Expected output: "default for baz"">

JavaScript maps got two new methods to access entries while providing fallback values: getOrInsert and getOrInsertComputed. The method names are a bit too wordy for my taste, but I dig that getOrInsertComputed allows you to evaluate the fallback lazily.

Three valuable projects to have a look at

auroris/logo-soup – A JS library to normalize and harmonize logo visuals.
seflless/slowmo – Slow down, pause, or speed up time of any web content.
Veirt/weathr – A terminal weather app with ASCII animation.

A new Tiny Helper

If you're looking for a quick way to update and tweak SVG files in code, svg.studio will help you out!

Tweak all the SVGs

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

Thought of the week

Nolan shared his thoughts on how AI might be changing programming, and of course, I can relate. I love coding. I love the puzzling part and am excited about learning things. But will all these things still matter? We'll find out soon enough.

::: highlight quote

My immediate fear isn't that I'll be out of a job. My fear is that I'll lose the part of my job that I love the most. :::

Did you learn something from this issue?

❤️ If so, join 37 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 #183

Mon, 16 Feb 2026 23:00:00 GMT

Guten Tag! Guten Tag! 👋

Have you checked what's included in Interop 2026? Do you know about the using declaration in JavaScript? And are you excited about the new ways to style select elements?

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

::: highlight quote Paweł listens to "Tarika Blue - Topic" and says:

This one is another sample that I was shocked to discover. My beloved Erykah Badu used a sample of this song in her "Didn't Cha Know". I love everything by Erykah, and I love jazz music, so this song is a perfect combo for me. :::

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

The biggest news this week was that the Interop 2026 initiatives were released. If you don't know, Interop is a cross-browser initiative to align on which web features should ship in the upcoming year. Generally it's good stuff and many appreciate browsers going into the same direction (even though not everybody agrees with the focus topics).

Last year's Interop included bangers like Anchor Positioning, View Transitions, and @scope, and the results were pretty good at the end of the year.

But what's included this year? Here's the full list from the WebKit blog.

I haven't had the time to dive in yet, but this looks like a decent list, and I might go deeper next week. I do miss sizes=auto for images, though.

But I'm not complaining, so let's get to the web dev goodies of this week!

Web Weekly housekeeping

Last week I asked you to reply to this email to check if it would improve this newsletter's open rate. And well... it was quite a week. I doxxed myself with around 60 emails hitting my inbox on the first day. Writing this newsletter sometimes feels a bit lonely, but it really reminded me of why I sit down every week. Having all these replies and conversations gave me a nice and fuzzy feeling!

Also, Mark, Michelle, Derek, Zoran, Evan, and Francis provided testimonials for the Web Weekly site, and Michal, Jason, and Jules started to support Web Weekly with a monthly coffee donation! A special thanks goes to all of you!

So, thank you all for reading along and if you enjoy Web Weekly, share it with your friends and family.

🦋 Bluesky
🐘 Mastodon
💼 LinkedIn

A quick "repost" really helps this indie newsletter reach more people. Thank you! ❤️

Something that made me smile this week

Look, I'm not saying that you should ever, ever use git-shitstorm, but the level of evilness really made me smile.

Don't be evil

No code

Performance Reviews Are the Scorecard of Capitalism → "If review season is the only time you hear feedback about your work, that's a problem."
Notes on Not Posting → "The internet doesn't need you. It's good to be reminded of that once in a while."
How I estimate work as a staff software engineer → "It is not possible to accurately estimate software work." 😱

Use `@layer` for your reset styles

Confession time: I'm still not using @layer even though it's been baseline supported since 2022. Manuel describes how to use CSS layers to deal with CSS reset specificity. Great trick!

Reset layer by layer

Web Weekly

Web Weekly #190

Guten Tag! Guten Tag! 👋

Build any web layout, with confidence.

Something that made me smile this week

No code

Analyze your font's features set

More view transition tools and resources

Modern features misbehaving in the shadow DOM

sizes=auto requires width and height

Smart: using fallback values to work around layer clashes

The wonderful weird web – Train Jazz

A nifty flexbox trick

Squashing and stretching animations

Make interfaces feel better

Why do some images look brighter than the rest?

Random MDN – transition-behavior

TIL recap – field-sizing doesn't only work for textareas

New on the baseline

Three valuable projects to have a look at

A new Tiny Helper

Thought of the week

Did you learn something from this issue?

This is all, friends!

Web Weekly #189

Guten Tag! Guten Tag! 👋

Practice Real Frontend Interviews

Something that made me smile this week

No code

Not existing font-family fallbacks

bfcache problems

Why (and how) MDN was rebuilt without React

The accessibility report of the top 1,000,000 home pages

The wonderful weird web – 100 jumps

HTML in canvas might become a thing

TIL — Intl can localize units, too!

Scoping with name-only container queries (or @scope)

New to the platform: lazy loading video

Random MDN – ReportingObserver

TIL recap – the pathLength attribute

Soon on the baseline - sizes=auto

Three valuable projects to have a look at

A new Tiny Helper

Thought of the week

Did you learn something from this issue?

This is all, friends!

Web Weekly #188

Guten Tag! Guten Tag! 👋

No code

Use subgrid to deal with "controlled" content

TS Type guards vs. assertion functions

What to know in JavaScript 2026

Everybody's raving about pretext

The View Transitions Toolkit

The wonderful weird web – CSS-or-BS

The human.json protocol

light-dark() works soon for images

A sticky CSS spec change

Edge's experimental network efficiency guardrails

CSS containment explained

Random MDN – position-visibility

TIL recap – Forbidden fetch headers

New on the baseline

Three valuable projects to have a look at

A new Tiny Helper

Thought of the week

Did you learn something from this issue?

This is all, friends!

Web Weekly #187

Guten Tag! Guten Tag! 👋

Web Weekly housekeeping

No code

color-contrast() beyond black & white

Form-associated custom elements

A new focusgroup RFC

Stop checking for view transition support

The wonderful weird web – JND

Native JSON modules with import attributes

Even more customizable selects

Feature detection of at-rules

`sizes=auto` requires `width` and `height`

Random MDN – `transition-behavior`

TIL recap – `field-sizing` doesn't only work for `textarea`s

Not existing `font-family` fallbacks

`bfcache` problems

HTML in `canvas` might become a thing

TIL — `Intl` can localize units, too!

Scoping with name-only container queries (or `@scope`)

Random MDN – `ReportingObserver`

TIL recap – the `pathLength` attribute

Soon on the baseline - `sizes=auto`

Use `subgrid` to deal with "controlled" content

Everybody's raving about `pretext`

The wonderful weird web – `CSS-or-BS`

The `human.json` protocol

`light-dark()` works soon for images

A `sticky` CSS spec change

Random MDN – `position-visibility`

TIL recap – Forbidden `fetch` headers

`color-contrast()` beyond black & white

A new `focusgroup` RFC

Random MDN – CSS `.to()` in JS

TIL recap – `svg` elements can be nested

New on the baseline — CSS `shape()`

Do you remember `theme-color`?

Yes, this is a custom `select`!

`:` and `=` in style queries

Style restrictions of the new `geolocation` element

`npmx` is having a moment

Creative ways to select `:root`

Random MDN – `stop()`

`setHTML` is coming to Firefox

The wonderful weird web – `aem1k`

`sec-fetch` as modern CSRF protection

Does this demo still count as a `select`?

Random MDN – `:open`

TIL recap – `overflow: hidden` is still scrollable

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

TIL — CSS `zoom`

New in Chrome DevTools — `Render blocking`

Random MDN – `text-box-trim`

TIL recap – `text-transform` can affect screen readers

New on the baseline — new `map` methods