Houdini के नए एपीआई की मदद से बेहतर कस्टम प्रॉपर्टी

सीएसएस में ट्रांज़िशन और डेटा की सुरक्षा

Sam Richard

सीएसएस कस्टम प्रॉपर्टी को सीएसएस वैरिएबल भी कहा जाता है. इसकी मदद से, सीएसएस में अपनी प्रॉपर्टी तय की जा सकती है और पूरी सीएसएस में उनकी वैल्यू इस्तेमाल की जा सकती हैं. फ़िलहाल, ये टैग काफ़ी काम के हैं. हालांकि, इनमें कुछ कमियां हैं, जिनकी वजह से इनका इस्तेमाल करना मुश्किल हो सकता है: ये किसी भी वैल्यू को स्वीकार कर सकते हैं, इसलिए इन्हें गलती से किसी अनचाहे वैल्यू से बदला जा सकता है. ये हमेशा अपने पैरंट से वैल्यू इनहेरिट करते हैं और इनमें बदलाव नहीं किया जा सकता. Chrome 78 में अब Houdini की सीएसएस प्रॉपर्टी और वैल्यू एपीआई लेवल 1 उपलब्ध है. इसकी मदद से, इन कमियों को दूर किया जा सकता है. इससे सीएसएस कस्टम प्रॉपर्टी काफ़ी असरदार बन जाती हैं!

Houdini क्या है?

नए एपीआई के बारे में बात करने से पहले, आइए Houdini के बारे में थोड़ी जानकारी पाएं. सीएसएस-टैग के Houdini टास्क फ़ोर्स को सीएसएस Houdini या सिर्फ़ Houdini के नाम से जाना जाता है. इसका मकसद "वेब पर स्टाइल और लेआउट के 'जादू' के बारे में बताने वाली सुविधाएं बनाना" है. Houdini स्पेसिफ़िकेशन का कलेक्शन, ब्राउज़र के रेंडरिंग इंजन की क्षमता को बढ़ाने के लिए डिज़ाइन किया गया है. इससे, हमारे स्टाइल के बारे में ज़्यादा जानकारी मिलती है और रेंडरिंग इंजन को बेहतर बनाया जा सकता है. इसके साथ ही, JavaScript में सीएसएस की वैल्यू टाइप करना और परफ़ॉर्मेंस हिट के बिना पॉलीफ़िल करना या नए सीएसएस का आविष्कार करना अब मुमकिन हो गया है. हुडीनी के पास वेब पर क्रिएटिविटी बढ़ाने की क्षमता है.

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 पर मौजूद