Usages:

1. Circular menus or item lists
2. Wavy layouts (DNA strands, wave)

Fancy animations

A Hz unit in CSS ?

Use them as much as possible.
Exceptions are physical placement (anchor, ...)

Another CSS reset

Drunk theme

If I want to develop fluid type calculations that adapt to local context, I’ll use em and cqi (container inline size) values. If I want my calculations to remain consistent across the entire page, I’ll use rem and vi (viewport inline size) calculations. In either case, I’ll define those values on body or other elements – so that 1rem always refers to the result of our initial negotiation, and doesn’t take on more complex meaning.

For spacing on the y-axis, the line-height (lh) unit is great or the rlh (root line-height). The x-axis can be handled with the vi or cqi units.

The right units for any situation are the ones that express most clearly what we mean – and sometimes what we mean requires a combination of units.

There’s no best unit, no best layout mode, and no best selector. When we use the entire language, we have more tools for clearly expressing our goals.

See Poetic CSS Architecture

A great summary

After 25 years, the zoom property will get a spec.

Zoom affects the box model compared to tranform: scale()

To show scrollbars only when they’re needed (while keeping space for the scrollbar if it’s added later) use the scrollbar-gutter CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

Note it's baseline 2024, so it's useful to hide it behind the @supports media query.

Piccalilli shares links!

A janky scroll animation on focus can be solved with overflow: clip

The latest CSS features, similar to What you need to know about modern CSS (2025 edition) from Frontend Masters

Note animations does not work on Firefox.

Fix the overflow on hover correctly

The snippet:

legend {
  padding: 0;
  display: table;
}
fieldset {
  border: 0;
  padding: 0.01em 0 0 0;
  margin: 0;
  min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

-apple-visual-effect: -apple-system-glass-material;

Whoever it was at Apple that decided to make this a CSS property is a genius because it makes it incredibly easy to provide different rules based on Liquid Glass support.

But it's not documented! So we can assume Apple use the property somewhere in a WebView in order to make the web app looks like native.

Similar to tailwind, but somehow better?

em unit compound when value are greater or lower than 1.
Except that, they are awesome :)

How CSS handles things already.

#todo what does CSS handle?