@property CSS At-Rule

The CSS at-rule is a top-level construct that begins with an at sign and introduces instructions to the stylesheet engine that go beyond simple selector → declaration mappings; for example, you will commonly see things like @media or @keyframes. At-rules can declare resources, define named entities, or apply sets of rules conditionally. Conceptually they act as directives that change how the rest of the stylesheet is interpreted or how the rendering engine behaves, rather than being ordinary style declarations themselves.

At-rules differ in what they contain and how they are evaluated: some establish global constructs (for example, @font-face defines a font available to the whole document), some package a group of rules that are only applied under certain runtime conditions (for example, @media or @supports), and others create named items used by other parts of CSS (for example, @keyframes creates animation names). Many at-rules act as containers for nested rules or declarations and thus influence scoping and organization in the stylesheet. This container behavior is important for keeping related rules together and for expressing conditional logic in a single, cohesive block.

From the cascade and specificity perspective, rules placed inside conditional at-rules are evaluated only when the condition is met, but their selector specificity remains the same as if they were written outside — the at-rule typically controls applicability, not specificity. Some at-rules introduce identifiers or resources that behave like globals (so their definitions are available to the entire stylesheet or document), while others have local effect. Unknown or unrecognized at-rules are generally ignored by the parser, allowing for forward compatibility and graceful degradation when newer constructs are used in older user agents.

In authoring stylesheets, at-rules are powerful tools for modularity, progressive enhancement, and organization: they let you express conditional styling based on environment, bundle related declarations, and register reusable assets or behaviors. Because some at-rules are evaluated at runtime (e.g., viewport-dependent conditions) and others at parse time, it's useful to be mindful of their performance and ordering in large stylesheets. Using at-rules deliberately — grouping related concerns and preferring clear, well-scoped at-rule usage — makes stylesheets easier to maintain and reason about.

@property <property-name> {
  <property-type> <initial-value>;
  <inherits> <true | false>;
}

• syntaxDescribes the allowable syntax for the property.
• inheritsControls whether the custom property registration specified by @property inherits by default.
• initial-valueSets the initial value for the property.

The following information will show you the current browser support for the CSS at-rule @property. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported in some modern browsers, but not all.

Desktop

Tablets & Mobile