@property in CSS: create custom typed properties

With the arrival of CSS Typed Custom Properties via the rule @property, CSS becomes even more powerful. This new feature allows you to register custom properties (CSS variables) by specifying their type, whether they inherit from their parents, and what their initial value is.

In this article, we will see:

What are registered custom properties
The syntax of @property
Differences with classic CSS variables
Practical examples
Browser compatibility

🔗 Do you like Techelopment? Check out the site for all the details!

🎯 What are registered custom properties?

Classic CSS variables (e.g., --main-color: red;) are dynamic: the browser doesn't know the type of value they contain. It is not possible to animate them directly or validate them.

With @property, you can declare a “registered” custom property with:

A type (e.g. <color>)
An initial value
If inherits from parent elements

📌 Basic Example

@property --logo { 
  syntax: "<color>"; 
  inherits: true; 
  initial-value: red;
}

You can now use --logo as an actual CSS property:

:root { 
  --logo: red;
}

button { 
  background-color: var(--logo);
}

⚙️ Complete Syntax

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

Parameters:

--name: The name of the custom property
syntax: Specifies the type, for example, <color>, <length>, <number>
inherits: Indicates whether the property inherits from its parents
initial-value: The initial value of the property

✨ Example with animation

@property --accent { 
  syntax: "<color>"; 
  inherits: false; 
  initial-value: orange;
}

:root { 
  --accent: orange;
}

.box { 
  width: 100px; 
  height: 100px; 
  background: var(--accent); 
  transition: --accent 0.5s ease;
}

.box:hover { 
  --accent: deeppink;
}

👉 In this example, --accent changes color with a smooth transition on hover. This is only possible thanks to @property.

📌 Differences with classic CSS variables

CSS Variables	Custom Properties Register
No tType Defined	Type Defined (`<color>`, `<number>`, etc.)
Not animatable	Animatable if registered
Not validated	Syntactical checking on values
Compatible everywhere	Only on modern browsers

🧪 Other Supported Types

You can register properties with different types CSS:

<color>
<length>
<number>
<angle>
<percentage>

🌐 Browser Compatibility

The @property rule is a relatively new feature and is not supported by all browsers.

Always check which browsers you can use it in, or use feature detection or fallback if you're aiming for maximum compatibility.

✅ Conclusion

Custom properties registered with @property take CSS to the next level, allowing you to:

Animate custom properties
Define types for CSS values
Improve the robustness of your code

Use @property to make your CSS variables smarter, more animated, and controllable!

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog