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 नियमाची शक्ती आणि अष्टपैलुत्व दर्शविण्यासाठी काही व्यावहारिक उदाहरणे पाहूया.

१. @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 (सर्वसाधारण टॅब्लेटचा आकार) दरम्यान असते. हे विशिष्ट व्ह्यूपोर्ट रेंजसाठी स्टाईल्स परिभाषित करण्याचा एक स्पष्ट आणि संक्षिप्त मार्ग प्रदान करते.

आंतरराष्ट्रीयीकरणाची नोंद: जागतिक प्रेक्षकांसाठी रिस्पॉन्सिव्ह डिझाइन महत्त्वपूर्ण आहे. वेगवेगळ्या प्रदेशांमध्ये विविध स्क्रीन आकारांचा विचार करा. उदाहरणार्थ, काही देशांमध्ये मोबाईलचा वापर जास्त आहे, ज्यामुळे मोबाईल-फर्स्ट डिझाइन अधिक महत्त्वाचे बनते.

२. @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); /* जुन्या ब्राउझरसाठी रुंदी समायोजित करा */
  }
}

येथे, ब्राउझर CSS ग्रिड लेआउटला सपोर्ट करतो की नाही हे तपासण्यासाठी आम्ही @supports वापरतो. जर तो सपोर्ट करत असेल, तर आम्ही .container ला ग्रिड-आधारित स्टाईल्स लागू करतो. जर नाही, तर जुन्या ब्राउझरमध्ये समान लेआउट मिळवण्यासाठी आम्ही फ्लेक्सबॉक्स वापरून फॉलबॅक स्टाईल्स प्रदान करतो.

जागतिक ॲक्सेसिबिलिटीची नोंद: ॲक्सेसिबिलिटीसाठी फीचर डिटेक्शन महत्त्वाचे आहे. जुन्या ब्राउझरमध्ये नवीन ARIA ॲट्रिब्यूट्स किंवा सिमेंटिक HTML5 घटकांसाठी सपोर्ट नसू शकतो. मजकूर ॲक्सेसिबल राहील याची खात्री करण्यासाठी योग्य फॉलबॅक प्रदान करा.

३. मीडिया क्वेरीज आणि फीचर क्वेरीज एकत्र करणे

@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 प्रॉपर्टीला सपोर्ट करत असेल. हे तुम्हाला जुन्या ब्राउझरवरील संभाव्य परफॉर्मन्स समस्या किंवा रेंडरिंग त्रुटी टाळून आधुनिक ब्राउझरवर दृष्यदृष्ट्या आकर्षक इफेक्ट्स तयार करण्याची परवानगी देते.

४. कस्टम प्रॉपर्टीज (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 ) { ... }

तथापि, हे योग्यरित्या कार्य करण्यासाठी कस्टम प्रॉपर्टीमध्ये अंकीय मूल्य असल्याची खात्री करा.

ॲक्सेसिबिलिटीची नोंद: पर्यायी थीम्स (उदा. डार्क मोड) प्रदान करणे ॲक्सेसिबिलिटीसाठी महत्त्वाचे आहे. दृष्टीदोष असलेल्या वापरकर्त्यांना उच्च-कॉन्ट्रास्ट थीम्सचा फायदा होऊ शकतो. तुमची थीम स्विच कीबोर्ड आणि स्क्रीन रीडरद्वारे ॲक्सेसिबल असल्याची खात्री करा.

५. डेटा ॲट्रिब्यूट्सवर आधारित स्टायलिंग

तुम्ही डेटा ॲट्रिब्यूट्ससह @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;
  }
}

टीप: attribute() चाचणी अटीसाठी समर्थन सध्या सर्व ब्राउझरमध्ये मर्यादित किंवा पूर्णपणे लागू केलेले नसू शकते. नेहमी पूर्णपणे चाचणी करा.

ब्राउझर कंपॅटिबिलिटी आणि पॉलीఫિલ્સ

२०२४ च्या उत्तरार्धात, @when नियमासाठी ब्राउझर समर्थन अजूनही विकसित होत आहे. अनेक आधुनिक ब्राउझर मूळ कार्यक्षमतेला समर्थन देत असले तरी, काही जुने ब्राउझर कदाचित देत नसतील. म्हणून, कंपॅटिबिलिटी टेबल तपासणे आणि आवश्यकतेनुसार योग्य फॉलबॅक किंवा पॉलीఫિલ્સ वापरणे महत्त्वाचे आहे.

@when आणि संबंधित फीचर्सची सद्य ब्राउझर समर्थन स्थिती तपासण्यासाठी नेहमी Can I use... सारख्या संसाधनांचा सल्ला घ्या.

@when वापरण्यासाठी सर्वोत्तम पद्धती

निष्कर्ष

@when नियम CSS टूलबॉक्समध्ये एक शक्तिशाली भर आहे, जो डेव्हलपर्सना कंडिशनली स्टाईल्स लागू करण्याचा अधिक लवचिक आणि प्रभावी मार्ग देतो. याला मीडिया क्वेरीज, फीचर क्वेरीज आणि CSS कस्टम प्रॉपर्टीजसह एकत्र करून, तुम्ही अधिक मजबूत, जुळवून घेण्यायोग्य आणि देखरेख करण्यायोग्य स्टाईलशीट्स तयार करू शकता. ब्राउझर समर्थन अजूनही विकसित होत असले तरी, @when हे एक वैशिष्ट्य आहे जे तुमच्या आधुनिक वेब डेव्हलपमेंट वर्कफ्लोमध्ये शोधण्यासारखे आणि समाविष्ट करण्यासारखे आहे.

जसजसे वेब विकसित होत राहील, तसतसे जगभरातील वापरकर्त्यांसाठी आकर्षक, ॲक्सेसिबल आणि कार्यक्षम अनुभव तयार करण्यासाठी @when सारख्या वैशिष्ट्यांवर प्रभुत्व मिळवणे आवश्यक असेल. कंडिशनल स्टायलिंगची शक्ती स्वीकारा आणि तुमच्या CSS डेव्हलपमेंटमध्ये नवीन शक्यता अनलॉक करा.