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

Una Kravets

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

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

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

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

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

अलग JavaScript फ़ाइल (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
सीएसएस फ़ाइल में शामिल है (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

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

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

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

नीचे दिए गए उदाहरण पर गौर करें. --colorPrimary वैरिएबल की वैल्यू magenta है. हालांकि, डेवलपर ने इसकी अमान्य वैल्यू "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 (कस्टम आइडेंटिफ़ायर स्ट्रिंग)

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

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

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

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

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

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

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

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

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

इससे अब स्मूद ग्रेडिएंट ट्रांज़िशन चालू हो जाएगा.

ग्रेडिएंट बॉर्डर को आसानी से ट्रांज़िशन करना. Glitch पर डेमो देखें

नतीजा

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

Unsplash पर क्रिस्टियन एस्कोबार की ओर से अपलोड की गई फ़ोटो.