CSS Custom Properties

एक घर design करने की कल्पना करें। आप अपने living room की दीवारों, kitchen cabinets, और front door के लिए blue paint का एक specific, custom shade इस्तेमाल करने का फ़ैसला करते हैं। अगर आप standard paint cans खरीदते हैं, तो बाद में colors बदलने का फ़ैसला करने पर आपको हर एक surface को हाथ से दोबारा paint करना होगा। अब, एक smart paint system इस्तेमाल करने की कल्पना करें। आप अपना custom color एक central tank में mix करते हैं, इसे एक नाम देते हैं (जैसे '--accent-color'), और अपने paint brushes को उस tank से link करते हैं। अपने accents को blue से green में बदलने के लिए, आप बस उस एक central tank में color बदलते हैं, और आपकी सभी surfaces automatically update हो जाती हैं।

In this page:

Variables बनाम Preprocessor Variables
JavaScript के साथ Dynamic Updates
Variable Inheritance और Cascading
Standard Layout Theming Systems
Dark Mode Schemas Design करना

Syntax

css

:root {
  --custom-property: value;
}
selector {
  property: var(--custom-property);
}

Variables बनाम Preprocessor Variables

preprocessor variables (जैसे Sass या Less) के उलट जो browser तक पहुँचने से पहले static CSS में compile और hardened हो जाते हैं, native CSS custom properties dynamic होते हैं। वे browser के live DOM के अंदर रहते हैं, यानी आप उन्हें real-time में read, update, और manipulate कर सकते हैं।

Note:

native, dynamic page overrides को natively support करने के लिए preprocessor variables के बजाय native CSS variables इस्तेमाल करें।
Accepted values:
name: <value> — एक custom property declare करता है
var(--name) — property पढ़ता है
var(--name, fallback) — एक fallback value के साथ पढ़ता है
initial — किसी custom property को guaranteed-invalid पर reset करता है

Warning: सुनिश्चित करें कि आपके custom variable names browser standards का पालन करने के लिए हमेशा double hyphens से शुरू हों (जैसे, --main-color)।

उदाहरण: Variables vs. Preprocessor Variables

css

<style>
:root {
  --main-color: teal;
}
p {
  color: var(--main-color);
}
</style>
<p>A live, native CSS variable, not a compiled preprocessor one</p>

JavaScript के साथ Dynamic Updates

क्योंकि native CSS variables DOM का हिस्सा हैं, आप simple JavaScript scripts इस्तेमाल करके real-time में आसानी से उनकी values read, modify, और update कर सकते हैं, rich, interactive user settings बनाने देते हुए।

Note:

अपने user interaction handlers के अंदर अपनी CSS variables को dynamically update करने के लिए JavaScript इस्तेमाल करें।
Accepted values:
element.style.setProperty('--name', value) — इसे JavaScript से set करता है
getComputedStyle(el).getPropertyValue('--name') — इसे पढ़ता है
style.removeProperty('--name') — इसे हटाता है
var(--name) — CSS बदलाव को पकड़ लेता है

Warning: broken overrides रोकने के लिए सुनिश्चित करें कि आपका script सही CSS variable name को exactly case-sensitivity के साथ target करता है।

उदाहरण: Dynamic Updates with JavaScript

css

<style>
:root {
  --highlight: yellow;
}
.box {
  background: var(--highlight);
}
</style>
<div class="box" onclick="document.documentElement.style.setProperty('--highlight', 'pink')">Click to update --highlight live</div>

Variable Inheritance और Cascading

CSS variables standard CSS inheritance और cascading rules follow करते हैं। जब :root के बजाय किसी specific selector के अंदर declare किए जाते हैं, तो variable local होता है और सिर्फ उस element और उसके children के लिए accessible होता है।

Note:

अपने component styles को encapsulated और modular रखने के लिए local, scoped variables इस्तेमाल करें।
Accepted values:
:root पर declared --name — हर जगह available
एक class पर declared --name — उस subtree तक scoped
var(--name, fallback) — undefined होने पर fallback करता है
automatically inherit होता है — custom properties default रूप से inherit होते हैं

Warning: local variables को उनके parent container scope के बाहर reference करने की कोशिश fail हो जाएगी।

उदाहरण: Variable Inheritance and Cascading

css

<style>
.card {
  --card-bg: navy;
  background: var(--card-bg);
}
</style>
<div class="card">Local variable, scoped to this element and its children</div>

Standard Layout Theming Systems

CSS variables dynamic website theme changers बनाना आसान बना देते हैं। अपने page color variables को :root के अंदर define करके और उन्हें एक custom class (जैसे '.dark-mode') के तहत update करके, आप themes को instantly toggle कर सकते हैं।

Note:

themes को साफ़ तरीके से toggle करने के लिए custom data attributes को variables के साथ combine करें।
Accepted values:
name: <value> :root पर — global tokens
[data-theme="dark"] { --name: ... } — theme override
var(--name) — consumption
var(--name, fallback) — safe default

Warning: सुनिश्चित करें कि आपके color variables दोनों themes में high contrast बनाए रखें ताकि आपका content readable रहे।

उदाहरण: Standard Layout Theming Systems

css

<style>
:root {
  --bg: white;
}
.dark-mode {
  --bg: black;
  background: var(--bg);
  color: white;
}
</style>
<div class="dark-mode">Theme toggled by swapping one variable</div>

Dark Mode Schemas Design करना

आप prefers-color-scheme media query इस्तेमाल करके अपने dark mode theme को user की system preferences के आधार पर automatically activate होने के लिए design कर सकते हैं, query के अंदर अपने color variables को साफ़ तरीके से update करते हुए।

Note:

automated dark mode themes आसानी से बनाने के लिए prefers-color-scheme media queries को अपनी CSS variables के साथ combine करें।
Accepted values:
:root { --bg: ...; } — light tokens
@media (prefers-color-scheme: dark) — dark tokens
[data-theme="dark"] — manual override
color-scheme: light dark — native controls follow करते हैं

Warning: सुनिश्चित करें कि आपके text color variables आपके backgrounds के साथ update हों ताकि unreadable dark-on-dark text न बने।

उदाहरण: Designing Dark Mode Schemas

css

<style>
:root {
  --bg: white;
  --text: black;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: black;
    --text: white;
  }
}
body {
  background: var(--bg);
  color: var(--text);
}
</style>
<p>Activates automatically from system preferences</p>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Architecture: BEM Next Lesson → CSS Container Queries

CSS Custom Properties

Variables बनाम Preprocessor Variables

JavaScript के साथ Dynamic Updates

Variable Inheritance और Cascading

Standard Layout Theming Systems

Dark Mode Schemas Design करना

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code