Web Weekly #98 (#blogPost)

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?

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!

If you need something to cheer you up, this baby laughing about paper is too cute. 💙

Appreciate the little things

• Reminder: if you're storing secrets in private repos, they might not be as private as you think.
• Learn how to consider device hardware and connection speed in your JS apps.
• TIL — the number of results on Google search is configurable.

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

"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

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

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

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

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

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

Spice up your headlines

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

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

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

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

• zachleat/details-utils – A suite of utilities to add more features to the details element.
• denoland/saaskit – A modern SaaS template built on Fresh.
• DavidWells/types-with-jsdocs – Using JSDoc for Typescript Types.

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

Use system fonts

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

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"

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:

• Share it on Twitter.
• Forward it to someone who might like 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! 👋