सीएसएस में ट्रांज़िशन और डेटा की सुरक्षा
सीएसएस कस्टम प्रॉपर्टी, जिन्हें सीएसएस वैरिएबल भी कहा जाता है, की मदद से सीएसएस में अपनी प्रॉपर्टी तय की जा सकती हैं और उनकी वैल्यू का इस्तेमाल, सीएसएस में कहीं भी किया जा सकता है. फ़िलहाल, ये टैग काफ़ी काम के हैं. हालांकि, इनमें कुछ कमियां हैं, जिनकी वजह से इनका इस्तेमाल करना मुश्किल हो सकता है: ये किसी भी वैल्यू को स्वीकार कर सकते हैं, इसलिए इन्हें गलती से किसी अनचाहे वैल्यू से बदला जा सकता है. ये हमेशा अपने पैरंट से वैल्यू इनहेरिट करते हैं और इनमें बदलाव नहीं किया जा सकता. Chrome 78 में अब Houdini की सीएसएस प्रॉपर्टी और वैल्यू एपीआई लेवल 1 उपलब्ध है. इसकी मदद से, इन कमियों को दूर किया जा सकता है. इससे सीएसएस कस्टम प्रॉपर्टी काफ़ी असरदार बन जाती हैं!
Houdini क्या है?
नए एपीआई के बारे में बात करने से पहले, आइए Houdini के बारे में थोड़ी जानकारी पाएं. सीएसएस-टैग के Houdini टास्क फ़ोर्स को सीएसएस Houdini या सिर्फ़ Houdini के नाम से जाना जाता है. इसका मकसद "वेब पर स्टाइल और लेआउट के 'जादू' के बारे में बताने वाली सुविधाएं बनाना" है. Houdini स्पेसिफ़िकेशन का कलेक्शन, ब्राउज़र के रेंडरिंग इंजन की क्षमता को बढ़ाने के लिए डिज़ाइन किया गया है. इससे, हमारे स्टाइल के बारे में ज़्यादा जानकारी मिलती है और रेंडरिंग इंजन को बेहतर बनाया जा सकता है. इसकी मदद से, JavaScript में टाइप की गई सीएसएस वैल्यू और परफ़ॉर्मेंस पर असर डाले बिना नई सीएसएस को पॉलीफ़िल करना या बनाना संभव है. Houdini की मदद से, वेब पर क्रिएटिविटी को बेहतर बनाया जा सकता है.
CSS प्रॉपर्टी और वैल्यू एपीआई लेवल 1
सीएसएस प्रॉपर्टी और वैल्यू एपीआई लेवल 1 (Houdini प्रॉप और वैल्यू) की मदद से, हम अपनी कस्टम प्रॉपर्टी को स्ट्रक्चर दे सकते हैं. कस्टम प्रॉपर्टी का इस्तेमाल करने पर, फ़िलहाल यह स्थिति है:
.thing {
--my-color: green;
}
कस्टम प्रॉपर्टी के टाइप नहीं होते, इसलिए उन्हें अनचाहे तरीके से बदला जा सकता है. उदाहरण के लिए, देखें कि --my-color को यूआरएल के साथ तय करने पर क्या होता है.
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
यहां, --my-color टाइप न होने की वजह से, यह पता नहीं चलता कि यूआरएल, रंग की मान्य वैल्यू नहीं है! इसका इस्तेमाल करने पर, यह डिफ़ॉल्ट वैल्यू पर सेट हो जाती है (color के लिए काला,
background के लिए पारदर्शी). Houdini प्रॉप और वैल्यू की मदद से, कस्टम प्रॉपर्टी को रजिस्टर किया जा सकता है, ताकि ब्राउज़र को पता रहे कि इसे कैसा होना चाहिए!
अब कस्टम प्रॉपर्टी --my-color, रंग के तौर पर रजिस्टर हो गई है! इससे ब्राउज़र को पता चलता है कि किस तरह की वैल्यू इस्तेमाल की जा सकती हैं और वह प्रॉपर्टी को कैसे टाइप और इस्तेमाल कर सकता है!
रजिस्टर की गई प्रॉपर्टी की बनावट
प्रॉपर्टी रजिस्टर करने का तरीका इस तरह से है:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
इसमें ये विकल्प काम करते हैं:
name: string
कस्टम प्रॉपर्टी का नाम.
syntax: string
कस्टम प्रॉपर्टी को पार्स करने का तरीका. सीएसएस वैल्यू और यूनिट स्पेसिफ़िकेशन में, वैल्यू की पूरी सूची देखी जा सकती है. डिफ़ॉल्ट रूप से, यह * पर सेट होती है.
inherits: boolean
क्या यह अपने पैरंट की वैल्यू इनहेरिट करता है. डिफ़ॉल्ट रूप से, यह true पर सेट होती है.
initialValue: string
कस्टम प्रॉपर्टी की शुरुआती वैल्यू.
syntax पर नज़र डालना. मान्य विकल्प कई तरह के होते हैं. जैसे, संख्याएं, रंग, और <custom-ident> के टाइप. इन सिंटैक्स में बदलाव करने के लिए, इन वैल्यू का इस्तेमाल किया जा सकता है
+जोड़ने का मतलब है कि यह उस सिंटैक्स की वैल्यू की सूची को स्वीकार करता है, जिसे स्पेस से अलग किया गया है. उदाहरण के लिए,<length>+लंबाई की सूची होगी, जिसमें स्पेस से अलग किया गया होगा#जोड़ने का मतलब है कि यह उस सिंटैक्स की वैल्यू की सूची को स्वीकार करता है, जिसे कॉमा लगाकर अलग किया गया है. उदाहरण के लिए,<color>#रंगों की सूची होगी, जिसमें कॉमा लगा होगा- सिंटैक्स या आइडेंटिफ़ायर के बीच
|जोड़ने का मतलब है कि दिए गए किसी भी विकल्प का इस्तेमाल किया जा सकता है. उदाहरण के लिए,<color># | <url> | magicमें रंगों की कॉमा लगाकर अलग की गई सूची, यूआरएल याmagicशब्द डाला जा सकता है.
ध्यान देने वाली बातें
Houdini प्रॉप और वैल्यू के साथ दो समस्याएं आ सकती हैं. पहला, किसी मौजूदा रजिस्टर की गई प्रॉपर्टी को तय करने के बाद, उसे अपडेट नहीं किया जा सकता. साथ ही, किसी प्रॉपर्टी को फिर से रजिस्टर करने की कोशिश करने पर, आपको गड़बड़ी का एक मैसेज दिखेगा. इसमें बताया जाएगा कि प्रॉपर्टी पहले से तय है.
दूसरा, स्टैंडर्ड प्रॉपर्टी के उलट, रजिस्टर की गई प्रॉपर्टी को पार्स करने के बाद उनकी पुष्टि नहीं की जाती. इसके बजाय, कैलकुलेट होने के बाद उनकी पुष्टि की जाती है. इसका मतलब है कि एलिमेंट की प्रॉपर्टी की जांच करते समय, अमान्य वैल्यू अमान्य के तौर पर नहीं दिखेंगी. साथ ही, मान्य प्रॉपर्टी के बाद अमान्य प्रॉपर्टी शामिल करने पर, वह मान्य प्रॉपर्टी पर वापस नहीं आएगी. हालांकि, अमान्य प्रॉपर्टी, रजिस्टर की गई प्रॉपर्टी की डिफ़ॉल्ट वैल्यू पर वापस आ जाएगी.
कस्टम प्रॉपर्टी को ऐनिमेट करना
रजिस्टर की गई कस्टम प्रॉपर्टी, टाइप की जांच करने के अलावा एक मज़ेदार बोनस भी देती है: उसे ऐनिमेट करने की सुविधा! ऐनिमेशन का एक बुनियादी उदाहरण कुछ ऐसा दिखता है:
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
बटन पर कर्सर घुमाने पर, उसका रंग लाल से हरे में बदल जाएगा! प्रॉपर्टी को रजिस्टर किए बिना, यह एक रंग से दूसरे रंग पर कूद जाएगी. ऐसा इसलिए होता है, क्योंकि रजिस्टर किए बिना, ब्राउज़र को यह नहीं पता होता कि एक वैल्यू से दूसरी वैल्यू के बीच क्या उम्मीद की जा सकती है. इसलिए, यह पक्का नहीं किया जा सकता कि उनमें ट्रांज़िशन हो पाएगा या नहीं. हालांकि, सीएसएस ग्रेडिएंट को ऐनिमेट करने के लिए, इस उदाहरण को और बेहतर बनाया जा सकता है! रजिस्टर की गई एक ही प्रॉपर्टी के साथ, ये सीएसएस लिखी जा सकती हैं:
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
इससे linear-gradient का हिस्सा बनी हमारी कस्टम प्रॉपर्टी को ऐनिमेट किया जाएगा. साथ ही, हमारे लीनियर ग्रेडिएंट को भी ऐनिमेट किया जाएगा. पूरा कोड देखने और उससे खुद खेलने के लिए, नीचे दिया गया Glitch देखें.
नतीजा
Houdini, ब्राउज़र पर जल्द ही उपलब्ध होगा. साथ ही, इससे सीएसएस के साथ काम करने और उसे बेहतर बनाने के नए तरीके भी मिलेंगे. Paint API पहले से ही उपलब्ध है और अब कस्टम प्रॉप और वैल्यू भी उपलब्ध हैं. इससे, हमारे क्रिएटिव टूलबॉक्स में नए टूल जुड़ रहे हैं. इनकी मदद से, टाइप की गई सीएसएस प्रॉपर्टी तय की जा सकती हैं. साथ ही, इनका इस्तेमाल नए और दिलचस्प डिज़ाइन बनाने और उन्हें ऐनिमेट करने के लिए किया जा सकता है. Houdini से जुड़ी समस्याओं की सूची में, आपको और भी सुविधाएं मिलेंगी. यहां आपके पास सुझाव/राय देने और यह देखने का विकल्प होगा कि Houdini के लिए आगे क्या है. Houdini की मदद से ऐसी सुविधाएं बनाई जाती हैं जिनसे वेब पर स्टाइल और लेआउट के "जादू" के बारे में पता चलता है. इसलिए, इन सुविधाओं का इस्तेमाल करें.
फ़ोटो: Maik Jonietz Unsplash पर मौजूद