सीएसएस वेरिएबल्स - वेब विकास के क्षेत्र में गतिशील और अनुकूलन योग्य डिज़ाइन प्रभाव उत्पन्न करने की क्षमता आवश्यक है। कस्टम गुण, या सीएसएस चर, इस दायरे का एक तरीका प्रदान करते हैं जो डेवलपर्स को स्टाइलशीट के भीतर पुन: प्रयोज्य मान निर्दिष्ट करने और रनटाइम के दौरान उन्हें गतिशील रूप से संशोधित करने की अनुमति देता है। यह ब्लॉग पोस्ट एक व्यावहारिक उदाहरण के साथ सीएसएस वेरिएबल्स का पता लगाएगा जो उनकी गतिशील क्षमता पर प्रकाश डालता है।

सीएसएस वेरिएबल्स को समझना
एक स्टाइलशीट के पुन: प्रयोज्य मानों को CSS वेरिएबल्स का उपयोग करके परिभाषित और उपयोग किया जा सकता है। उन्हें - उपसर्ग के बाद एक नाम का उपयोग करके घोषित किया जाता है, आमतौर पर वैश्विक उपलब्धता के लिए :root छद्म वर्ग के भीतर। उनका उपयोग फ़ॉन्ट, रंग, चौड़ाई, ऊंचाई आदि जैसे मूल्यों को संग्रहीत करने के लिए किया जा सकता है। सीएसएस कोड में परिभाषित होने के बाद इन चर का उपयोग अन्य फ़ाइलों में भी किया जा सकता है। (और पढ़ें)

इस प्रकार CSS वेरिएबल को परिभाषित किया जाता है:

:root {
  --main-color: #3498db;
}

इस उदाहरण में, हमने -मेन-कलर नाम का एक वेरिएबल परिभाषित किया है और इसका मान #3498db है। हमने इसे :root छद्म वर्ग के भीतर घोषित किया है, जो यह सुनिश्चित करता है कि वेरिएबल सीएसएस कोड में हर जगह पहुंच योग्य है।

सीएसएस वेरिएबल्स का उपयोग कैसे करें
एक बार परिभाषित होने के बाद, आप उन तक पहुंचने के लिए var() फ़ंक्शन का उपयोग करके अपने सीएसएस कोड में कहीं भी सीएसएस वेरिएबल का उपयोग कर सकते हैं।

Var():

सीएसएस वैरिएबल var() आपको किसी अन्य संपत्ति के मूल्य के हिस्से को बदलने के लिए एक कस्टम संपत्ति का मूल्य दर्ज करने की अनुमति देता है..

वाक्य - विन्यास :

var(--custom-property);

उदाहरण :

.element {
  color: var(--main-color);
}

इस उदाहरण में, हम किसी तत्व का टेक्स्ट रंग सेट करने के लिए -मेन-कलर वेरिएबल का उपयोग कर रहे हैं। यदि आप बाद में मुख्य रंग बदलने का निर्णय लेते हैं, तो आप केवल वेरिएबल के मान को अपडेट कर सकते हैं, और यह स्वचालित रूप से उन सभी तत्वों पर प्रतिबिंबित होगा जहां इसका उपयोग किया गया है।

1.डायनामिक थीम रंग बनाना
आउटपुट

ऐसी स्थिति पर विचार करें जहां आप एक वेबपेज डिज़ाइन करना चाहेंगे जहां थीम का रंग गतिशील रूप से बदलता है। आप उपयोगकर्ताओं को एक बटन क्लिक करने और फिर पृष्ठ की संपूर्ण रंग योजना में बदलाव देखने का विकल्प प्रदान करने में सक्षम होना चाहते हैं। आइए देखें कि सीएसएस वेरिएबल इसे कैसे संभव बना सकते हैं। (सीएसएस वेरिएबल के बारे में और पढ़ें)

HTML:

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

सीएसएस:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

जावास्क्रिप्ट:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

यह उदाहरण एक बटन और हेडर वाला एक वेबपेज दिखाता है। बटन और हेडर का पृष्ठभूमि रंग -प्राथमिक-रंग सीएसएस चर का उपयोग करके अनुकूलित किया गया है, जिसका डिफ़ॉल्ट मान #3498db है। एक जावास्क्रिप्ट स्क्रिप्ट बटन पर क्लिक करने पर एक यादृच्छिक हेक्साडेसिमल रंग कोड बनाती है, जिसे बाद में -प्राथमिक-रंग चर के नए मान के रूप में निर्दिष्ट किया जाता है। परिणामस्वरूप, उपयोगकर्ताओं को एक दिलचस्प और इंटरैक्टिव अनुभव मिलता है क्योंकि बटन और हेडर का थीम रंग गतिशील रूप से बदलता है।

निष्कर्ष
वेब विकास में, सीएसएस वैरिएबल शैलियों को प्रबंधित करने का एक बहुमुखी और प्रभावी तरीका प्रदान करते हैं। पुन: प्रयोज्य मूल्यों को परिभाषित करके और उन्हें गतिशील रूप से लागू करके, डेवलपर्स अधिक रखरखाव योग्य और अनुकूलन योग्य वेबसाइट बना सकते हैं। सीएसएस वैरिएबल आपके ऑनलाइन प्रोजेक्ट की शैली क्षमताओं को बेहतर बनाने के लिए एक व्यापक टूलसेट प्रदान करते हैं, चाहे फोकस थीम, जवाबदेही या एनीमेशन पर हो। अपने डिज़ाइन में उनका पूरी तरह से उपयोग करने के लिए, उन्हें अपने सीएसएस वर्कफ़्लो में एकीकृत करना शुरू करें! (सीएसएस वेरिएबल के बारे में और पढ़ें)