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!

Historically, the big limitation with CSS transitions has been that they only apply when a targeted CSS property changes from one value to another. If we want a property to animate when an element is created, we’ve needed to use CSS keyframe animations, like I’m doing in the example above.

The new @starting-style API is a workaround for this limitation. We can provide an alternative set of CSS declarations. When the element is created, it’ll immediately transition from these initial styles.

It's not handled the same way as keyframes though: when the @starting-style has a low specificity, it can be overwritten by other styles (that sets the CSS property to another value).

Solutions: nuclear (!important), CSS custom properties, using keyframes.

And keyframes seem to be only syntactic sugar.

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 :)

Interactive examples for CSS grid, flexbox, the edge case with absolute positioning.

I didn't know flex with safe that preserves the alignment with the scrollbar.

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.

To keep the code maintainable, keep the css specificity as low as possible.

BEM falls short: class names can get really long; reusability might not be prioritized; and things must be named.

Another case is to use utility classes (atomic css) to avoid css specificity.

A new approach is with cascade layers.

Anyways, Cascade Layers (@layers) groups styles and declares what order the groups should be, regardless of the specificity scores of those rules.

Each has a sweet spot:

• BEM for clear design system that needs to be consistent; team with different philosophies; styles are less likely to leak between components.
• utility classes: build fast, like prototypes or MVPs and component based JS framework
• cascade layers: legacy codebases where you need full specificity control; integrate third party libraries or styles from other sources; working on a large, complex application or projects with long-term maintenance

How they can work together?
The cascade layers can be seen as an orchestrator: one layer for components (BEM); one layer for utilities (utility classes)

While the CSS specificity is low, everything else is kept simple.

Only up the specificity lightly, and note it; the minimum is another class, :where() or the HTML tag.

A single class ".override" can also be used; but "If you’re ever overriding an override, that’s a good place to stop and re-consider. "