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

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 मैक्रो के इस्तेमाल की अनुमति दे सके. इस बारे में ज़्यादा जानने के लिए, स्पेसिफ़िकेशन के लेखकों में से एक, टैब अटकिंस की यह पोस्ट पढ़ें.

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

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

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

रनटाइम के दौरान किसी कस्टम प्रॉपर्टी की वैल्यू पाने के लिए, कैलकुलेट किए गए CSSStyleDeclaration ऑब्जेक्ट के getPropertyValue() method का इस्तेमाल करें.

/* 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 पर जाकर, अन्य ब्राउज़र में उनकी प्रोग्रेस पर नज़र रखी जा सकती है.