CSS @property

Plain Custom Properties के साथ समस्या

var() से declared एक plain --custom-property में बिल्कुल कोई type checking नहीं होती -- browser इसकी value को use-time पर substitute की गई एक opaque string की तरह treat करता है, जिसका मतलब है इसे smoothly animate नहीं किया जा सकता (browser को नहीं पता कि दो arbitrary strings के बीच कैसे interpolate करना है) और typos या invalid values चुपचाप fail हो जाती हैं।

उदाहरण: The Problem With Plain Custom Properties

<style>
.box { padding: 20px; color: white; background: var(--my-color); }
.box:hover { --my-color: blue; }
:root {
  --my-color: red;
}
.box {
  transition: --my-color 0.3s;
}
</style>
<div class="box">Hover: the color snaps, it does not animate</div>

@property से एक Typed Property Register करना

@property किसी custom property name को एक explicit syntax (उसका type, जैसे <length> या <color>), यह inherit होता है या नहीं, और एक initial-value के साथ register करता है -- जो पहले एक opaque string थी उसे एक असली, browser-understood typed value में बदलते हुए।

उदाहरण: Registering a Typed Property With @property

<style>
@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}
.box { padding: 20px; color: white; background: var(--my-color); transition: --my-color 0.5s; }
.box:hover { --my-color: blue; }
@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}
</style>
<div class="box">Registered typed property</div>

syntax Descriptor

syntax descriptor <color>, <length>, <percentage>, <number>, या <angle> जैसे predefined syntax component names इस्तेमाल करके accepted value type declare करता है।

property को assign की गई एक invalid value reject कर दी जाती है और उसके बजाय initial-value इस्तेमाल होती है, plain custom properties के उलट जो कुछ भी accept करती हैं।

उदाहरण: The syntax Descriptor

<style>
@property --gap-size {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.box { display: flex; gap: var(--gap-size); transition: --gap-size 0.4s; }
.box:hover { --gap-size: 30px; }
.box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 10px; }
@property --gap-size {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
</style>
<div class="box">Length-typed custom property</div>

अब इसे Smoothly Animate किया जा सकता है

क्योंकि एक registered property की एक असली, interpolatable type है, browser अब इसे transition या @keyframes से smoothly animate कर सकता है -- यही @property का primary practical payoff है, ऐसी animations unlock करते हुए जो एक plain untyped custom property के साथ असंभव थीं।

उदाहरण: Now It Can Be Smoothly Animated

<style>
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.box {
  background: conic-gradient(red var(--angle), blue);
  transition: --angle 0.3s;
}
.box:hover {
  --angle: 180deg;
}
</style>
<div class="box">Now smoothly animatable</div>

inherits और initial-value Descriptors

inherits (true/false) explicitly control करता है कि property children तक जाती है या नहीं, और initial-value वह fallback set करता है जो इस्तेमाल होता है जब भी property unset हो या उसे एक invalid value assign की गई हो।

दोनों descriptors एक valid @property rule के लिए ज़रूरी हैं, var() में plain custom property fallbacks की optional nature के उलट।

उदाहरण: The inherits and initial-value Descriptors

<style>
.parent { --my-size: 24px; }
.child { font-size: var(--my-size); background: #cfe8ff; border: 2px solid #1e6fd9; padding: 10px; }
@property --my-size {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}
</style>
<div class="parent"><div class="child">Child inherits --my-size</div></div>