coderef

Registered custom propertiesBaseline · Newly available

The CSS.registerProperty() static method and the @property CSS at-rule register custom properties for which types and behaviors can be defined.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Jul 9, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–84Not supported
85+Supportedsince Aug 25, 2020
Current: 155
Edge
12–84Not supported
85+Supportedsince Aug 27, 2020
Current: 154
Firefox
1–127Not supported
128+Supportedsince Jul 9, 2024
Current: 157
Safari
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27
MobileChrome Android
18–84Not supported
85+Supportedsince Aug 25, 2020
Current: 155
Firefox Android
4–127Not supported
128+Supportedsince Jul 9, 2024
Current: 157
Safari iOS
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Jul 9, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: registerProperty static.

Feature detection

JS · check before using
if ("CSSPropertyRule" in globalThis) {
  // CSSPropertyRule is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (10). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSS.registerProperty_static787912816.47812816.4
CSSPropertyRule858512816.48512816.4
CSSPropertyRule.inherits858512816.48512816.4
CSSPropertyRule.initialValue858512816.48512816.4
CSSPropertyRule.name858512816.48512816.4
CSSPropertyRule.syntax858512816.48512816.4
@property858512816.48512816.4
@property.inherits858512816.48512816.4
@property.initial-value858512816.48512816.4
@property.syntax858512816.48512816.4