New Baseline CSS: progress(), alpha() and revert-rule

September 2026 was a good month for CSS. Several features became "Baseline Newly available", which means they now work in the latest versions of Chrome, Edge, Firefox and Safari. Some of them replace hacks you are probably still writing. This post walks through the four I would actually use, with small examples and a fallback strategy, because "newly available" still means older browsers lack them.

What "Baseline Newly available" means

Baseline is the web platform's shared label for cross-browser support. "Newly available" means the feature works in the current stable release of all major browsers. It does not mean everyone has updated. So treat these as progressive enhancements for now: use them where a fallback is acceptable, and keep the old approach underneath.

The list comes from web.dev's "New to the web platform in September", published on 2 October 2026.

1. progress(): fluid values without the maths

If you have ever written a long calc() to scale something between two breakpoints, this is for you. progress() returns a number between 0 and 1 describing where a value sits between a start and an end. Firefox 155 and Safari 27 completed support in September.

The formula, per MDN, is (value - start) / (end - start), clamped to 0 to 1 by default:

/* (5 - 0) / (10 - 0) = 0.5 */
opacity: progress(5, 0, 10);

/* clamped: computes to 1, not 1.5 */
scale: progress(15, 0, 10);

/* no-clamp lets it extrapolate: 1.5 (note: no comma after no-clamp) */
scale: progress(no-clamp 15, 0, 10);

The practical use is responsive design. web.dev's example fades a card in as the viewport grows from 320px to 1200px:

.card {
  opacity: progress(100vw, 320px, 1200px);
}

Because it returns a plain number, you can feed it into anything. Here is a heading that grows from 1.5rem to 3rem across the same range:

h1 {
  font-size: 1.5rem; /* fallback for older browsers */
  font-size: calc(1.5rem + 1.5rem * progress(100vw, 320px, 1200px));
}

Is this better than clamp()? For font sizes, clamp() with a vw middle value already works everywhere, so do not rush to rewrite. Where progress() shines is driving several properties from the same 0 to 1 value: opacity, scale, colour mix and spacing all moving together. That is clumsy with clamp() and simple here.

2. alpha(): change transparency, keep the colour

The alpha() relative colour function adjusts only the alpha channel of a colour while keeping its colour channels and colour space. It is now in Chrome 151, Firefox 155 and Safari 27. The web.dev post gives this example:

.overlay {
  background-color: alpha(var(--brand-color) / 50%);
}

This solves a very common design-token problem. You have --brand-color as a single token and need a 50% version for an overlay or a focus ring. Before, you either stored a separate token or reached for color-mix() with transparent. Now one function says exactly what you mean.

Fallback: declare a solid or pre-mixed colour first, then the alpha() version. Browsers that do not understand it ignore the second line.

3. revert-rule: undo just this rule

CSS already had revert (roll back to the browser's default styles) and revert-layer (roll back to the previous cascade layer). The new revert-rule keyword is narrower: it rolls a property back to whatever its value would have been "if the current style rule weren't present", in web.dev's words. It is supported in Chrome 148, Firefox 150 and Safari 27.

That is useful in component libraries with variants:

.button { background: navy; color: white; }
.button.ghost { background: transparent; color: navy; }

/* In the compact toolbar, this rule overrides colour only.
   For background, behave as if this rule did not exist. */
.toolbar .button { color: black; background: revert-rule; }

Without revert-rule, you would have to repeat the variant's background in the toolbar rule, and keep it in sync forever. My advice: use it sparingly. It is precise, but readers of your CSS need to know which other rules apply to understand the result.

4. Images in light-dark()

light-dark() has picked colours based on the colour scheme since 2024. It now accepts images too, supported in Chrome 150, Firefox 150 and Safari 27. As MDN notes, it needs color-scheme set, typically on :root:

:root {
  color-scheme: light dark;
}

.hero {
  background-image: light-dark(
    url("hero-light.webp"),
    url("hero-dark.webp")
  );
}

Gradients work as well. This replaces a prefers-color-scheme media query that existed only to swap a background image, and it follows the page's own color-scheme, so a user-chosen theme toggle works without extra CSS.

Also on the list

• Scroll anchoring with overflow-anchor is now in Safari 27, completing support. It stops content jumping when something loads above the viewport.

• font-width, the CSS Fonts 4 name for font-stretch, arrived in Firefox 155 and Chrome 154.

A safe way to adopt them

• Write the old value first and the new one second. Unsupported declarations are dropped.

• For larger blocks, wrap them in @supports, for example @supports (opacity: progress(1, 0, 2)).

• Check your analytics for the share of visitors on older browsers, especially older iOS versions, before relying on any of these for layout.

None of these are flashy. They are the kind of features that delete twenty lines of workaround CSS at a time, and that is usually the better kind.