Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag. ๐Ÿ‘‹

Have you used CSS mask-image already? Or did you know that you can control an SVG's paint order to adjust a path's stroke width? Or that trigonometric CSS functions enable you to draw custom CSS shapes?

All the answers and much more are included in this week's Web Weekly. ๐Ÿซฃ

We're all waiting for the new parent family selector โ€” :has(). So what's the current state?

:has() support table showing that Firefox is missing.

Firefox still needs to flip the switch and is holding us back from adopting this new way of writing CSS. Nevertheless, I can imagine the new pseudo-class is terribly complicated to implement in a browser engine.

The resulting :has() use cases are endless, and we yet have to discover all the fancy ways we want to use it for. That raises the question: should everything be allowed to be used in a :has() selector? Should pseudo-elements such as ::before be allowed? (The answer is no.)

Jen Simmons pointed out that we need to track more closely what's allowed and works across browsers and started a document tracking detailed support information for included pseudo-classes.

I worry that once Firefox joins the party and developers adopt :has() selectors there'll be all sorts of browser bugs and compatibility issues because we can't know what wild CSS patterns people will invent.

Let's put on our Evel Knievel helmet and see how this goes. It'll be a wild ride!

Something that made me smile this week

Baby laughing about paper.

If you need something to cheer you up, this baby laughing about paper is too cute. ๐Ÿ’™

Appreciate the little things

The most satisfying dark mode toggle

Website header with a desk lamp as dark mode toggle.

My site doesn't include dark mode because my CSS is just a huge mess. But after seeing Jonathan Svรคrdรฉn's theme implementation, I'm jealous.

The dark mode toggle is incredibly fun to use, comes with sounds, and the best thing: Jonathan explained how he built it.

Turn off the light

Apple's lacking transparency

It's the uncertainty that gets you: perhaps we face disaster, or perhaps everything will be fine. I don't know which, and I don't know when we'll find out either. Every day for weeks on end it will either be a normal day, or perhaps disaster will strike, and there's no way to tell which it'll be - or even which of multiple potential issues would be the cause of the disaster. While it's not usually this bad, past Safari releases have caused similar problems too.

"Safari is the new IE!" โ€” you've probably heard this sentence or even said it aloud. I'm, at least, guilty of saying it. ๐Ÿซฃ

And while I doubt it's true anymore, there's one other critical problem with Apple's browser: Ashley describes their problems with unpredictable Safari releases breaking their products over and over again.

This state of work sounds terrifying.

Be predictable

Some clip-path magic

CSS-only shape examples like stars and ovals.

Disclaimer: Daniel C. Wilson's CSS shapes post includes lots of math, but it's a great example showing how far CSS has come!

Create CSS shapes

Daniel describes trigonometric CSS functions (sin(), cos(), tan(), ...), and if you want to see even more fancy CSS math, Bramus covered them on web.dev, too.

Values, signals, and observables

Graphic showing values (a circle), signals (a circle in a bucket) and observables (circles in a pipe).

Another post from the builder.io blog โ€” there's been a lot of fuzz around signals... If you finally want to understand what they're about, Miลกko Hevery does a great job explaining the core concepts.

Adopt signals

The wonderful weird web โ€“ gail.com

Hello and welcome to the gail.com FAQ.  Q: Why isn't there any content here? Can't you at least throw up a picture of your cat for the Internet to check out? A: Sorry, I have a cat, but she's pretty unexciting by Internet standards. As for why there is very little content here, we wanted to keep the server's attack surface as small as possible to keep it safe.

I love this: Gail owns gail.com, and instead of making money with this famous Gmail typo address, they put a text-only FAQ page there.

Mistype Gmail

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

Scalable React component patterns

4. Deeply nested DOM trees are annoying to work with. Finally, working with deeply nested DOM trees just slows you down.

Elise Hein published a thoughtful post about scalable design system components that avoid wrapper divs while being extremely flexible.

I've known the <Box as="header"> pattern but haven't seen asChild before.

Scale your design systems

A fancy headline effect

Multilayered "Waves" headline

Rach Smith shared a headline animation trick, and I'm tempted to add it to my site, too!

Spice up your headlines

mask-image

An interface with a rounded tab navigation

Do you remember image sprites? They were these huge PNG files that we used to create visual effects. Sophisticated rounded corners were one of the sprite use cases.

Ahmad Shadeed shared how to leverage mask-image to build a fancy rounded corner nav.

And before you ask: yes, mask-image is supported across browsers. ๐Ÿ’ช

Mask it

Variable fonts โ€” the custom grade axis

Interactive component showing 'font-variation-settings' for 'GRAD'

Usually, I avoid loading custom fonts for performance reasons, but this week I learned that some variable fonts include a relative font weight axis (GRAD). You can transition font weights without a layout shift if your font supports it. ๐Ÿคฏ

Animate font weight

Random MDN โ€“ scrollIntoViewIfNeeded

The Element.scrollIntoViewIfNeeded() method scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. If the element is already within the visible area of the browser window, then no scrolling takes place. This method is a proprietary variation of the standard Element.scrollIntoView() method.

From the unlimited MDN knowledge archive...

You might have used the DOM method scrollIntoView, but did you know you can also scroll only if necessary? Now you do!

Scroll if needed

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap โ€“ SVG paint order

Interactive component visualizing paint order.

When you're adjusting SVGs and changing an element's stroke-width, it could be that the borders become too thick.

Luckily, you can control an SVGs paint order. You've read this right; by changing the paint order, fill is painted over stroke so that "border tweaking" becomes more manageable.

Control the order

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

Three valuable projects to have a look at

A new Tiny Helper

Modern Font Stacks โ€” System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes โ€” just instant renders.

If you're looking for a way to preview and test modern system fonts, Modern Font Stacks is golden.

Use system fonts

If you wonder how I discover all these web tools, the Web Tools Weekly newsletter is a wonderful way to stay up to date with all the libraries and new helpers.

Thought of the week

There's nothing more to add to Sara Soueidan's social media take.

I have one important social media rule: If you wouldn't do it IRL, don't do it here.

A song that makes you stop coding

The Streets - It's Too Late (Official Audio)

I used to dislike The Streets, but what shall I say... taste changes, and "It's too late" and its beat grew on me.

Listen to "It's too late"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.6k emails. If you enjoy it, consider supporting me on Patreon. โ™ฅ๏ธ

Or tell your friends about it:

If you're not a subscriber, change that! ๐Ÿ˜‰

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! ๐Ÿ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 1 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.