Web Weekly #130 | Stefan Judis Web Development

Guten Tag! Guten Tag! 👋

Do you know how ARIA live regions work? Or do you sometimes struggle to center text vertically? Or want to get started with scroll-driven animations but don’t know how?

Turn on the Web Weekly tune and find all the answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are four more songs left in the queue.

This Web Weekly issue is already beefy enough, so I’ll skip a long intro and only open with some single-purpose URLs for your daily internet use.

I just love it when I can reply someone with a URL.

In rare cases like AB testing, you might want to delay rendering to avoid layout shifts. But how do you do this without blocking the HTML parser?

I can only think of a not-so-great opacity: 0 hack, but luckily, there’s a new property on the horizon — blocking: render.

Block rendering*

✱ but only if you know what you’re doing.

Bramus explaining scroll driven animations code.

I still haven’t made it to play with scroll-driven animations (Chromium-only), but when I do, I’ll definitely start by watching Bramus’ new, free course.

Make it fancy

Specificity misconceptions

However, I also sometimes raise one of my eyebrows as sometimes I, unfortunately, encounter something that’s just outright wrong.  To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS …

And here’s Bramus again: CSS specificity and the cascade are powerful but also confusing.

Three common but wrong specificity thoughts are:

  • Specificity is a decimal score.
  • Using the style attribute adds Specificity.
  • Using !important adds Specificity.

If you think one of these is true, this post if for you.

Refresh your CSS understanding

Scheduled photo sessions for your sites

Screenshots of Alex' website

I just set up a GitHub repo that visits my site, takes screenshots and commits them to the repo. I love to archive things.

If you want to document how your sites change over time, Alex wrote an excellent tutorial about it.

Take pictures

You’re halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – the visualized web

A map of dots that are all connected to each other. The dot with `stefanjudis.com` is highlighted.

I don’t know this map’s data source, but following all the Internet’s links is just magical.

Inspect the web

How do live regions work?

Live regions that are already "populated" don't work

If you wonder how ARIA live regions work and how you should use them to make your site’s updates more accessible, Patrick tested screen reader / browser combinations and shares recommendations.

Announce important stuff

HTML example showing that a link without `rel=noopener` is that same as a link without it. This implicit behavior is support since Chrome 88, Firefox 79 and Safari 12.1.

If you’re setting rel="noopener" on your links to prevent access to window.opener, stop it and save some characters.

Use the default

Leave the globals in peace

Being against patching globals doesn't mean being against convenience.

Patching globals might seem like a reasonable approach to add functionality to the platform, but usually it fights back quickly. It puzzles me that JS ecosystem heavyweights Next.js, React and Bun thought it was a good idea. This post explains what to do instead. 💯

Don’t mess with globals

Why vertically centering text is still terrible

Multiple font render previews with different Asc, Desc and Diff values which leads them to render differently.

I’m not usually a fan of these “centering things in CSS hard” jokes, but last week, I desperately tried to align an icon next to a custom font. And what should I say? I gave up…

Niki came along just in time with some font magic so that I can tackle things again next week.

Center all the things

Thanks Simon, for sending this article over!

zoom — the zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

From the unlimited MDN knowledge archive…

Here’s a fun one: you probably know that when you scale an element via CSS, it doesn’t affect its layout size.

Sometimes, I find this confusing, but if you want to scale the actual size, zoom does this. And the CSS property is just about to enter the baseline.

Chrome supports it since version 1 (#wat?), Safari joined the party with version 3.1 (#wat^2)? and now, in 2024, Mozilla decided to prioritize zoom with Firefox 126. 😅

Make things bigger

Let me know if you know why this “old school” property was considered now. I’m super curious!

TIL recap – important CSS custom properties

An editor example showing that `color: yellow` overwrites a custom property even though it uses "!important"

I tried to pair !important with custom properties a while ago and ran into a big surprise. If the code above surprises you, this post is for you.

Learn about the cascade

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

It’s still in progress, but Firefox, as the missing engine, started working on transition-behavior. What is it good for?

You probably know the problem of setting opacity: 0 and display: none in the same go, making a smooth transition impossible. transition-behavior allows you to transition opacity and flip over display once opacity is set to 0. Magic!

Transition the display property

Three valuable projects to have a look at

Preview of SVGViewer open in a browser. The code and a live preview are visible.

If you’re working with SVGs and are frustrated that design tools aren’t showing you code (at least I haven’t discovered these features), SVGViewer lets you tweak and preview SVGs with code. This is golden! 👇

Tweak all these icons

💙 If you learned something from this issue, give back and support me with a small donation on Patreon.

These small gestures really help me stay motivated. 😊

I use a AI daily, but there’s nothing more to add to this quote from Molly White’s article.

[AI tools] are handy in the same way that it might occasionally be useful to delegate some tasks to an inexperienced and sometimes sloppy intern.

Loved this email? Hated this email? I want to hear about it!

If you think there’s something that needs to be improved or something that you enjoyed, 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! 👋