@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 और प्रॉपर्टीज़ and Value API के बारे में ज़्यादा जानने के लिए, ये संसाधन देखें:

अनस्प्लैश पर क्रिस्टियन एस्कोबार की फ़ोटो.