Intermediate LevelCSS & Modern Layouts
What does @property do for typed CSS custom properties?
❓ Interview Prompt: Explain @property registration, syntax types, initial values, and animatable custom properties.
@property registers CSS custom properties with type information, enabling features impossible with basic --var declarations:
Key Capabilities:
1
Type checking: Restrict values to specific types (
<color>, <length>, <number>, <angle>, <percentage>).2
Animatable: Registered typed properties can be transitioned/animated (basic
--var cannot).3
Initial value: Defines a guaranteed fallback.
4
Inheritance control: Explicitly enable or disable inheritance.
Code Implementation Example
css
/* Register a custom angle property for gradient animation */
@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.animated-gradient {
--gradient-angle: 0deg;
background: linear-gradient(var(--gradient-angle), #3d2c2e, #886f68);
transition: --gradient-angle 0.5s ease;
}
.animated-gradient:hover {
--gradient-angle: 180deg;
}💡Animatable gradient angle using @property typed custom property.
🎯 Interview Key Takeaway
@property enables CSS gradient animation and type-safe custom properties that can be smoothly transitioned.
#@property#Animation#Custom Properties#Intermediate
Back to all CSS & Modern Layouts Questions→