Web Weekly #169

Are you excited about the upcoming corner-shape CSS property? Have you played with commandfor already? And did you dive deeper into all the Safari 26 features?

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 five more songs left in the queue.

✋ Hold on before you dive into all the web dev stuff; I've been thinking a lot about Web Weekly's direction and started to wonder if you need more this newsletter? Does it help you in your day job? How could it be better?

I'll probably do a proper survey at the end of the year, but if you can share some thoughts that would make the newsletter more valuable to you, please let me know and earn some Karma points.

Thank you! ❤️

Safari 26 hit the release channels with many major features included. What does this mean for the baseline? Can we safely start using all the new banger web capabilities? Let's find out!

First off, we have CSS anchor positioning.

The new feature enables us to place elements next to other elements without relying on heavy calculations or hardcoded values. Chromium has been shipping anchor positioning since May last year, and with Safari shipping it, we're close to baseline support. Firefox started shipping anchor positioning in nightly builds but there's an anchor positioning polyfill available.

Then there are scroll-driven animations, which you'll best learn about on Bramus' scroll-driven-animations.style.

Chromium has been shipping scroll-driven animations for two years, and Firefox has yet to catch up. There's also a polyfill available for scroll-driven animations, but with 63 open issues and 21 pull requests, I'm unsure of the project's status.

Then there's text-wrap: pretty; to avoid typographic widows and orphans (new lines with a single word at the end of a paragraph). Again, Firefox is missing, and I'm unsure if it's worth bringing in a polyfill for it (typo nerds might disagree here).

Safari's leading as the first and only browser supporting CSS contrast-color(), and I'm a bit confused about how this CSS function made it so far. The idea is that it'll return black or white to guarantee good color contrast, but having only black and white available as the returned colors feels like it won't satisfy all our needs. We'll see. Will you use it?

And let's finish with a banger: Safari finally supports SVG favicons. It was about time, wasn't it?

And that's my "short" summary today. If you want to read another take on all these and more new features, our friends at CSS Tricks published a long post, too.

I think I'll give anchor positioning with a polyfill a try when I have the chance. What about you?

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!

There's nothing special to see here. It's just a regular snake game that you can play in your URL bar...

• Maybe You Are an Imposter
• Organize your Slack channels by "How Often", not "What"
• When AI will browse the web for me

Unicode 17 was released, and with it, we'll receive some new emojis. I'm sure I'll use the first one once it hits my phone!

Express yourself

Speaking of Unicode: did you ever wonder how UTF (the Unicode Transformation Format) works? If you did, you'll enjoy Vishnu's post explaining nerdy UTF details.

Alternative text for generated content in CSS has worked across browsers for quite a while. Sara shared what you need to know in 2025 and when you should or shouldn't use it.

Be careful

I'm sure you know of the media query classics checking for a min-width or reduced motion, but do you know that there are over 30 descriptors? Daniel shared some lesser-known examples.

Adapt!

I must admit that I've forgotten the double focus ring practice to guarantee accessible focus styles working in all situations, but it's such a smart way to solve the issue of hard-to-spot focus styles caused by different backgrounds.

Eric did a fabulous job explaining the technique while jamming some modern CSS magic!

Adjust your focus

I loved that Eric also covered forced colors mode, which you can learn more about in Forced Colors Mode strategies.

So, there was this person who painted a banana. And they loved it so much that they decided to print it to have more of it. What could be next? Of course, the banana deserved its own website.

I'm not hyped about the AI trend, but when people can use it to express their love, there's something good about it.

Wow, I think I might love this banana more than anything in the world.

Feel the love

I shared one of Emil's posts in the previous Web Weekly, and he published a follow-up explaining easy-to-remember animation tips 'n' tricks. Also highly recommended.

Make your animations feel right

Chrome has been shipping the commandfor attribute since version 135, and it's implemented in Firefox Nightly behind a flag and already included in Safari's Tech Preview. Slowly but surely, we all can start looking into it!

Get to know all the commands

Chris published a massive resource listing all the new CSS things that should be on your radar!

Catch up!

I didn't expect to like this post as much as I did because I wasn't really excited about the new corner-shape CSS property (Chromium-only). But oh boy, this will come in handy in many more situations than the usual squircle example.

Shape up

This year's State of JS survey is open, and you should definitely participate. The survey layout received some changes, and you'll definitely learn some things along the way!

Share your opinion

From the unlimited MDN knowledge archive...

When a site's content changes, it can be that scroll bars appear and disappear, which leads to a tiny layout shift. Of course, this isn't the worst, but with scrollbar-gutter you can avoid it.

Avoid the shift

Two years ago, I learned about TypeScript's as const, and I'm using it all the time these days!

Set some constants

I won't cover any specific new baseline features, but only reference Jeremy's post because it highlights over 20 web features that entered the baseline status "widely available". Maybe there's something you've been waiting for on the list.

Check the baseline

• fetch-kit/ffetch – TypeScript-first fetch wrapper.
• nolanlawson/emoji-picker-element – A lightweight emoji picker for the modern web
• MaxBondABE/attempt – CLI for retrying fallible commands

If you're looking for wild and good-looking CSS gradients, Temani has you covered!

Apply CSS magic

Here are some wise words from Steve on the current state of AI affairs...

❤️ If so, join 25 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! 👋