CSS styling has no perfect solutions but tradeoffs between the different approaches. Choose the one that fits best to the project

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

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

-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?

interpolate-size is a way to animate height: auto or width. It is only supported in Chrome for now.

A quick example:

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  details {
    transition: height 0.5s ease;
    height: 2.5rem;

    &[open] {
      height: auto;
      overflow: clip;
    }
  }
}

A more generic one:

:root {
  interpolate-size: allow-keywords;
}

details {
  --calculated-details-padding: var(--details-padding, 1em);

  transition: height var(--details-transition-speed, 150ms) linear;
  height: calc(1lh + (var(--calculated-details-padding) * 2));
  padding: var(--calculated-details-padding);
  background: var(--details-bg, white);
  color: var(--details-color, currentColor);
}

details[open] {
  height: auto;
  overflow: clip;
}

If the maximum font size is less than or equal to 2.5 times the minimum font size, then the text will always pass WCAG SC 1.4.4, at least on all modern browsers.

The author also cites https://utopia.fyi/type/calculator/

How to load font the most efficient way in 2025 for nearly every cases.