Safari 27 ships and six CSS features become Baseline

Six new CSS features 2026 projects can now rely on became Baseline in September: progress(), alpha(), images inside light-dark(), revert-rule, scroll anchoring and font-width ^[1]. The trigger was Safari 27, which shipped the missing pieces and brought each feature to every core browser ^{[1, 2]}.

It was a busy month overall. Chrome 153 and 154, Firefox 155, 156 and 157, and Safari 27 all reached stable ^[1]. Below is what each feature does, where it helps on real client work, and how we suggest rolling it out.

Key takeaways

• Baseline Newly available means a feature works in all core browsers: Chrome, Edge, Firefox and Safari on desktop and mobile ^[4].
• progress(), alpha(), light-dark() with images and revert-rule are the four with the most day-to-day value for designers and front-end developers ^[1].
• Newly available is not the same as widely available. That label arrives 30 months later ^[4], so check your audience before dropping fallbacks.
• Most of these features replace JavaScript or duplicated rules, which means less code to maintain.

What Safari 27 changed

Apple’s WebKit team published its Safari 27.0 feature list on September 17. The team opened with a line that sums up the release:

“Our Safari release notes have never been as long as they are for this version.”

According to the same post, the number of new features grew from 58 to 80 between the first beta in June and the final release ^[2]. The CSS list goes well beyond the six features covered here. It includes a stretch keyword for sizing, a :heading pseudo-class, multiple colours in color-mix() and transform-aware anchor positioning ^[2]. For this article we focus on the features that crossed the Baseline line, because those are the ones you can use without checking three browsers first.

New CSS features 2026: the six that are now Baseline

• progress() returns a number for where a value sits between a start and an end value. It works in Chrome 138+, Edge 138+, Firefox 155+ and Safari 27+ ^[1].
• alpha() takes a colour and returns it with an adjusted transparency, keeping its colour channels and colour space. Support: Chrome 151+, Edge 151+, Firefox 155+, Safari 27+ ^[1].
• light-dark() now accepts images, such as url() images or gradients, as well as colours. Support: Chrome 150+, Edge 150+, Firefox 150+, Safari 27+ ^[1].
• revert-rule rolls a property back to the value it would have had if the current style rule were not there. Support: Chrome 148+, Edge 148+, Firefox 150+, Safari 27+ ^[1].
• Scroll anchoring with overflow-anchor has worked in Chrome since version 56 and Firefox since 66, and Safari 27 completes the set ^[1].
• font-width replaces font-stretch as the name for picking condensed or expanded faces, and font-stretch stays as a legacy alias ^[1].

One detail on font-width. Chrome 154 adds the @font-face descriptor, while the CSS property itself landed in Firefox 155 and was already in Safari ^[1]. Test it on your target browsers before you depend on the property in production.

progress() and alpha(): fluid values without the maths

progress() takes three comma-separated values: the current value, the start and the end. It returns a number that is clamped between 0 and 1 by default, and Firefox 155 and Safari 27 also support a no-clamp option that lets the result go past either end ^[1]. The web.dev example is a good starting point: opacity: progress(100vw, 320px, 1200px) fades a card in as the viewport grows from 320 to 1200 pixels ^[1].

That one number is useful well beyond opacity. You can feed it into calc() for type scales, spacing or a colour mix, and the layout responds smoothly across widths instead of jumping at breakpoints. Before progress(), the same effect usually meant a hand-written clamp() formula or a resize listener in JavaScript.

alpha() solves a smaller but very common problem. Design systems often carry a long list of transparent variants: brand at 8% for hover, 16% for pressed, 50% for overlays. With alpha(var(--brand-color) / 50%) you derive those from a single token ^[1]. Fewer tokens means fewer chances for a hover state to drift away from the brand colour after a rebrand.

light-dark() images and revert-rule: cleaner themes and overrides

light-dark() has been Baseline for colours since May 2024 ^[3]. The new part is images. You can now write background-image: light-dark(url(day.png), url(night.png)) and let the browser pick the right file for the active colour scheme ^[2]. MDN also lists none as a valid value, so one theme can simply drop an image ^[3].

There is one requirement teams often miss. MDN notes that color-scheme must have a value of light dark, usually set on :root, for light-dark() to work ^[3]. Without that line, the function always resolves to the light value and the bug looks like a broken dark mode.

revert-rule is a cascade tool. revert goes back to the browser or user styles, and revert-layer goes back to the previous cascade layer. revert-rule goes back to what the property would have been if the current rule did not exist ^[1]. In practice that is useful inside component variants, where you want to cancel one declaration and fall back to the base component styles without copying them.

Scroll anchoring and the end of jumping pages

web.dev describes the problem scroll anchoring fixes in one sentence:

“Scroll anchoring adjusts the scroll position automatically when DOM changes above the visible viewport would otherwise cause content to jump”

In Safari 27, overflow-anchor: auto turns scroll anchoring on by default ^[2]. That matters most on long pages: news articles with late ads, product lists that load more items, or a cookie banner that pushes content down. Reserving space for media is still good practice, but Safari users now get the same protection Chrome and Firefox users have had for years ^[1].

How your design and dev team should act

First, agree on your support target. Baseline Newly available means interoperable in current core browsers, and Widely available follows 30 months after that date ^[4]. For a marketing site with a young, mobile audience, newly available is often enough. For a banking portal or a government form, keep fallbacks until the feature is widely available or your analytics say older browsers are rare.

Second, write fallbacks in CSS, not JavaScript. Declare a simple value first and the new function second. Browsers that do not understand the second line ignore it and keep the first. Use @supports when you need a whole block to switch.

Third, update the design system, not individual pages. Transparent variants, themed images and fluid spacing all belong in tokens and component styles. When the source is right, every page benefits at once and nobody has to remember the new syntax.

FAQ

Which new CSS features became Baseline in September 2026? progress(), alpha(), images in light-dark(), revert-rule, scroll anchoring with overflow-anchor, and font-width, according to web.dev’s September roundup ^[1].

Do I still need fallbacks for these features? For visitors on older browsers, yes. Newly available only covers current versions of the core browsers, and a feature is considered safe for most sites once it becomes widely available 30 months later ^[4].

Why does light-dark() not switch in my project? Check that color-scheme is set to light dark, usually on :root. Without it the function does not respond to the user’s theme ^[3].