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

Una Kravets

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

हुडीनी छतरी में, सीएसएस के सबसे शानदार फ़ीचर में से एक हैProperties and value API.

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

हूडीनी कस्टम प्रॉपर्टी लिखी जा रही है

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

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

@property --colorPrimary {
  syntax: '';
  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 प्रॉपर्टीज़ and Value API के साथ काम करता है. इससे, ट्रांज़िशन के दौरान आसान ग्रेडिएंट स्टॉप ट्रांज़िशन चालू होता है. दाईं ओर मौजूद ब्राउज़र में ऐसा नहीं होता. काम न करने वाला ब्राउज़र इस बदलाव को सिर्फ़ पॉइंट A से पॉइंट B तक जाने वाली स्ट्रिंग के तौर पर समझ सकता है. यहां वैल्यू को इंटरपोल करने का कोई मौका नहीं होता और इसलिए, आपको कोई आसान ट्रांज़िशन नहीं दिखता.

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

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

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

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

ऐसा करने पर, बिना किसी रुकावट के ग्रेडिएंट ट्रांज़िशन चालू हो जाएगा.

नतीजा

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

• क्या हुडीनी अभी तैयार है?
• एमडीएन हुडिनी के रेफ़रंस
• hudini के नए एपीआई से मिलने वाली ज़्यादा स्मार्ट कस्टम प्रॉपर्टी
• Houdini CSSWG की समस्या की सूची

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