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

Rob Dodson

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

सीएसएस क्लटर

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

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

कस्टम प्रॉपर्टी के बारे में खास जानकारी

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

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

इसका उदाहरण यहां दिया गया है

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

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

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

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

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

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

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

--header-color: #06c;

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

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

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

कैस्केड

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

: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 */
}

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

<!-- 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 में कस्टम प्रॉपर्टी के साथ काम करना

रनटाइम के दौरान कस्टम प्रॉपर्टी की वैल्यू पाने के लिए, कंप्यूट किए गए CSSStyleDeflaration ऑब्जेक्ट के 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 पर जाकर, अन्य ब्राउज़र में उनकी प्रोग्रेस पर नज़र रखी जा सकती है.