कस्टम प्रॉपर्टी

मान लें कि आपने अपनी साइट के लिए कुछ शुरुआती स्टाइल बनाई हैं और आपको अपनी सीएसएस में कुछ वैल्यू बार-बार इस्तेमाल करनी पड़ रही हैं. आपने dodgerblue को प्राइमरी कलर के तौर पर इस्तेमाल किया है. साथ ही, इसे बटन बॉर्डर, लिंक टेक्स्ट, और हेडर के बैकग्राउंड में जोड़ा है. इसके अलावा, आपने डिज़ाइन टूल का इस्तेमाल करके, साइट के अन्य हिस्सों के लिए नीले रंग के कुछ वैरिएंट चुने हैं. इसके बाद, आपको स्टाइल गाइड मिलती है और प्राइमरी रंग अब oklch(70% 0.15 270) है.

कस्टम प्रॉपर्टी या सीएसएस वैरिएबल की मदद से, सीएसएस में वैल्यू को व्यवस्थित किया जा सकता है और उनका दोबारा इस्तेमाल किया जा सकता है. इससे आपकी स्टाइल ज़्यादा लचीली हो जाती हैं और उन्हें समझना आसान हो जाता है.

प्रॉपर्टी बनाना

प्रॉपर्टी बनाने का सबसे आसान तरीका यह है कि आप अपनी पसंद के नाम वाली नई प्रॉपर्टी पर कोई वैल्यू सेट करें.

.card {
  --base-size: 1em;
}

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

इसके बाद, इस प्रॉपर्टी को var() फ़ंक्शन की मदद से ऐक्सेस किया जा सकता है. इस उदाहरण में, .card-title के अंदर फ़ॉन्ट साइज़ को --base-size वैल्यू से दोगुना किया गया है.

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

कस्टम प्रॉपर्टी का इस्तेमाल करना

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

फ़ॉलबैक

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

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

अमान्य मान

अगर कोई कस्टम प्रॉपर्टी, अमान्य वैल्यू पर सेट है, तो उस प्रॉपर्टी के लिए उस एलिमेंट पर किए गए अन्य मान्य एलान का इस्तेमाल नहीं किया जाएगा. उदाहरण के लिए, background-color प्रॉपर्टी के लिए 1em वैल्यू. ऐसा इसलिए होता है, क्योंकि ब्राउज़र को यह पता नहीं चल पाता कि कोई वैल्यू अमान्य है या नहीं. ऐसा तब तक होता है, जब तक वह वैल्यू को कंप्यूट करते समय अन्य एलान खारिज नहीं कर देता. इसके बजाय, इस्तेमाल की गई वैल्यू, इनहेरिट की गई या शुरुआती वैल्यू होगी.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

ऊपर दिए गए उदाहरण में, .invalid एलिमेंट का बैकग्राउंड नीले रंग का नहीं होगा. इसके बजाय, background-color इनहेरिट नहीं करता है. इसलिए, वैल्यू transparent होगी, जो इसकी शुरुआती वैल्यू है.

ओवरराइड करना और इनहेरिटेंस

ज़्यादातर मामलों में, आपको कस्टम प्रॉपर्टी का डिफ़ॉल्ट तरीका चाहिए होता है. इसमें वैल्यू इनहेरिट होती हैं. किसी प्रॉपर्टी के लिए नई वैल्यू सेट करने पर, उस एलिमेंट और उसके सभी चाइल्ड एलिमेंट की वैल्यू वही होगी. ऐसा तब तक होगा, जब तक किसी दूसरी वैल्यू से उसे बदला नहीं जाता.

कस्टम प्रॉपर्टी, कैस्केड से तय होती हैं. इसलिए, इन्हें ज़्यादा खास सिलेक्टर से भी बदला जा सकता है.

@property की मदद से ज़्यादा कंट्रोल

वैल्यू सेट करके बनाई गई कस्टम प्रॉपर्टी किसी भी टाइप की हो सकती है. साथ ही, यह इनहेरिट करती है. कस्टम प्रॉपर्टी को ज़्यादा बेहतर तरीके से कंट्रोल करने के लिए, @property नियम का इस्तेमाल किया जा सकता है.

हमने पहले जो --base-size प्रॉपर्टी बनाई थी वह इस @property के बराबर होगी.

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

syntax वैल्यू, सीएसएस वैल्यू के उन टाइप को सेट करती है जो प्रॉपर्टी के लिए मान्य हैं. अगर उस प्रॉपर्टी पर कोई दूसरा टाइप सेट किया जाता है, तो वह अमान्य हो जाएगा. इसके बाद, वह शुरुआती वैल्यू पर वापस आ जाएगा या कैस्केड में ऊपर की ओर सेट की गई इनहेरिट की गई वैल्यू पर वापस आ जाएगा.

@property का इस्तेमाल करके कस्टम प्रॉपर्टी बनाते समय, inherit: false का इस्तेमाल करके इनहेरिटेंस की सुविधा बंद की जा सकती है. इनहेरिटेंस की सुविधा बंद होने पर, कस्टम प्रॉपर्टी की वैल्यू को बदलने से, चुनी गई प्रॉपर्टी की वैल्यू बदल जाती है. हालांकि, इससे उसकी चाइल्ड प्रॉपर्टी की वैल्यू नहीं बदलती. यह अक्सर तब काम आता है, जब कई सिलेक्टर एक ही एलिमेंट को टारगेट करते हैं.

initial-value प्रॉपर्टी की वैल्यू सेट करता है. हालांकि, इसे बाद में बदला जा सकता है. अगर सिंटैक्स * नहीं है, तो @property को initial-value सेट करना होगा. * का मतलब है कि यह किसी भी सीएसएस टाइप का हो सकता है. इससे यह पक्का होता है कि प्रॉपर्टी की वैल्यू हमेशा तय किए गए सिंटैक्स के हिसाब से होगी और कभी भी 'तय नहीं की गई' नहीं होगी.

JavaScript की मदद से कस्टम प्रॉपर्टी अपडेट करना

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

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

इस उदाहरण में, #my-button एलिमेंट पर स्टाइल टैग को अपडेट किया गया है. DevTools में इसकी जांच करने पर, आपको यह दिखेगा:

<button id="my-button" style="--color: orange">Click me</button>

ऊपर दिए गए उदाहरण में, यह दिखाया गया है कि कस्टम एचटीएमएल एट्रिब्यूट में सेव किए गए डेटा को ऐक्सेस करके, कस्टम प्रॉपर्टी कैसे सेट की जा सकती हैं. हर बटन में data-color एट्रिब्यूट होता है. इसकी वैल्यू कोई खास रंग होती है. बॉडी एलिमेंट पर सेट की गई --background कस्टम प्रॉपर्टी, उस बटन पर क्लिक करने पर data-color की वैल्यू पर रीसेट हो जाती है.

किसी एलिमेंट पर प्रॉपर्टी की वैल्यू पाने के लिए, getComputedStyle(element).getPropertyValue("--variable") का इस्तेमाल भी किया जा सकता है. अगर आपके लॉजिक को कैस्केड की गई वैल्यू का जवाब देना है, तो यह फ़ंक्शन काम का हो सकता है.