सीएसएस वैरिएबल - आपको क्यों ध्यान देना चाहिए?

Rob Dodson

सीएसएस वैरिएबल को सीएसएस कस्टम प्रॉपर्टी कहा जाता है. ये Chrome 49 में लैंडिंग हो रहे हैं. ये सीएसएस में दोहराव को कम करने के काम आ सकते हैं. साथ ही, ये थीम स्विच करने और आने वाले समय में सीएसएस सुविधाओं को बढ़ाने/पॉलीफ़िल करने जैसे दमदार रनटाइम इफ़ेक्ट में भी काम आ सकते हैं.

सीएसएस क्लर्क

किसी ऐप्लिकेशन को डिज़ाइन करते समय ब्रैंड कलर का एक सेट रखना एक सामान्य तरीका है, जिसे ऐप्लिकेशन की स्टाइल में एक जैसा रखने के लिए फिर से इस्तेमाल किया जाएगा. माफ़ करें, अपनी सीएसएस में इन रंग की वैल्यू को बार-बार दोहराना न सिर्फ़ आसान काम है, बल्कि इसमें गड़बड़ी भी हो सकती है. अगर किसी समय, किसी एक रंग को बदलने की ज़रूरत महसूस होती है, तो हवा की ओर ध्यान दिया जा सकता है और चीज़ें “ढूंढें और बदलें”

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

कस्टम प्रॉपर्टी के बारे में कम शब्दों में जानकारी

कस्टम प्रॉपर्टी ने हमारे सीएसएस टूलबॉक्स में दो नई सुविधाएं जोड़ी हैं:

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

यह दिखाने के लिए, यहां एक उदाहरण दिया गया है

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color, लेखक की ओर से तय की गई कस्टम प्रॉपर्टी है, जिसकी वैल्यू #06c है. ध्यान दें कि सभी कस्टम प्रॉपर्टी दो डैश से शुरू होती हैं.

var() फ़ंक्शन खुद को कस्टम प्रॉपर्टी की वैल्यू से बदल देता है और उसकी जगह ले लेता है. इससे, color: #06c; मिलता है. अगर कस्टम प्रॉपर्टी आपके स्टाइलशीट में कहीं बताई गई है, तो यह var फ़ंक्शन के लिए उपलब्ध होनी चाहिए.

सिंटैक्स पहली बार में कुछ अजीब लग सकता है. कई डेवलपर पूछते हैं, "वैरिएबल के नाम के लिए सिर्फ़ $foo का इस्तेमाल क्यों नहीं करना चाहिए?" इस तरीके को खास तौर पर जितना हो सके उतना लचीला बनाने के लिए चुना गया था. इससे आने वाले समय में $foo मैक्रो के लिए भी अनुमति मिल सकती है. बैकस्टोरी के लिए, दिए गए खास लेखक टैब एटकिन्स की यह पोस्ट पढ़ी जा सकती है.

कस्टम प्रॉपर्टी सिंटैक्स

कस्टम प्रॉपर्टी का सिंटैक्स आसान है.

--header-color: #06c;

ध्यान दें कि कस्टम प्रॉपर्टी केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) होती हैं. इसलिए, --header-color और --Header-Color अलग-अलग कस्टम प्रॉपर्टी हैं. भले ही, वे अंकित करने में आसान लग सकते हैं, लेकिन कस्टम प्रॉपर्टी के लिए अनुमति वाला सिंटैक्स असल में बहुत ज़्यादा अनुमति वाला है. उदाहरण के लिए, यह एक मान्य कस्टम प्रॉपर्टी है:

--foo: if(x > 5) this.width = 10;

हालांकि, यह वैरिएबल के रूप में काम का नहीं होगा, क्योंकि यह किसी भी सामान्य प्रॉपर्टी में अमान्य होगा. हालांकि, इसे रनटाइम के दौरान JavaScript के साथ पढ़ा जा सकता है और इस पर कार्रवाई की जा सकती है. इसका मतलब है कि कस्टम प्रॉपर्टी में ऐसी सभी दिलचस्प तकनीकों को इस्तेमाल किया जा सकता है जो मौजूदा सीएसएस प्रीप्रोसेसर से फ़िलहाल मुमकिन नहीं हैं. इसलिए, अगर आपको लगता है कि “जम्हाई मुझे SASS है, तो क्या फ़र्क पड़ता है...”, तो एक बार फिर से देख लें! ये वे वैरिएबल नहीं हैं जिनके साथ आपको काम करने की सुविधा मिलती रही है.

कैस्केड

कस्टम प्रॉपर्टी, स्टैंडर्ड कैस्केड नियमों का पालन करती हैं, ताकि एक ही प्रॉपर्टी को अलग-अलग लेवल पर तय किया जा सके

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

इसका मतलब है कि रिस्पॉन्सिव डिज़ाइन में मदद के लिए, मीडिया क्वेरी में कस्टम प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसके इस्तेमाल का एक उदाहरण यह हो सकता है कि स्क्रीन साइज़ बढ़ने के साथ-साथ सेक्शन के मुख्य एलिमेंट के मार्जिन को बढ़ाया जाए:

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

यह बताना ज़रूरी है कि ऊपर दिए गए कोड का स्निपेट, मौजूदा समय के सीएसएस प्रीप्रोसेसर का इस्तेमाल नहीं कर सकता. ये वे हैं जो मीडिया क्वेरी के अंदर वैरिएबल तय नहीं कर पा रहे हैं. यह क्षमता होने से बहुत सी चीज़ें अनलॉक हो जाती हैं!

ऐसी कस्टम प्रॉपर्टी भी बनाई जा सकती हैं जो दूसरी कस्टम प्रॉपर्टी से अपनी वैल्यू लें. यह थीम बनाने के लिए बहुत मददगार हो सकता है:

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

var() फ़ंक्शन

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

var(<custom-property-name> [, <declaration-value> ]? )

जहां <custom-property-name>, लेखक की ओर से तय की गई कस्टम प्रॉपर्टी का नाम है, जैसे कि --foo. साथ ही, <declaration-value> एक फ़ॉलबैक वैल्यू है, जिसका इस्तेमाल पहचानी गई कस्टम प्रॉपर्टी के अमान्य होने पर किया जाता है. फ़ॉलबैक वैल्यू, कॉमा से अलग की गई सूची हो सकती हैं, जिन्हें एक वैल्यू में जोड़ दिया जाएगा. उदाहरण के लिए, var(--font-stack, "Roboto", "Helvetica"); में "Roboto", "Helvetica" के फ़ॉलबैक के बारे में बताया गया है. ध्यान रखें कि मार्जिन और पैडिंग के लिए इस्तेमाल की जाने वाली शॉर्टहैंड वैल्यू, कॉमा से अलग नहीं की जाती हैं. इसलिए, पैडिंग के लिए सही फ़ॉलबैक ऐसा दिखेगा.

p {
    padding: var(--pad, 10px 15px 20px);
}

इन फ़ॉलबैक वैल्यू का इस्तेमाल करके, कॉम्पोनेंट लेखक अपने एलिमेंट के लिए डिफ़ेंसिव स्टाइल लिख सकता है:

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

यह तकनीक खास तौर पर शैडो DOM का इस्तेमाल करने वाले वेब कॉम्पोनेंट की थीम बनाने के लिए फ़ायदेमंद है, क्योंकि कस्टम प्रॉपर्टी शैडो की सीमाओं को पार कर सकती हैं. वेब कॉम्पोनेंट बनाने वाला व्यक्ति, फ़ॉलबैक वैल्यू का इस्तेमाल करके शुरुआती डिज़ाइन बना सकता है. साथ ही, थीम में कस्टम प्रॉपर्टी के रूप में “हुक” दिखा सकता है.

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

var() का इस्तेमाल करते समय, कुछ बातों का ध्यान रखें. वैरिएबल, प्रॉपर्टी के नाम नहीं हो सकते. उदाहरण के लिए:

.foo {
    --side: margin-top;
    var(--side): 20px;
}

हालांकि, यह margin-top: 20px; सेट करने के बराबर नहीं है. इसके बजाय, दूसरी घोषणा अमान्य है और उसे गड़बड़ी के तौर पर खारिज कर दिया जाता है.

इसी तरह, अगर आप कोई ऐसी वैल्यू नहीं बना सकते जिसका कुछ हिस्सा वैरिएबल से दिया गया हो, तो आप खुद ऐसी वैल्यू नहीं बना सकते:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

ध्यान रखें कि यह margin-top: 20px; पर सेट करने के समान नहीं है. कोई वैल्यू बढ़ाने के लिए, आपको किसी और चीज़ की ज़रूरत होगी: calc() फ़ंक्शन.

calc() के साथ बिल्डिंग वैल्यू

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

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

JavaScript में कस्टम प्रॉपर्टी के साथ काम करना

रनटाइम पर कस्टम प्रॉपर्टी की वैल्यू पाने के लिए, कंप्यूट किए गए CSSStyleघोषणा ऑब्जेक्ट के getPropertyValue() तरीके का इस्तेमाल करें.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

इसी तरह, रनटाइम पर कस्टम प्रॉपर्टी की वैल्यू सेट करने के लिए, CSSStyleDeclaration ऑब्जेक्ट के setProperty() तरीके का इस्तेमाल करें.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

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

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

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

ब्राउज़र समर्थन

फ़िलहाल, Chrome 49, Firefox 42, Safari 9.1, और iOS Safari 9.3 कस्टम प्रॉपर्टी के साथ काम करते हैं.

डेमो

उन सभी दिलचस्प तकनीकों की एक झलक पाने के लिए, सैंपल देखें. इससे आपको कस्टम प्रॉपर्टी का फ़ायदा मिल सकता है.

इसके बारे में और पढ़ें

अगर आप कस्टम प्रॉपर्टी के बारे में ज़्यादा जानना चाहते हैं, तो Google Analytics टीम के फ़िलिप वॉल्टन ने कस्टम प्रॉपर्टी को लेकर उनके उत्साहित क्यों हैं पर एक जानकारी लिखी है. साथ ही, chromestatus.com पर जाकर, दूसरे ब्राउज़र में उनकी प्रोग्रेस को देखा जा सकता है.