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! Guten Tag! 👋

Do you know that flexbox comes with safe and unsafe alignment? Would you use container query units for fluid type? And how many ways are there to break up words?

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

Sébastien listens to "Matthew Dear - Wrong With Us" and says:

"An underrated original deep house song with a classy vibe."

What's your favorite song right now? Do you want to share your favorite song with the Web Weekly community? Hit reply, and we'll listen to it together!

💙 Support we and Web Weekly by resharing this edition on Twitter, Mastodon or LinkedIn.

Safari 17.4 shipped this month (release notes / blog post).

With release notes this long, wouldn't it be great if all vendors could mark what features entered cross-browser support? I vote yes and yes and yes!

I looked for features that are now cross-platform supported:

  1. Promise.withResolvers()
  2. Object.groupBy()
  3. Element.checkVisibility()

But look at the release yourself; it includes many gems like @scope, the switch input and alt-text for CSS content.

Open tabs

The death of custom media queries

@container style(--is-mobile: true) {   aside.sidebar {     font-size: 1.1rem;     line-height: 1.25;     font-weight: 500;   } }

A few years ago, I discovered a spec proposal that enables us to use custom properties in media queries — custom media queries. Unfortunately, the spec proposal never made it anywhere.

But now Jared White has played around with the new style queries, and they're just as good at solving this problem.

Be excited about style queries

What's the state of container style queries? Chromium and Safari Tech Preview 190 support them for custom properties. We yet have to wait for Firefox to join the party.

The state of the Digital Markets Act

 Why is this important? If fair and effective competition for both browsers and Web Apps was allowed, 90% of the apps on your phone could be written as a Web App and would be indistinguishable, significantly cheaper and often better than native apps. Native Apps will still have a lead in cutting edge graphics and gaming technology but here’s the thing, if companies see the Web platform as viable, they’ll invest in it and this gap will get narrower and narrower.

The EU's Digital Markets Act (DMA) has been enforced since the 7th of March.

What's the DMA? The DMA is a regulation proposed by the EU to create fair and competitive digital markets in the EU. It tries to enforce the same rights for everyone. The targets are massive companies in a monopoly position — companies so big that they could act as gatekeepers (Amazon, Apple, Bytedance, Google, Meta, and Microsoft).

But where are we now that the DMA has been enforced? Our friends at Open Web Advocacy summarized what you need to know. But in short, the gatekeepers must now hand in a compliance report that has yet to be checked.

Celebrate an open web

Fluid spacing with container query units

.pi {   padding-inline: clamp(0.5rem, 0.5rem + 5cqi, 4rem);   :has(> &) {     container-type: size;   } }

Disclaimer: I still have to wrap my head around if this is a good idea.

You know fluid type, right? The idea is that font sizes adjust to the viewport size. Usually, this is done with a cryptic clamp() declaration. Then, within boundaries, a value shrinks on smaller screens and grows on larger ones.

/* do some magic with viewport units to create fluid type */
font-size: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem)

Should we apply the same principle to container queries with fluid type on a component level? Font sizes, margins, paddings; they could all react to a container's height or width.

/* do some magic with container query units to create fluid type */
font-size: clamp(1rem, 2cqi + 0.5rem, 1.5rem);

Is this necessary? I'm unsure, but I've seen two examples advocating for it.

What do you think?

Node's new native color support

import { styleText } from "node:util";  const exampleRed = styleText("red", "I am red!"); const exampleBlue = styleText("blue", "I am blue!"); const exampleBlueBold = styleText("bold", exampleBlue);

After --env-file and --watch, Node.js keeps extending its feature set with traditional userland functionality.

styleText allows you to color terminal strings. Paweł Grzybek had a quick look.

Drop the chalk package

You're halfway through!

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

The wonderful weird web – GifCities

Internet archive next to many gifs

The next time you're looking for the legendary dancing baby gif, you'll know that you'll find it on GifCities.

The internet archives' gif search engine extracted over 4,500,000 animated gifs on GeoCities and links to their source. I've nothing but love for this project. 💙

Find gifs

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

Safe flexbox alignment

Example showing how 'align-items: safe center' prevents data loss.

With Safari Tech Preview 190, the safe keyword enters cross-browser territory. Chromies and Firefox have already shipped safe flexbox alignment. What is it good for?

Flexbox can sometimes lead to data loss, which you probably want to avoid.

Keep your content safe

Ways to break long words

 https:<wbr>//en<wbr>.wikipedia<wbr>.org<wbr>/wiki<wbr>/The<wbr>_King<wbr>_in<wbr>_Yellow  JR<wbr>-Bob<wbr>.Dobbs<wbr>@CoSG<wbr>.example<wbr>.com

How many ways are there to break up long words? There's &shy; or <wbr>. You could also use CSS with word-break or overflow-wrap. Adrian Roselli gives recommendations on when to use which.

Break the words

color-mix is color space dependent

Mixed color pallettes in different color spaces

This was cool! Michelle Barker wrote about color-mix and how it can be used to generate color palettes. It's easy-peasy: take two colors and mix them, right?

But did you know that color-mix considers color spaces and that different color spaces lead to different results?

Mix your color palette

A11y myths debunked

Accessibility myths debunked

The title says it all. 🫣

Think of accessibility

Random MDN – touch-action

touch-action — The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

From the unlimited MDN knowledge archive...

Do you know you can control how an element reacts to touch actions via CSS? touch-action can be handy for elements implementing custom touch behavior.

Control the touch

TIL recap – vi and vb

Writing mode playground visualizing writing mode dependent viewport units.

Are you using all these logical properties already? I must admit I'm still slow at adopting everything but inset. I'm even slower at adopting writing mode dependent units like vi, vb, cqb or cqi.

Head over to the blog if you want to learn how these work.

Consider writing mode

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

New on the platform

Three select boxes in Firefox, Chromium and Webkit showing horizontal lines in the opened dialog.

Quick tip: HTML select supports hrs to group things these days.

Classifieds & friends

Three valuable projects to have a look at

  • rossrobino/drab – A headless custom element library.
  • foliojs/fontkit – An advanced font engine for Node and the browser.
  • formkit/tempo – Parse, format, and manipulate dates and times in JavaScript and TypeScript.

A new Tiny Helper

Multiple PDF tools (merge pdf, split pdf, compress pdf)

If you're wrangling PDFs in real life, "I ❤︎ PDF" is a collection of various tools!

Deal with PDF

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

I'm not feeling as strong as Josh Collinsworth in "The quiet, pervasive devaluation of frontend", but this sentence hits home big times.

CSS is the only language that gets blamed when the author is bad.

This is all, friends!

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

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 10 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles