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

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

Sam Richard

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

Houdini क्या है?

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

सीएसएस प्रॉपर्टी और वैल्यू एपीआई लेवल 1

सीएसएस प्रॉपर्टी और वैल्यू एपीआई लेवल 1 (Houdini Props और Vals) की मदद से, हम अपनी कस्टम प्रॉपर्टी को स्ट्रक्चर दे सकते हैं. कस्टम प्रॉपर्टी का इस्तेमाल करने पर, यह मौजूदा स्थिति होती है:

.thing {
  --my-color: green;
}

कस्टम प्रॉपर्टी के टाइप नहीं होते हैं. इसलिए, उन्हें अनचाहे तरीकों से बदला जा सकता है. उदाहरण के लिए, देखें कि अगर --my-color को किसी यूआरएल के साथ तय किया जाता है, तो क्या होता है.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

यहां --my-color टाइप नहीं किया गया है. इसलिए, इसे नहीं पता कि यूआरएल, रंग की मान्य वैल्यू नहीं है! जब हम इसका इस्तेमाल करते हैं, तो यह डिफ़ॉल्ट वैल्यू पर वापस आ जाता है. जैसे, color के लिए काला, background के लिए पारदर्शी. Houdini Props और Vals की मदद से, कस्टम प्रॉपर्टी रजिस्टर की जा सकती हैं, ताकि ब्राउज़र को पता चल सके कि उसे क्या करना चाहिए!

अब कस्टम प्रॉपर्टी --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 शब्द का इस्तेमाल किया जा सकता है.

Gotchas

Houdini Props और Vals के साथ दो समस्याएं हैं. पहली बात यह है कि रजिस्टर की गई किसी मौजूदा प्रॉपर्टी को तय करने के बाद, उसे अपडेट नहीं किया जा सकता. साथ ही, किसी प्रॉपर्टी को फिर से रजिस्टर करने की कोशिश करने पर, गड़बड़ी का मैसेज दिखेगा. इसमें बताया जाएगा कि प्रॉपर्टी को पहले ही तय किया जा चुका है.

दूसरा, स्टैंडर्ड प्रॉपर्टी के उलट, रजिस्टर की गई प्रॉपर्टी को पार्स करते समय उनकी पुष्टि नहीं की जाती. इसके बजाय, जब उनकी गिनती की जाती है, तब उनकी पुष्टि की जाती है. इसका मतलब है कि एलिमेंट की प्रॉपर्टी की जांच करते समय, अमान्य वैल्यू, अमान्य के तौर पर नहीं दिखेंगी. साथ ही, किसी मान्य प्रॉपर्टी के बाद अमान्य प्रॉपर्टी शामिल करने पर, वह मान्य प्रॉपर्टी पर वापस नहीं जाएगी. हालांकि, अमान्य प्रॉपर्टी, रजिस्टर की गई प्रॉपर्टी की डिफ़ॉल्ट वैल्यू पर वापस चली जाएगी.

कस्टम प्रॉपर्टी को ऐनिमेट करना

रजिस्टर की गई कस्टम प्रॉपर्टी, टाइप चेकिंग के अलावा एक और मज़ेदार बोनस देती है: इसे ऐनिमेट करने की सुविधा! बेसिक ऐनिमेशन का उदाहरण कुछ ऐसा दिखता है:

<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 का हिस्सा है. इस तरह, हमारा लीनियर ग्रेडिएंट ऐनिमेट होगा. पूरा कोड देखने के लिए, नीचे दिया गया Codepen देखें. साथ ही, इसे खुद इस्तेमाल करके देखें.

नतीजा

Houdini ब्राउज़र पर उपलब्ध होने वाला है. इसकी मदद से, सीएसएस के साथ काम करने और उसे बेहतर बनाने के बिलकुल नए तरीके मिलेंगे. Paint API पहले से ही उपलब्ध है. अब कस्टम प्रॉपर्टी और वैल्यू भी उपलब्ध हैं. हमारा क्रिएटिव टूलबॉक्स बड़ा हो रहा है. इससे हमें टाइप की गई सीएसएस प्रॉपर्टी तय करने और उनका इस्तेमाल करके, नए और दिलचस्प डिज़ाइन बनाने और उन्हें ऐनिमेट करने की सुविधा मिलती है. Houdini की समस्याओं की सूची में और भी बहुत कुछ है. यहां सुझाव/राय दी जा सकती है और Houdini के बारे में ज़्यादा जानकारी देखी जा सकती है. Houdini का मकसद ऐसी सुविधाएं डेवलप करना है जो वेब पर स्टाइलिंग और लेआउट के "जादू" को समझाती हैं. इसलिए, इन जादुई सुविधाओं का इस्तेमाल करें.