पब्लिश करने की तारीख: 12 जुलाई, 2024
सीएसएस को बेहतर बनाने के लिए तैयार हो जाएं! @property नियम, एपीआई के CSS 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 के बेसलाइन में आने के बाद, सीएसएस की यह सुपरपावर और ज़्यादा बेहतर हो रही है.