Web Weekly #190

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.

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

::: highlight sponsored

Build any web layout, with confidence.

Build any web layout, with confidence. A practical written CSS course that teaches you how to think, build and debug web layouts.

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.

<a class="btn btn__small" href="https://thelayoutmaestro.com?utm_source=webweekly">Level up your layout game</a>

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.

<a class="btn btn__small" href="https://jack.cab/blog/every-firefox-extension">Install them all</a>

No code

Analyze your font's features set

Wakamai Fondue landing page with a bold "Drop a font" in the middle.

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!

<a class="btn btn__small" href="https://wakamaifondue.com/">Get nerdy about fonts</a>

More view transition tools and resources

The bag of tricks for view transitions.

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!

<a class="btn btn__small" href="https://vtbag.dev/">Level up your transitions</a>

Modern features misbehaving in the shadow DOM

Modern CSS Feature Support For Shadow DOM – Tracking the state of support for CSS features within and across the shadow DOM to provide visibility into feature parity, usage details, and outstanding issues and bugs.

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.

<a class="btn btn__small" href="https://shadow-dom-css.adobe.com/">Know what works</a>

sizes=auto requires width and height

In short: in addition to requiring loading=lazy, sizes=auto also basically requires that <img> 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!

<a class="btn btn__small" href="https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/">Help the layout</a>

Smart: using fallback values to work around layer clashes

@layer utility { .font-brand { letter-spacing: var(--letter-spacing, 20%); } }

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.

<a class="btn btn__small" href="https://dbushell.com/2026/04/15/containment-breach-in-cascade-layer/">Keep things flexible</a>

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

The wonderful weird web – Train Jazz

A train map of NYC showing the differing train lines.

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

<a class="btn btn__small" href="https://www.trainjazz.com/">Listen to some trains</a>

A nifty flexbox trick

main { /

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

<a class="btn btn__small" href="https://frontendmasters.com/blog/building-a-ui-without-breakpoints/">Flex!</a>

Squashing and stretching animations

.btn:hover .shaft, .btn:focus-visible .shaft { d: path(" M 5,12 h 17 "); }

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. 😅

<a class="btn btn__small" href="https://www.joshwcomeau.com/animation/squash-and-stretch/">Apply animation principles</a>

Make interfaces feel better

Component showing how calculated nested border radii look 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.

<a class="btn btn__small" href="https://jakub.kr/writing/details-that-make-interfaces-feel-better">Polish your interfaces</a>

Why do some images look brighter than the rest?

Three images of a cat. HDR and Ultra HDR look much brighter than normal.

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!

<a class="btn btn__small" href="https://tn1ck.com/blog/abuse-hdr-images-for-marketing">Understand images</a>

Random MDN – transition-behavior

.card { transition-property: opacity, display; transition-duration: 0.25s; transition-behavior: allow-discrete; }

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!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior">Change the behavior</a>

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

An input, a select and a textarea all resizing depending on their content.

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?

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/field-sizing-is-about-more-than-textareas/">Resize your elements</a>

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

New on the baseline

.box { background-image: image-set( url("https://.../small-image.jpg") 1x, url("https://.../bigger-image.jpg") 2x ); }

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

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/image/image-set">Be responsive</a>

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

Two vector graphics of Chris Coyier.

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!

<a class="btn btn__small" href="https://css-generators.com/svg-to-css/">Clip all the paths</a>

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

readers loved this
@webweekly