सीएसएस पावर-अप के लिए तैयार हो जाएं! @property नियम, एपीआई की सीएसएस Houdini छतरी का हिस्सा है, अब सभी मॉडर्न ब्राउज़र पर पूरी तरह से काम करता है. गेम बदलने वाली इस सुविधा से, सीएसएस कस्टम प्रॉपर्टी (जिन्हें सीएसएस वैरिएबल भी कहा जाता है) के लिए कंट्रोल और सुविधाएं मिलती हैं. इससे आपकी स्टाइलशीट ज़्यादा स्मार्ट और डाइनैमिक बनती हैं.
@property के फ़ायदे
- सेमैंटिक मतलब: अपनी कस्टम प्रॉपर्टी का टाइप (सिंटैक्स) तय करने के लिए,
@propertyका इस्तेमाल करें. इससे ब्राउज़र को पता चलता है कि आपकी कस्टम प्रॉपर्टी में किस तरह का डेटा है (उदाहरण के लिए, रंग, लंबाई या संख्याएं), अनचाहे नतीजों को रोकती हैं और ग्रेडिएंट को ऐनिमेट करने जैसी नई संभावनाओं को बढ़ावा देती हैं. - फ़ॉलबैक वैल्यू: अब गायब होने वाली स्टाइल नहीं हैं!
@propertyका इस्तेमाल करके, कस्टम प्रॉपर्टी के लिए शुरुआती वैल्यू सेट करें. अगर बाद में कोई अमान्य वैल्यू असाइन की जाती है, तो ब्राउज़र आपके तय किए गए फ़ॉलबैक का इस्तेमाल अच्छी तरह से करता है. - गड़बड़ी को ठीक करना: टाइप की बेहतर सुरक्षा और फ़ॉलबैक सेट करने की सुविधा से, सीधे आपकी सीएसएस में जांच और पुष्टि करने के नए अवसर मिलते हैं.
बेहतर कस्टम प्रॉपर्टी बनाना
"स्टैंडर्ड" कस्टम प्रॉपर्टी बनाने के लिए, प्रॉपर्टी का ऐसा नाम सेट करें जो -- से पहले जुड़ता हो. साथ ही, इस प्रॉपर्टी को कोई वैल्यू दें. इन कस्टम प्रॉपर्टी की वैल्यू को ब्राउज़र, स्ट्रिंग के तौर पर पार्स करता है.
यहां दिए गए उदाहरण में, डिफ़ॉल्ट (स्ट्रिंग पर आधारित) कस्टम प्रॉपर्टी शुरू करने का तरीका बताया गया है.
:root {
--myColor: hotpink;
}
स्ट्रिंग के अलावा सिमेंटिक्स के साथ-साथ इन "बेहतर कस्टम प्रॉपर्टी" के फ़ायदे पाने के लिए, अपनी सीएसएस कस्टम प्रॉपर्टी को @property के साथ रजिस्टर करें.
इस उदाहरण में, वही कस्टम प्रॉपर्टी @property से शुरू की गई है.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property के साथ शुरू की गई कस्टम प्रॉपर्टी, नाम और वैल्यू के मुकाबले ज़्यादा जानकारी देती है. इसमें सिंटैक्स टाइप शामिल होता है और इनहेरिटेंस को सही या गलत पर सेट किया जाता है.
इस तरीके का फ़ायदा यह है कि स्टैंडर्ड प्रॉपर्टी का इस्तेमाल करने पर, उस प्रॉपर्टी में वैल्यू के तौर पर कोई रंग शामिल हो सकता है. साथ ही, उस रंग का इस्तेमाल स्टाइलशीट में कहीं और किया जा सकता है. अगर कोई व्यक्ति उस प्रॉपर्टी को अपडेट करके, उसमें वैल्यू के तौर पर कोई संख्या शामिल करता है, तो उस प्रॉपर्टी का इस्तेमाल किसी दूसरी जगह पर भी नहीं हो पाएगा. @property का इस्तेमाल करने पर, एक फ़ॉलबैक कलर तय किया जाता है. साथ ही, syntax जो यह बताता है कि इस प्रॉपर्टी में कलर वैल्यू होनी चाहिए. अगर बिना रंग वाली वैल्यू का इस्तेमाल किया जाता है, तो फ़ॉलबैक का इस्तेमाल किया जाएगा.
डेमो: ट्विंकलिंग ग्रेडिएंट बैकग्राउंड
@property का एक आसान ऐप्लिकेशन, उन प्रॉपर्टी का आसान ऐनिमेशन है जिन्हें ट्रांसफ़र करना पहले मुमकिन नहीं था. उदाहरण के लिए, ऐसे ग्रेडिएंट जो ब्राउज़र से इमेज की तरह माने जाते हैं. हालांकि, अगर @property के ज़रिए वैरिएबल के वाक्य का मतलब बताया जाता है, तो इनका इस्तेमाल ग्रेडिएंट स्टेटमेंट में किया जा सकता है. अब आपको ग्रेडिएंट में दो घोषित वैल्यू के बीच एक ऐनिमेशन के बारे में बताना है, तो ऐनिमेशन चालू हो रहा है. नीचे दिया गया उदाहरण देखें: हल्के बैकग्राउंड ऐनिमेशन वाले कार्ड में दो रेडियल ग्रेडिएंट हैं, जो अलग-अलग टाइमलाइन पर रंग बदलते हैं:
@property का इस्तेमाल करना.इसके लिए, अपनी कस्टम प्रॉपर्टी की वैल्यू को कलर के तौर पर सेट अप करें:
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
इसके बाद, शुरुआती ग्रेडिएंट बैकग्राउंड बनाने के लिए उन्हें ऐक्सेस करें:
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
इसके अलावा, फिर कीफ़्रेम में वैल्यू अपडेट की जा सकती हैं:
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
और हर एक को ऐनिमेट करें:
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
नतीजा
सीएसएस में रजिस्टर की गई कस्टम प्रॉपर्टी एक बहुत असरदार सुविधा है. यह सीएसएस वैरिएबल को मतलब और कॉन्टेक्स्ट देकर, सीएसएस लैंग्वेज को बढ़ाती है. अब @property के बेसलाइन में पहुंचने की वजह से, सीएसएस की इस सुपरपावर की संख्या लगातार बढ़ रही है.