September's Baseline haul gives CSS progress(), alpha() and revert-rule in every engine
Iris Calderón
You have a brand color in a custom property. The overlay needs it at half strength. So you add --brand-color-50. Then the hover state wants 80%, and you add another. Six months later :root reads like a paint swatch book of near-duplicates, and nobody remembers which one the modal uses.
September fixed that one. It also fixed a few of its neighbors.
Rachel Andrew's monthly roundup on web.dev covers a busy stretch: Chrome 153, Chrome 154, Firefox 155, Firefox 156, Firefox 157 and Safari 27 all reached stable in September 2026, the first month of bi-weekly Chrome and Firefox releases. A large share of what landed is now Baseline Newly available. Here is the CSS end of it, and what it does to code you already have.
The gaps that closed
Each of these needed one last engine:
progress(): Firefox 155 adds it, making it Baseline Newly available. Firefox 155 and Safari 27 also support theno-clampkeyword.alpha(): the relative color function from CSS Color 5 is Baseline Newly available with Chrome 151, Firefox 155 and Safari 27.revert-rule: Safari 27 adds the CSS-wide keyword.<image>values insidelight-dark(): Safari 27 adds them.- Scroll anchoring: Safari 27 turns it on and adds the
overflow-anchorproperty. font-width: Firefox 155 adds the property, the@font-facedescriptor andCSSStyleDeclaration.fontWidth, and Chrome 154 adds the descriptor plus thewidthproperty onFontFaceobjects. With Safari's existing support, it is Baseline Newly available.
One custom property, any opacity
alpha() takes an origin color and hands it back with an adjusted alpha channel. The color channels stay put. So does the color space. The example from the post:
.overlay {
background-color: alpha(var(--brand-color) / 50%);
}
That is the whole trick. One source color, transparency decided at the point of use. The -50 variant can go.
A ratio where the breakpoint ladder was
progress() returns a <number> for where one value sits between a start and an end. Normally it is clamped between 0 and 1, which is exactly the range you want for opacity, a color mix or a fluid size.
.card {
opacity: progress(100vw, 320px, 1200px);
}
Read it as: how far is the viewport between 320px and 1200px? A viewport around 760px wide lands near 0.5. No stack of media queries stepping the value up by hand. The web.dev post says it works off container or viewport dimensions, and no-clamp lets the result run below 0 or above 1 when you want it to overshoot.
Three ways to take a declaration back
This is the cascade one, and I think it matters most of the lot.
revert rolls a property back to the user or user-agent origin. revert-layer rolls it back to the previous cascade layer. revert-rule is the narrowest of the three: the property gets whatever value it would have had if the current style rule were not there at all. The other rules matching that element still count. Only this one steps aside.
That is surgical. You no longer have to restate the value some other selector already set, or crank specificity to fight it. You just tell this rule to stand down for this property.
Images that follow the color scheme
light-dark() used to take <color> values only. Now it can switch between two images, url() images or CSS gradients, depending on the active light or dark color-scheme. The light and dark versions of a hero background can sit in one declaration.
Content that stops jumping
Scroll anchoring adjusts the scroll position when DOM changes above the visible viewport would otherwise shove the content you are reading. Safari 27 joining Chrome and Firefox makes it Baseline Newly available. If an element should never act as an anchor node, overflow-anchor: none opts it out.
One HTML change worth a mention: Safari 27 adds the auto keyword in sizes for images with loading="lazy", so with sizes="auto" the browser picks from srcset using the image's rendered layout width. It is Baseline Newly available too.
Before you delete the fallbacks
Newly available is not the same as everyone has it. The label means the latest version of each core browser supports the feature. Visitors on older versions do not get it. So keep the fallback where a miss hurts. A plain background-color declared before the alpha() line costs one line.
Also check the support tables a second time. The post notes that the compat data it pulls from MDN may lag behind very recent browser releases. And for no-clamp, the source names Firefox 155 and Safari 27, so test it in your own targets before you count on overshoot.
What to try on your next component: pick the custom property with the most alpha variants and fold them into one alpha() call. Then find the media query ladder that only exists to step a single value, and see whether progress() can do the whole job.
Source: web.dev (web.dev)