नए if() फ़ंक्शन के साथ सीएसएस कंडीशनल

Una Kravets

पब्लिश होने की तारीख: 1 जुलाई, 2025

Chrome 137 से, if() फ़ंक्शन की मदद से सीएसएस इनलाइन कंडीशनल आज़माए जा सकते हैं. if(), स्टाइल क्वेरी और मीडिया क्वेरी जैसी डाइनैमिक स्टाइल के लिए, डेवलपर इंटरफ़ेस को बेहतर बनाता है. हालांकि, इसमें कुछ मुख्य अंतर हैं. इनके बारे में इस पोस्ट में बताया गया है.

सीएसएस if() फ़ंक्शन, शर्त-वैल्यू के पेयर की सीरीज़ का इस्तेमाल करके काम करता है. इसकी जानकारी यहां दी गई है:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

आपके पास else स्टेटमेंट देने का विकल्प होता है. इसका इस्तेमाल तब किया जाता है, जब कोई भी दूसरी शर्त पूरी न हो:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

फ़िलहाल, if() तीन अलग-अलग तरह की क्वेरी के साथ काम करता है:

• style(): स्टाइल से जुड़ी क्वेरी
• media(): मीडिया क्वेरी
• supports(): क्वेरी के साथ काम करता है

आइए, कुछ उदाहरणों की मदद से इसे समझते हैं:

डेमो: इनलाइन मीडिया क्वेरी

if() का इस्तेमाल करके, अपनी स्टाइल में इनलाइन मीडिया क्वेरी शामिल की जा सकती हैं. उदाहरण के लिए, किसी उपयोगकर्ता की थीम की प्राथमिकता (हल्का या गहरा रंग) देखी जा सकती है या व्यूपोर्ट की चौड़ाई के लिए इनलाइन मीडिया क्वेरी की जा सकती हैं. यहां दिए गए उदाहरण में, पॉइंटर डिवाइसों के लिए मीडिया क्वेरी दिखाई गई है. माउस जैसे फ़ाइन पॉइंटर वाले डिवाइस पर, बटन का डिफ़ॉल्ट साइज़ 30 पिक्सल होगा. हालांकि, टचस्क्रीन वाले डिवाइसों के लिए, बटन का साइज़ कम से कम 44 पिक्सल होना चाहिए. इससे, बटन को आसानी से ऐक्सेस किया जा सकेगा.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

ऊपर दिया गया कोड, नीचे दी गई मीडिया क्वेरी जैसा ही नतीजा देता है:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

if() फ़ॉर्मैट का इस्तेमाल करने पर, आपको स्टाइल लॉजिक को दो अलग-अलग जगहों पर डालने की ज़रूरत नहीं होती.

डेमो: सहायता से जुड़ी इनलाइन क्वेरी

if() का इस्तेमाल करने का दूसरा तरीका, सहायता से जुड़ी इनलाइन क्वेरी बनाना है. उदाहरण के लिए, OKLCH जैसे वाइड-गैमट कलर सपोर्ट की जांच करने के लिए, इनका इस्तेमाल किया जा सकता है:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

इस कोड की मदद से, अगर ब्राउज़र oklch कलर स्पेस के साथ काम करता है, तो उपयोगकर्ता को ज़्यादा चमकदार रंग दिखेगा. साथ ही, उसे ::after स्यूडो कॉन्टेंट में यह मैसेज भी दिखेगा: "आपका ब्राउज़र OKLCH के साथ काम करता है".

ज़्यादा जानने और आरजीबी और बेहतर कलर स्पेस के बीच का अंतर देखने के लिए, oklch.com पर कलर पिकर और संसाधन देखें.

डेमो: यूज़र इंटरफ़ेस (यूआई) की स्थिति को विज़ुअलाइज़ करना

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

<div class="card" data-status=>"c<ompl>ete"
  ...
/div

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

if() फ़ंक्शन के अंदर style() का इस्तेमाल करके, सीधे उस एलिमेंट को स्टाइल किया जा सकता है जिसे टारगेट किया जा रहा है. इसके लिए, सीएसएस स्टाइल क्वेरी जैसे पैरंट एलिमेंट की ज़रूरत नहीं होती.

इस डेमो में एक बुनियादी उदाहरण दिया गया है. इसमें बताया गया है कि सीएसएस के नए आर्किटेक्चरल तरीके का इस्तेमाल करने के लिए, if() का इस्तेमाल कैसे किया जा सकता है. क्लास के बजाय सीएसएस कस्टम प्रॉपर्टी का इस्तेमाल करने का एक फ़ायदा यह है कि उन्हें सीएसएस में आसानी से अपडेट किया जा सकता है. उदाहरण के लिए, उन्हें मीडिया क्वेरी या :hover जैसी स्यूडो स्टेटस का इस्तेमाल करके अपडेट किया जा सकता है.

आगे क्या करना है

if() को जोड़ने से, सीएसएस डेवलपर को आर्किटेक्चर के लिए एक नया मौका मिलता है. स्टाइल क्वेरी जैसी टेक्नोलॉजी के बेहतर होने के साथ-साथ, if() फ़ंक्शन में रेंज क्वेरी करने की सुविधा मिल सकती है. साथ ही, ये आने वाले समय में कस्टम फ़ंक्शन के प्रस्ताव (सीएसएस @function) के साथ भी काम के होंगे.

इन सुविधाओं के बारे में ज़्यादा जानने के लिए, ये लेख पढ़ें:

• डेमो #3 के बारे में तीन मिनट का वीडियो वॉकथ्रू
• ली वर्ओ का लेख