will-changeBaseline · Widely available
The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.
Browser support
DesktopChrome
1–35Not supported
36+Supportedsince Jul 16, 2014
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–35Not supported
36+Supportedsince Feb 24, 2015
Current: 157Safari
1–9Not supported
9.1+Supportedsince Mar 21, 2016
Current: 27MobileChrome Android
18–35Not supported
36+Supportedsince Jul 16, 2014
Current: 155Firefox Android
4–35Not supported
36+Supportedsince Feb 27, 2015
Current: 157Safari iOS
1–9Not supported
9.3+Supportedsince Mar 21, 2016
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: will-change.
Feature detection
CSS · check before using
@supports (will-change: initial) {
/* styles that rely on will-change */
}
/* or in JavaScript */
if (CSS.supports("will-change", "initial")) {
// use it
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (4). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| will-change | 36 | 79 | 36 | 9.1 | 36 | 36 | 9.3 |
| will-change.auto | 36 | 79 | 36 | 9.1 | 36 | 36 | 9.3 |
| will-change.contents | 36 | 79 | 36 | 9.1 | 36 | 36 | 9.3 |
| will-change.scroll-position | 36 | 79 | 36 | 9.1 | 36 | 36 | 9.3 |