M

MLOG

हिन्दी

CSS @when नियम का अन्वेषण करें, जो ब्राउज़र समर्थन, व्यू पोर्ट आकार और अन्य के आधार पर सशर्त शैली अनुप्रयोग को सक्षम करने वाली एक शक्तिशाली सुविधा है। व्यावहारिक उदाहरणों के साथ जानें।

CSS @when नियम: सशर्त शैली अनुप्रयोग में महारत हासिल करना

CSS की दुनिया लगातार विकसित हो रही है, जो डेवलपर्स को वेब पेजों को स्टाइल करने के लिए अधिक शक्तिशाली और लचीले तरीके प्रदान करती है। ऐसा ही एक सुविधा जो आकर्षण प्राप्त कर रही है, वह है @when नियम, जिसे CSS सशर्त नियम मॉड्यूल स्तर 1 के रूप में भी जाना जाता है। यह नियम आपको विशिष्ट शर्तों को पूरा करने के आधार पर CSS शैलियों को सशर्त रूप से लागू करने की अनुमति देता है। यह उत्तरदायी डिजाइन, फीचर डिटेक्शन और अधिक मजबूत और अनुकूलन योग्य स्टाइलशीट बनाने के लिए एक शक्तिशाली उपकरण है।

CSS @when नियम क्या है?

@when नियम CSS में एक सशर्त एट-नियम है जो आपको उन शैलियों को परिभाषित करने की अनुमति देता है जो केवल तभी लागू होती हैं जब कुछ शर्तें सत्य हों। इसे अपनी CSS के लिए if कथन के रूप में सोचें। मीडिया क्वेरी के विपरीत, जो मुख्य रूप से व्यू पोर्ट विशेषताओं (स्क्रीन आकार, अभिविन्यास, आदि) पर ध्यान केंद्रित करती हैं, @when सशर्त स्टाइलिंग को संभालने के लिए अधिक सामान्य और एक्स्टेंसिबल तरीका प्रदान करता है। यह @supports और @media जैसे मौजूदा सशर्त एट-नियमों का विस्तार करता है।

@when का उपयोग करने के प्रमुख लाभ

@when नियम का सिंटैक्स

@when नियम का मूल सिंटैक्स इस प्रकार है: 
@when <condition> {
  /* CSS नियम तब लागू होते हैं जब शर्त सत्य होती है */
}

<condition> कोई भी मान्य बूलियन अभिव्यक्ति हो सकती है जो सही या गलत का मूल्यांकन करती है। इस अभिव्यक्ति में अक्सर शामिल होता है:

कार्रवाई में @when के व्यावहारिक उदाहरण

आइए @when नियम की शक्ति और बहुमुखी प्रतिभा को दर्शाने के लिए कुछ व्यावहारिक उदाहरणों का पता लगाएं।

1. @when और मीडिया क्वेरी के साथ उत्तरदायी डिजाइन

@when का सबसे आम उपयोग मामला उत्तरदायी डिज़ाइन है, जहाँ आप स्क्रीन आकार के आधार पर शैलियों को समायोजित करते हैं। जबकि मीडिया क्वेरी इसे अपने दम पर प्राप्त कर सकती है, @when एक अधिक संरचित और पठनीय दृष्टिकोण प्रदान करता है, खासकर जब जटिल स्थितियों से निपटते हैं।

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

इस उदाहरण में, @when ब्लॉक के भीतर शैलियाँ केवल तभी लागू होती हैं जब स्क्रीन की चौड़ाई 768px और 1023px के बीच हो (विशिष्ट टैबलेट आकार)। यह विशिष्ट व्यू पोर्ट श्रेणियों के लिए शैलियों को परिभाषित करने का एक स्पष्ट और संक्षिप्त तरीका प्रदान करता है।

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

2. @when और @supports के साथ फ़ीचर डिटेक्शन

@when को @supports के साथ जोड़ा जा सकता है ताकि शैलियों को केवल तभी लागू किया जा सके जब कोई विशिष्ट CSS सुविधा ब्राउज़र द्वारा समर्थित हो। यह आपको अपनी वेबसाइट को उत्तरोत्तर बढ़ाने की अनुमति देता है, जिससे आधुनिक ब्राउज़रों वाले उपयोगकर्ताओं के लिए एक बेहतर अनुभव प्रदान किया जा सके, जबकि अभी भी पुराने लोगों के साथ संगतता बनाए रखी जा सके।

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* उन ब्राउज़रों के लिए फ़ॉलबैक शैलियाँ जो ग्रिड का समर्थन नहीं करते हैं */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* पुराने ब्राउज़रों के लिए चौड़ाई समायोजित करें */
  }
}

यहां, हम यह जांचने के लिए @supports का उपयोग करते हैं कि क्या ब्राउज़र CSS ग्रिड लेआउट का समर्थन करता है। यदि ऐसा होता है, तो हम .container पर ग्रिड-आधारित शैलियाँ लागू करते हैं। यदि नहीं, तो हम फ़्लेक्सबॉक्स का उपयोग करके फ़ॉलबैक शैलियाँ प्रदान करते हैं ताकि यह सुनिश्चित किया जा सके कि पुराने ब्राउज़रों में समान लेआउट प्राप्त किया गया है।

वैश्विक पहुंच नोट: पहुंच के लिए सुविधा का पता लगाना महत्वपूर्ण है। पुराने ब्राउज़रों में नए ARIA एट्रिब्यूट या सिमेंटिक HTML5 तत्वों के लिए समर्थन की कमी हो सकती है। यह सुनिश्चित करने के लिए उचित फ़ॉलबैक प्रदान करें कि सामग्री सुलभ बनी रहे।

3. मीडिया क्वेरी और फीचर क्वेरी का संयोजन

@when की वास्तविक शक्ति मीडिया क्वेरी और फ़ीचर क्वेरी को मिलाकर अधिक जटिल और सूक्ष्म सशर्त स्टाइलिंग नियम बनाने की क्षमता से आती है।

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

इस उदाहरण में, .modal तत्व में केवल तभी धुंधला बैकड्रॉप होगा जब स्क्रीन की चौड़ाई कम से कम 768px हो और ब्राउज़र backdrop-filter प्रॉपर्टी का समर्थन करता हो। यह आपको आधुनिक ब्राउज़रों पर दिखने में आकर्षक प्रभाव बनाने की अनुमति देता है, जबकि पुराने लोगों पर संभावित प्रदर्शन समस्याओं या रेंडरिंग गड़बड़ियों से बचा जाता है।

4. कस्टम प्रॉपर्टीज (CSS वेरिएबल्स) के आधार पर स्टाइलिंग

@when का उपयोग CSS कस्टम प्रॉपर्टीज (जिन्हें CSS वेरिएबल्स के रूप में भी जाना जाता है) के साथ गतिशील और राज्य-चालित स्टाइलिंग बनाने के लिए भी किया जा सकता है। आप कस्टम प्रॉपर्टी के मान को अपडेट करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, और फिर उस मान के आधार पर विभिन्न शैलियों को लागू करने के लिए @when का उपयोग कर सकते हैं।

सबसे पहले, एक कस्टम प्रॉपर्टी को परिभाषित करें:

:root {
  --theme-color: #007bff; /* डिफ़ॉल्ट थीम रंग */
  --is-dark-mode: false;
}

फिर, कस्टम प्रॉपर्टी के मान के आधार पर शैलियों को लागू करने के लिए @when का उपयोग करें:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

अंत में, --is-dark-mode कस्टम प्रॉपर्टी के मान को टॉगल करने के लिए जावास्क्रिप्ट का उपयोग करें:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

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

@when ( --is-dark-mode > 0 ) { ... }

हालांकि, यह सुनिश्चित करें कि कस्टम प्रॉपर्टी में इसके सही ढंग से कार्य करने के लिए एक संख्यात्मक मान है।

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

5. डेटा एट्रिब्यूट के आधार पर स्टाइलिंग

आप तत्वों को उनके डेटा मानों के आधार पर स्टाइल करने के लिए डेटा एट्रिब्यूट के साथ @when का भी उपयोग कर सकते हैं। यह गतिशील इंटरफेस बनाने के लिए उपयोगी हो सकता है जहां तत्व उपयोगकर्ता की बातचीत या डेटा अपडेट के आधार पर उपस्थिति बदलते हैं।

उदाहरण के लिए, मान लीजिए कि आपके पास कार्यों की एक सूची है, और प्रत्येक कार्य में एक data-status एट्रिब्यूट है जो उसकी स्थिति को इंगित करता है (जैसे, "todo", "in-progress", "completed")। आप प्रत्येक कार्य को उसकी स्थिति के आधार पर अलग-अलग स्टाइल करने के लिए @when का उपयोग कर सकते हैं।

[data-status="todo"] {
  /* todo कार्यों के लिए डिफ़ॉल्ट शैलियाँ */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

ध्यान दें: एट्रिब्यूट () परीक्षण शर्त के लिए समर्थन सीमित हो सकता है या वर्तमान में सभी ब्राउज़रों में पूरी तरह से लागू नहीं किया जा सकता है। हमेशा अच्छी तरह से परीक्षण करें।

ब्राउज़र संगतता और पॉलीफिल

2024 के अंत तक, @when नियम के लिए ब्राउज़र समर्थन अभी भी विकसित हो रहा है। जबकि कई आधुनिक ब्राउज़र मुख्य कार्यक्षमता का समर्थन करते हैं, कुछ पुराने ब्राउज़र नहीं कर सकते हैं। इसलिए, संगतता तालिकाओं की जांच करना और जहां आवश्यक हो वहां उपयुक्त फ़ॉलबैक या पॉलीफिल का उपयोग करना महत्वपूर्ण है।

@when और संबंधित सुविधाओं की वर्तमान ब्राउज़र समर्थन स्थिति की जांच करने के लिए हमेशा क्या मैं उपयोग कर सकता हूं... जैसे संसाधनों से परामर्श लें।

@when का उपयोग करने के लिए सर्वोत्तम अभ्यास

निष्कर्ष

@when नियम CSS टूलबॉक्स के लिए एक शक्तिशाली अतिरिक्त है, जो डेवलपर्स को सशर्त रूप से शैलियों को लागू करने के लिए अधिक लचीला और अभिव्यंजक तरीका प्रदान करता है। मीडिया क्वेरी, फ़ीचर क्वेरी और CSS कस्टम प्रॉपर्टीज के साथ इसे मिलाकर, आप अधिक मजबूत, अनुकूलन योग्य और बनाए रखने योग्य स्टाइलशीट बना सकते हैं। जबकि ब्राउज़र समर्थन अभी भी विकसित हो रहा है, @when एक ऐसी सुविधा है जिसका पता लगाने और अपनी आधुनिक वेब विकास कार्यप्रवाह में शामिल करने लायक है।

जैसे-जैसे वेब का विकास जारी है, @when जैसी सुविधाओं में महारत हासिल करना दुनिया भर के उपयोगकर्ताओं के लिए आकर्षक, सुलभ और प्रदर्शनकारी अनुभव बनाने के लिए आवश्यक होगा। सशर्त स्टाइलिंग की शक्ति को अपनाएं और अपने CSS विकास में नई संभावनाओं को अनलॉक करें।