Web Weekly #170

Have you had a look at CSS functions already? Do you use AbortController in JavaScript? And do you know that the HTML output element is an ARIA live region?

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

A ton of karma points go to vaibhav this week! Thank you for supporting Web Weekly! ❤️

If you want to support my work with Web Weekly, too, you can't imagine how much I celebrate every Patreon or GitHub Sponsors donation.

You probably know about the fairly new light-dark() CSS function which lets you set colors that depend on the current color scheme inline. That's right, you don't need to use a media query!

If you ask me, the CSS function seemed oddly specific and it's a bummer that it only works with color values. And I don't know if this will be a thing, but what happens when we'll have a third color scheme in the future. Will we abandon light-dark() then? Tricky, tricky, tricky...

And then there's Bramus telling us that we can create our own light-dark function soon:

I explored combining CSS custom functions and CSS if(), leading to the creation of a custom --light-dark() CSS function that works with any value (not just colors!).

Disclaimer: we're in CSS future land here, but that's very cool!

light-dark() could easily be replaced with a custom --light-dark() CSS function. I dig it!

CSS functions also unlock an entire new set of utilities. Here's Sindre playing around with a CSS utility library called css-extras.

All this new CSS function stuff got me wondering, though. Was adding light-dark() to CSS a mistake when a more generic and more flexible way of doing the same things appeared a year later?

And do you remember :focus-within? It's an oddly specific pseudo-class, too, and we can now do the same (and more) things using :has().

Don't get me wrong, I don't want to criticize all the fine folks wrangling the CSS specs for us, but these examples show how tough it is "to invent" things for the web because you'll never know when someone shows up with a smarter idea.

Sponsored

Take your skillset way beyond syntax expertise

The JavaScript for Everyone course is now ready and available to transform your skills! Use code JS4ELAUNCH to save £60 for 2 weeks only.

We can guarantee that your JavaScript knowledge and skills will be unrecognisable. Your career prospects will also be turbo boosted thanks to your new, deep knowledge of the language.

Enroll now

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

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

I don't think you should use the rudeCaptcha for public sites but it's clearly more entertaining than all the puzzles we need to deal with all day.

Don't be offended

• Handling Death Gracefully in Digital Experiences
• How to be a writer on a marketing team without sounding like a jerk
• Wikipedia: List of common misconceptions about science, technology, and mathematics

Have you ever used the cqb and cqi units? I must admit I haven't but Ryan makes a strong argument about using them to position elements.

Use the container

Do you know that when people use high contrast mode, most of your CSS colors are rewritten to system colors? And do you know that you can use the forced-color-adjust CSS property to prevent this from happening?

Of course, it's not that easy and Sarah explains when you should use forced-color-adjust but why it's a foot gun more often than not.

Be careful

This post is a year old, but it's still a great primer on AbortController and how to cancel things in JavaScript.

Cancel!

I know that many people have a strong dislike towards reduce functions. I'm not one of them, but I do like all these modern array utility methods. If you haven't used groupBy, this post is for you!

Forget about reduce

I love this! Adrift is a very calm site on which people can share doubts but also care for each other. ❤️

Let it out

Kevin covers CSS colors, alpha channel syntax history, color spaces and gradients in this post. It's a mixed bag of CSS color knowledge and I love it!

Be colorful

Side note: if you're looking for more color manipulation resources, our friends at CSS-Tricks released a fairly new guide on the matter.

Be honest, do you know what the HTML output element does? If you want to learn more about it, Den has you covered!

Put things out

Last week I learned that styles applied via CSS @keyframe animations have a special role in the CSS cascade. What? Yeah, exactly... 😅

Overrule with animations

I've seen some people talking about caching this week, so why not plug Harry's evergreen resource explaining everything you need to know. Do you wonder what's the difference between no-store, no-cache and no-transform; this post is one for your bookmarks.

Keep your cache

From the unlimited MDN knowledge archive...

Do you know that you can control what should happen when someone reaches the end of a scroll container? Now you do!

Stop the scroll

Here's a JS trivia question: how do you check if an array holds a NaN value?

Hint: indexOf won't do it because NaN isn't equal to itself...

Detect NaN

It's a small thing, but if you're using the details element, targeting the element content is now possible with ::details-content. Firefox 143 joined the party!

Target the content

Bramus shared many more ::details-content examples than those included on MDN, if you want to learn more about it.

• dahlia/optique – Type-safe combinatorial CLI parser for TypeScript.
• ChromeDevTools/chrome-devtools-mcp – Chrome DevTools for coding agents.
• NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect – Catch unnecessary React useEffect hooks.

Here's an absolute classic; if you want to test out how and if a slow file would affect your performance bottom line, slowfil.es allows you to control the response time via query parameters. It's a handy tool if you're knee deep in a perf analysis.

Slow down

Since reading "Your Strengths Are Your Weaknesses" I keep seeing this concept literally everywhere...

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