इस टूल के बारे में
CSS कस्टम प्रॉपर्टीज़ — जिन्हें आमतौर पर CSS वेरिएबल कहा जाता है — आपको किसी मान (जैसे ब्रांड कलर, स्पेसिंग यूनिट या फॉन्ट स्टैक) को एक बार परिभाषित करने और उसे var(--name) के ज़रिए हर जगह दोबारा उपयोग करने देती हैं। बार-बार आने वाले मानों को एक जगह रखने का मतलब है कि :root स्तर पर किया गया एक बदलाव पूरी स्टाइलशीट में अपने आप लागू हो जाता है, बजाय दर्जनों फ़ाइलों में ढूंढ-बदल करने के; और चूंकि कस्टम प्रॉपर्टीज़ लाइव DOM मान होते हैं, JavaScript या मीडिया क्वेरी रनटाइम पर इन्हें पढ़ और बदल सकती हैं — जिससे बिना CSS छुए तुरंत थीम बदलना, डार्क मोड टॉगल करना या यूज़र-एडजस्टेबल स्पेसिंग संभव हो जाती है।
नीचे हर पंक्ति में एक नाम और मान टाइप करें; यह टूल हर नाम को अपने-आप साफ़ कर देता है, शुरुआत में अतिरिक्त "--" हटाकर और अमान्य अक्षरों को हाइफ़न से बदलकर — इसलिए प्रीफ़िक्स छूट जाने या गलती से स्पेस आ जाने जैसी टाइपो कभी भी जनरेट किए गए ब्लॉक को नहीं बिगाड़ती। जनरेट हुए :root { ... } आउटपुट को सीधे अपनी स्टाइलशीट में कॉपी करें, या इसे अपनी अलग .css फ़ाइल के रूप में डाउनलोड करके कहीं भी @import करें। टाइप करते समय सब कुछ आपके ब्राउज़र में स्थानीय रूप से होता है; कुछ भी अपलोड नहीं होता।
अक्सर पूछे जाने वाले प्रश्न
क्या यह मेरे मान कहीं अपलोड करता है?
नहीं। सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है — आपके नाम/मान जोड़े कभी आपके डिवाइस से बाहर नहीं जाते।
क्या मैं वेरिएबल को :root के बजाय किसी विशिष्ट सेलेक्टर तक सीमित कर सकता हूं?
हाँ — एक कस्टम सेलेक्टर सेट करें और जनरेट किया गया CSS ब्लॉक :root के बजाय उसका उपयोग करेगा।