CSS @property Rule

Subject: css

CSS @property Rule

The @property rule is a part of the CSS Houdini APIs. It lets developers define custom properties (CSS variables) with:

  • Specific data types (like <length>, <color>, <percentage>)
  • Inheritance behavior
  • Initial default values

This enables previously non-animatable variables to become animatable, allowing for smoother and more complex transitions.

Why Use @property?

  • Make CSS custom properties animatable
  • Control data types and expected formats
  • Define fallback or initial values
  • Manage inheritance explicitly
  • Build more dynamic, interactive UI components

Basic Syntax

🚀 Try it in Compiler

Fields:

  • syntax: A CSS type like <length>, <color>, etc.
  • inherits: Whether the property is inherited
  • initial-value: Default value when not set elsewhere

Example: Animating a Custom Color Property

🚀 Try it in Compiler

Explanation:

  • @property registers --my-color as a color variable
  • .box uses the custom variable for background
  • On hover, --my-color changes from red to blue with animation

Example: Animating a Custom Length Property

🚀 Try it in Compiler

Supported Syntax Types

  • <length>
  • <color>
  • <percentage>
  • <number>

Best Practices

  • Only use @property for custom variables that require animation or inheritance control
  • Match syntax value with actual usage to avoid errors
  • Use fallback styles for older browsers
  • Always test in production-like environments

Browser Support

  • ✅ Chrome 85+, Edge 85+, Opera
  • ❌ Not supported in Firefox or Safari (as of July 2025)

Key Takeaways

  • @property enables typed and animatable CSS variables
  • Useful for complex UI transitions without JavaScript
  • Limited browser support—always include fallbacks
  • Part of the advanced CSS Houdini APIs for greater CSS control
Next: CSS Math Functions