CSS Features

Working Draft · css-properties-values-api

CSS Properties and Values API

1 at-rule defined by this specification, all known to at least one browser .

Modern CSS features in this module: Registered custom properties.

Read the Editor's Draft ↗ W3C Working Draft ↗

The feature in detail

@property

At-rule Baseline: newly availablesince July 2024 Modern CSS: Registered custom properties

MDN The @property CSS at-rule is used to explicitly define CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.

Live preview Example from MDN 
@property --myColor {
  syntax: "<color>";
  inherits: true;
  initial-value: rebeccapurple;
}

@property --myWidth {
  syntax: "<length> | <percentage>";
  inherits: true;
  initial-value: 200px;
}

p {
  background-color: var(--myColor);
  width: var(--myWidth);
  color: white;
}

Syntax

@property <custom-property-name># { <declaration-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 85
Edge 85
Firefox 128
Safari 16.4
Chrome Android 85
Safari iOS 16.4

First version with support, from MDN browser-compat-data.

Descriptors

inherits
true | false Initial: true
initial-value
<declaration-value>? Initial: the guaranteed-invalid value
syntax
<string> Initial: "*"

Specification ↗ MDN reference ↗