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

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

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

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

--header-color: #06c;

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

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

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

द झरना

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

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

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

/* 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');

आप कस्टम प्रॉपर्टी का मान इस तरह सेट कर सकते हैं कि वह दूसरे कस्टम var() फ़ंक्शन का इस्तेमाल करके रनटाइम पर प्रॉपर्टी का इस्तेमाल करें setProperty().

/* 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.