नए 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 के साथ काम करता है".

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

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

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

<div class="card" data-status="complete">
  ...
</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 के बारे में तीन मिनट का वीडियो
• Lea Verou का लेख