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

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

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

हुडीनी क्या है?

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

सीएसएस प्रॉपर्टी और वैल्यू एपीआई लेवल 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 डालने की अनुमति होगी.

गॉचास

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

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

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

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

<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 देखें और उसे खुद करके देखें.

नतीजा

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

Unsplash पर मइक जोनिट्ज़ की फ़ोटो