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

Una Kravets

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

हुडीनी की छतरी के अंदर सीएसएस में सबसे खास चीज़ जोड़ी गई है प्रॉपर्टी और वैल्यू एपीआई.

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

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

यहां कस्टम प्रॉपर्टी सेट करने का एक उदाहरण दिया गया है (सोचें: सीएसएस वैरिएबल), लेकिन अब सिंटैक्स (टाइप), शुरुआती वैल्यू (फ़ॉलबैक), और इनहेरिटेंस बूलियन के साथ (ऐसा होता है यह अपने पैरंट से वैल्यू इनहेरिट करता है या नहीं?). ऐसा करने का मौजूदा तरीका यह है 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 प्रॉपर्टीज़ और वैल्यू एपीआई के साथ काम करता है. इससे ट्रांज़िशन में आसानी से बदलाव हो जाएगा. दाईं ओर मौजूद ब्राउज़र में ऐसा नहीं होता. कॉन्टेंट बनाने गैर-समर्थित ब्राउज़र इस परिवर्तन को केवल एक स्ट्रिंग के रूप में पॉइंट 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 नियम, एक रोमांचक टेक्नोलॉजी को इससे आपको सीएसएस में ही, सिमेंटिक तौर पर सही सीएसएस लिखने की सुविधा मिलती है. सीखने में CSS Houdini और Properties and Value API के बारे में ज़्यादा जानने के लिए, ये संसाधन:

• क्या हुडीनी अब तक तैयार हैं?
• एमडीएन हुडिनी रेफ़रंस
• Huudini के नए एपीआई के साथ बेहतर कस्टम प्रॉपर्टी
• Huudini CSSWG से जुड़ी समस्या की सूची

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