@starting-styleBaseline · Newly available
The @starting-style CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Aug 6, 2024.
Browser support
DesktopChrome
1–116Not supported
117+Supportedsince Sep 12, 2023
Current: 155Edge
12–116Not supported
117+Supportedsince Sep 15, 2023
Current: 154Firefox
1–128Not supported
129+Supportedsince Aug 6, 2024
Current: 157Safari
1–17.4Not supported
17.5+Supportedsince May 13, 2024
Current: 27MobileChrome Android
18–116Not supported
117+Supportedsince Sep 12, 2023
Current: 155Firefox Android
4–128Not supported
129+Supportedsince Aug 6, 2024
Current: 157Safari iOS
1–17.4Not supported
17.5+Supportedsince May 13, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on Aug 6, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN: CSSStartingStyleRule.
Feature detection
JS · check before using
if ("CSSStartingStyleRule" in globalThis) {
// CSSStartingStyleRule is available
} else {
// load a polyfill or use a fallback
}Documentation (MDN)
Specification
Sub-features
Support for each part of the feature (2). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| CSSStartingStyleRule | 117 | 117 | 129 | 17.5 | 117 | 129 | 17.5 |
| @starting-style | 117 | 117 | 129 | 17.5 | 117 | 129 | 17.5 |