@property: सीएसएस वैरिएबल को सुपरपावर देना

Una Kravets

CSS Houdini एक ऐसा शब्द है जो कई तरह के एपीआई को कवर करता है. ये एपीआई, सीएसएस रेंडरिंग इंजन के कुछ हिस्सों को दिखाते हैं और डेवलपर को सीएसएस ऑब्जेक्ट मॉडल का ऐक्सेस देते हैं. यह सीएसएस नेटवर्क के लिए एक बड़ा बदलाव है. इससे डेवलपर, ब्राउज़र को यह बता सकते हैं कि कस्टम सीएसएस को कैसे पढ़ा और पार्स किया जाए. इसके लिए, उन्हें ब्राउज़र वेंडर से इन सुविधाओं के लिए पहले से मौजूद सहायता मिलने का इंतज़ार नहीं करना पड़ेगा. बहुत शानदार!

Houdini के तहत, सीएसएस में सबसे दिलचस्प बदलावों में से एक है प्रॉपर्टी और वैल्यू एपीआई.

यह एपीआई आपकी सीएसएस कस्टम प्रॉपर्टी (जिन्हें आम तौर पर सीएसएस वैरिएबल भी कहा जाता है) को बेहतर बनाता है. ऐसा, उन्हें सिंटैक्स के हिसाब से सेमैनटिक मतलब और फ़ॉलबैक वैल्यू देकर किया जाता है. इससे सीएसएस की जांच करने की सुविधा मिलती है.

Houdini कस्टम प्रॉपर्टी लिखना

यहां कस्टम प्रॉपर्टी (सीएसएस वैरिएबल) सेट करने का उदाहरण दिया गया है. हालांकि, अब इसमें सिंटैक्स (टाइप), शुरुआती वैल्यू (फ़ॉलबैक), और इनहेरिटेंस बूलियन (क्या यह अपने पैरंट से वैल्यू इनहेरिट करता है या नहीं?) है. फ़िलहाल, ऐसा करने के लिए JavaScript में CSS.registerProperty() का इस्तेमाल किया जाता है. हालांकि, जिन ब्राउज़र में यह सुविधा काम करती है उनमें @property का इस्तेमाल किया जा सकता है:

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

अब --colorPrimary को किसी भी अन्य सीएसएस कस्टम प्रॉपर्टी की तरह, var(--colorPrimary) के ज़रिए ऐक्सेस किया जा सकता है. हालांकि, यहां फ़र्क़ यह है कि --colorPrimary को सिर्फ़ स्ट्रिंग के तौर पर नहीं पढ़ा जाता. इसमें डेटा है!

फ़ॉलबैक वैल्यू

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

नीचे दिया गया उदाहरण देखें. --colorPrimary वैरिएबल की वैल्यू magenta है.initial-value हालांकि, डेवलपर ने इसके लिए अमान्य वैल्यू "23" दी है. @property के बिना, सीएसएस पार्स करने वाला टूल अमान्य कोड को अनदेखा कर देगा. अब पार्स करने वाला टूल, magenta पर वापस आ जाता है. इससे सीएसएस में, असल फ़ॉलबैक और टेस्टिंग की सुविधा मिलती है. बढ़िया!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

सिंटैक्स

सिंटैक्स की सुविधा की मदद से, अब किसी टाइप को बताकर, सेमैटिक सीएसएस लिखी जा सकती है. फ़िलहाल, इन टाइप के वीडियो अपलोड किए जा सकते हैं:

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (कस्टम आइडेंटिफ़ायर स्ट्रिंग)

सिंटैक्स सेट करने पर, ब्राउज़र कस्टम प्रॉपर्टी की टाइप-जांच कर पाता है. इससे कई फ़ायदे मिलते हैं.

इस बात को समझाने के लिए, हम आपको ग्रेडिएंट को ऐनिमेट करने का तरीका बताएंगे. फ़िलहाल, ग्रेडिएंट वैल्यू के बीच आसानी से ऐनिमेशन (या इंटरपोलेशन) करने का कोई तरीका नहीं है. ऐसा इसलिए, क्योंकि हर ग्रेडिएंट एलान को स्ट्रिंग के तौर पर पार्स किया जाता है.

इस उदाहरण में, ग्रेडिएंट स्टॉप के प्रतिशत को ऐनिमेशन के ज़रिए, शुरू में 40% से लेकर आखिर में 100% तक बदला जा रहा है. इसके लिए, कर्सर घुमाने की सुविधा का इस्तेमाल किया जा रहा है. आपको ऊपर मौजूद ग्रेडिएंट रंग का, नीचे की ओर धीरे-धीरे बदलना दिखेगा.

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

हालांकि, अगर कस्टम प्रॉपर्टी लिखते समय सिंटैक्स टाइप का एलान किया जाता है और फिर ऐनिमेशन चालू करने के लिए उन कस्टम प्रॉपर्टी का इस्तेमाल किया जाता है, तो आपको ट्रांज़िशन दिखेगा. कस्टम प्रॉपर्टी --gradPoint को इस तरह से इंस्टैंशिएट किया जा सकता है:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

इसके बाद, जब इसे ऐनिमेट करने का समय आता है, तो शुरुआती 40% से 100% पर वैल्यू अपडेट की जा सकती है:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

इससे अब ग्रेडिएंट ट्रांज़िशन आसानी से होगा.

नतीजा

@property नियम की मदद से, सीएसएस में ही सीएसएस लिखी जा सकती है. इससे, इस बेहतरीन टेक्नोलॉजी को और भी आसानी से ऐक्सेस किया जा सकता है. CSS Houdini और प्रॉपर्टी और वैल्यू एपीआई के बारे में ज़्यादा जानने के लिए, ये संसाधन देखें:

• क्या Houdini अब इस्तेमाल के लिए तैयार है?
• MDN Houdini का रेफ़रंस
• Houdini के नए एपीआई की मदद से, स्मार्ट कस्टम प्रॉपर्टी
• Houdini CSSWG की समस्याओं की सूची

Unsplash से ली गई यह फ़ोटो, क्रिस्टियन एस्कोबार ने क्लिक की है.