CSS @when: कंडिशनल स्टाइलिंगचे भविष्य

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

CSS @when म्हणजे काय?

@when नियम तुम्हाला विशिष्ट अटींवर आधारित CSS स्टाइल्स लागू करण्याची परवानगी देतो. कंडिशनल स्टाइलिंगसाठी मीडिया क्वेरी, कंटेनर क्वेरी आणि अगदी जावास्क्रिप्ट-आधारित उपायांसाठी हा एक अधिक बहुमुखी आणि प्रभावी पर्याय म्हणून काम करतो. याला तुमच्या CSS साठी "if-then" स्टेटमेंट समजा.

@when नियमाचे मूलभूत सिंटॅक्स खालीलप्रमाणे आहे:

            @when (condition) {
  /* Styles to apply when the condition is true */
}

            

              
                Copy
              
            
          

condition विविध प्रकारच्या लॉजिकल एक्स्प्रेशन्स असू शकते, ज्यामुळे @when नियम अविश्वसनीयपणे लवचिक बनतो. आम्ही या लेखात पुढे काही विशिष्ट उदाहरणे पाहू.

@when का वापरावे? फायदे आणि लाभ

@when नियम कंडिशनल स्टाइलिंगच्या सध्याच्या पद्धतींपेक्षा अनेक महत्त्वाचे फायदे देतो:

• वाढीव लवचिकता: मीडिया क्वेरींच्या विपरीत, जे प्रामुख्याने व्ह्यूपोर्ट आकारावर आधारित असतात, @when तुम्हाला कस्टम प्रॉपर्टीज (CSS व्हेरिएबल्स), एलिमेंट ॲट्रिब्यूट्स आणि संभाव्यतः विशिष्ट HTML एलिमेंट्सच्या उपस्थिती किंवा अनुपस्थितीसह विविध घटकांवर स्टाइल्स आधारित करण्याची परवानगी देते.
• सुधारित वाचनीयता आणि देखभालक्षमता: कंडिशनल लॉजिक थेट तुमच्या CSS मध्ये समाविष्ट करून, @when तुमचा कोड अधिक सेल्फ-डॉक्युमेंटिंग आणि समजण्यास सोपा बनवते. यामुळे क्लिष्ट जावास्क्रिप्ट उपायांची गरज कमी होते आणि तुमच्या स्टाइलशीट्सची एकूण देखभालक्षमता सुधारते.
• वर्धित पुनर्वापरयोग्यता: तुम्ही @when नियमांमध्ये क्लिष्ट कंडिशनल स्टाइल्स परिभाषित करू शकता आणि तुमच्या वेबसाइट किंवा ॲप्लिकेशनमध्ये त्यांचा पुन्हा वापर करू शकता. हे कोडच्या पुनर्वापराला प्रोत्साहन देते आणि अनावश्यकता कमी करते.
• संभाव्यतः उत्तम कामगिरी: काही प्रकरणांमध्ये, जावास्क्रिप्ट-आधारित उपायांच्या तुलनेत @when वापरल्याने कामगिरीत सुधारणा होऊ शकते, कारण ब्राउझर कंडिशनल लॉजिक मूळतः हाताळू शकतो.
• तुमचा कोड भविष्यासाठी तयार करणे: जसजसे CSS विकसित होत राहील, तसतसे @when अधिक डायनॅमिक आणि रिस्पॉन्सिव्ह यूजर इंटरफेस तयार करण्यासाठी एक भक्कम पाया प्रदान करते.

कंडिशन सिंटॅक्स समजून घेणे

@when ची खरी शक्ती त्याच्या विविध प्रकारच्या कंडिशन्स हाताळण्याच्या क्षमतेमध्ये आहे. येथे काही उदाहरणे दिली आहेत:

१. कस्टम प्रॉपर्टीज (CSS व्हेरिएबल्स) तपासणे

तुम्ही स्टेट माहिती संग्रहित करण्यासाठी कस्टम प्रॉपर्टीज वापरू शकता आणि नंतर त्या प्रॉपर्टीजच्या मूल्यावर आधारित स्टाइल्स लागू करण्यासाठी @when वापरू शकता. हे विशेषतः थीम्स तयार करण्यासाठी किंवा वापरकर्त्यांना तुमच्या वेबसाइटचे स्वरूप सानुकूलित करण्याची परवानगी देण्यासाठी उपयुक्त आहे.

            :root {
  --theme-color: #007bff; /* Default theme color */
  --font-size: 16px;
}

@when (--theme-color = #007bff) {
  body {
    background-color: #f0f8ff; /* Apply a light background when the theme color is blue */
  }
}

@when (--font-size > 18px) {
  p {
    line-height: 1.6;
  }
}

            

              
                Copy
              
            
          

या उदाहरणात, पहिला @when नियम तपासतो की --theme-color कस्टम प्रॉपर्टी #007bff च्या बरोबर आहे की नाही. जर असेल, तर तो body एलिमेंटला हलका बॅकग्राउंड रंग लागू करतो. दुसरा @when नियम तपासतो की --font-size 18px पेक्षा जास्त आहे की नाही, आणि जर असेल, तर तो पॅराग्राफ एलिमेंट्सची लाइन हाइट समायोजित करतो.

२. बुलियन कंडिशन्सचे मूल्यांकन करणे

@when बुलियन कंडिशन्स देखील हाताळू शकते, ज्यामुळे तुम्हाला एखादी विशिष्ट कंडिशन सत्य आहे की असत्य यावर आधारित स्टाइल्स लागू करण्याची परवानगी मिळते. हे वापरकर्त्यांच्या पसंती किंवा ॲप्लिकेशन स्टेटनुसार स्टाइल्स टॉगल करण्यासाठी विशेषतः उपयुक्त ठरू शकते.

            :root {
  --dark-mode: false;
}

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

            

              
                Copy
              
            
          

या उदाहरणात, @when नियम तपासतो की --dark-mode कस्टम प्रॉपर्टी true वर सेट आहे की नाही. जर असेल, तर तो body एलिमेंटला गडद बॅकग्राउंड रंग आणि हलका टेक्स्ट रंग लागू करतो, ज्यामुळे प्रभावीपणे डार्क मोड सक्षम होतो.

३. लॉजिकल ऑपरेटर्ससह कंडिशन्स जोडणे

अधिक क्लिष्ट परिस्थितींसाठी, तुम्ही and, or, आणि not सारख्या लॉजिकल ऑपरेटर्सचा वापर करून अनेक कंडिशन्स एकत्र करू शकता. हे तुम्हाला अत्यंत विशिष्ट आणि सूक्ष्म कंडिशनल स्टाइल्स तयार करण्याची परवानगी देते.

            :root {
  --is-mobile: false;
  --is-logged-in: true;
}

@when (--is-mobile = true and --is-logged-in = true) {
  /* Styles to apply only on mobile devices and when the user is logged in */
  .mobile-menu {
    display: block;
  }
}

            

              
                Copy
              
            
          

या उदाहरणात, @when नियम तपासतो की --is-mobile आणि --is-logged-in दोन्ही true वर सेट आहेत की नाही. जर दोन्ही कंडिशन्स पूर्ण झाल्या, तर तो एक मोबाइल मेन्यू एलिमेंट प्रदर्शित करतो.

४. एलिमेंट ॲट्रिब्यूट्स तपासणे

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

            @when (element.hasAttribute('data-active')) {
  [data-active] {
    border: 2px solid blue;
  }
}

@when (element.getAttribute('data-theme') = 'dark') {
  body {
    background-color: black;
    color: white;
  }
}

            

              
                Copy
              
            
          

पहिले उदाहरण तपासते की एलिमेंटमध्ये `data-active` ॲट्रिब्यूट आहे की नाही. दुसरे उदाहरण तपासते की `data-theme` ॲट्रिब्यूट 'dark' च्या बरोबर आहे की नाही.

५. स्टाइल क्वेरी आणि कंटेनर क्वेरी (संभाव्य एकत्रीकरण)

हे अजूनही विकासाधीन असले तरी, @when चे स्टाइल क्वेरी आणि कंटेनर क्वेरीसह एकत्रीकरण होण्याची शक्यता आहे. हे तुम्हाला पॅरेंट कंटेनरवर लागू केलेल्या स्टाइल्सवर किंवा कंटेनरच्या आकारावर आधारित स्टाइल्स लागू करण्याची परवानगी देईल, ज्यामुळे तुमच्या डिझाइनची रिस्पॉन्सिव्हनेस आणि अनुकूलता आणखी वाढेल. हे विशेषतः मनोरंजक आहे कारण सध्याचे कंटेनर क्वेरी सिंटॅक्स बरेच मोठे आहे; `@when` एक अधिक संक्षिप्त पर्याय देऊ शकते.

व्यावहारिक उदाहरणे आणि उपयोग

चला, वास्तविक-जगातील परिस्थितींमध्ये तुम्ही @when नियम कसा वापरू शकता याची काही व्यावहारिक उदाहरणे पाहूया:

१. डायनॅमिक थीम स्विचिंग

पूर्वी दाखवल्याप्रमाणे, तुम्ही कस्टम प्रॉपर्टीज आणि @when नियमाचा वापर करून सहजपणे डायनॅमिक थीम स्विचिंग लागू करू शकता. हे वापरकर्त्यांना त्यांच्या पसंतीनुसार तुमच्या वेबसाइटचे स्वरूप सानुकूलित करण्याची परवानगी देते.

२. ॲडॉप्टिव्ह नेव्हिगेशन मेन्यू

तुम्ही @when चा वापर करून नेव्हिगेशन मेन्यू तयार करू शकता जे वेगवेगळ्या स्क्रीन आकारांना किंवा डिव्हाइस ओरिएंटेशनला जुळवून घेतात. उदाहरणार्थ, तुम्ही डेस्कटॉप स्क्रीनवर पूर्ण नेव्हिगेशन मेन्यू आणि मोबाइल डिव्हाइसवर हॅम्बर्गर मेन्यू प्रदर्शित करू शकता.

३. फॉर्म व्हॅलिडेशन

तुम्ही @when चा वापर फॉर्म एलिमेंट्सना त्यांच्या व्हॅलिडेशन स्टेटसवर आधारित स्टाइल करण्यासाठी करू शकता. उदाहरणार्थ, तुम्ही अवैध इनपुट फील्ड्सना लाल बॉर्डरने हायलाइट करू शकता.

४. कंटेंट व्हिजिबिलिटी

@when चा वापर विविध अटींवर आधारित कंटेंट दाखवण्यासाठी किंवा लपवण्यासाठी केला जाऊ शकतो. तुम्ही एखादे विशिष्ट प्रमोशनल बॅनर फक्त त्या वापरकर्त्यांना दाखवू शकता ज्यांनी ते आधी पाहिलेले नाही, हे कुकी व्हॅल्यू किंवा वापरकर्ता सेटिंगवर आधारित असेल.

५. आंतरराष्ट्रीयीकरण (i18n)

जरी हा त्याचा प्राथमिक उद्देश नसला तरी, @when चा वापर कस्टम प्रॉपर्टीजसह वापरकर्त्याच्या लोकॅलनुसार स्टाइलिंग जुळवून घेण्यासाठी केला जाऊ शकतो. उदाहरणार्थ, तुम्ही वेगवेगळ्या कॅरेक्टर सेट्सना अधिक चांगल्या प्रकारे सामावून घेण्यासाठी फॉन्ट आकार किंवा स्पेसिंग समायोजित करू शकता.

उदाहरणार्थ, समजा तुमच्याकडे एक कस्टम प्रॉपर्टी `--locale` आहे जी वापरकर्त्याचे लोकॅल संग्रहित करते:

            :root {
  --locale: 'en-US'; /* Default locale */
}

@when (--locale = 'ar') { /* Arabic */
  body {
    direction: rtl; /* Right-to-left layout */
    font-family: 'Arial', sans-serif; /* Example font */
  }
}

@when (--locale = 'zh-CN') { /* Simplified Chinese */
  body {
    font-family: 'Microsoft YaHei', sans-serif; /* Example font */
    font-size: 14px; /* Adjust font size if needed */
  }
}

            

              
                Copy
              
            
          

हे उदाहरण लोकॅल अरबी (`ar`) आहे की सरलीकृत चीनी (`zh-CN`) यावर आधारित टेक्स्ट डायरेक्शन आणि फॉन्ट समायोजित करते. जरी हे योग्य i18n तंत्रांसाठी (जसे की वेगवेगळा कंटेंट सर्व्ह करणे) थेट पर्याय नसले तरी, हे दर्शवते की @when अधिक स्थानिक अनुभवासाठी कसे योगदान देऊ शकते.

सद्यस्थिती आणि ब्राउझर सपोर्ट

२०२४ च्या अखेरीस, @when नियम अजूनही एक तुलनेने नवीन वैशिष्ट्य आहे आणि अद्याप सर्व प्रमुख ब्राउझरद्वारे पूर्णपणे समर्थित नाही. ते सध्या क्रोम आणि एज सारख्या काही ब्राउझरमध्ये प्रायोगिक फ्लॅगच्या मागे आहे.

तुम्ही Can I use सारख्या वेबसाइट्सवर आणि अधिकृत CSS स्पेसिफिकेशन्सवर @when ची प्रगती आणि त्याचा ब्राउझर सपोर्ट ट्रॅक करू शकता.

महत्त्वाची नोंद: कारण हे वैशिष्ट्य प्रायोगिक आहे, @when नियमाचे अचूक सिंटॅक्स आणि वर्तन अंतिम होण्यापूर्वी आणि सर्व ब्राउझरद्वारे पूर्णपणे समर्थित होण्यापूर्वी बदलू शकते. नवीनतम घडामोडींसह अद्ययावत राहणे आणि त्यानुसार तुमचा कोड समायोजित करणे आवश्यक आहे.

पॉलीफिल्स आणि वर्कअराउंड्स

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

तथापि, लक्षात ठेवा की पॉलीफिल्स आणि वर्कअराउंड्सचे कामगिरीवर परिणाम होऊ शकतात आणि ते मूळ @when नियमाच्या वर्तनाची अचूक प्रतिकृती करू शकत नाहीत. उत्पादन वातावरणात त्यांचा वापर करण्यापूर्वी ट्रेड-ऑफ्सचा काळजीपूर्वक विचार करणे महत्त्वाचे आहे.

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

@when नियम वापरताना लक्षात ठेवण्यासारख्या काही सर्वोत्तम पद्धती येथे आहेत:

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

CSS कंडिशनल स्टाइलिंगचे भविष्य

@when नियम CSS कंडिशनल स्टाइलिंगच्या उत्क्रांतीमध्ये एक महत्त्वपूर्ण पाऊल दर्शवतो. हे पारंपरिक मीडिया क्वेरी आणि जावास्क्रिप्ट-आधारित उपायांसाठी एक अधिक लवचिक, वाचनीय आणि देखभाल करण्यायोग्य पर्याय देतो.

जसजसा @when साठी ब्राउझर सपोर्ट वाढत जाईल, तसतसे ते वेब डेव्हलपर्ससाठी एक वाढत्या महत्त्वाचे साधन बनण्याची शक्यता आहे. या नवीन वैशिष्ट्याचा स्वीकार करून, तुम्ही अधिक डायनॅमिक, रिस्पॉन्सिव्ह आणि वापरकर्ता-अनुकूल वेब ॲप्लिकेशन्स तयार करू शकता.

पर्याय आणि विचार करण्यासारख्या गोष्टी

@when आकर्षक फायदे देत असले तरी, सध्याचे पर्याय आणि अशा परिस्थितींचा विचार करणे महत्त्वाचे आहे जिथे ते अधिक योग्य असू शकतात:

• मीडिया क्वेरी: सोप्या व्ह्यूपोर्ट-आधारित समायोजनांसाठी, मीडिया क्वेरी एक सरळ आणि चांगला-समर्थित पर्याय आहे.
• कंटेनर क्वेरी: कंपोनंट्सना त्यांच्या कंटेनरच्या आकारानुसार स्टाइल करताना, कंटेनर क्वेरी (एकदा पूर्णपणे समर्थित झाल्यावर) एक शक्तिशाली पर्याय असेल. तथापि, @when काही कंटेनर क्वेरी परिस्थितींसाठी अधिक संक्षिप्त सिंटॅक्स देऊ शकते.
• जावास्क्रिप्ट: अत्यंत क्लिष्ट कंडिशनल लॉजिकसाठी किंवा बाह्य API सह संवाद साधताना, जावास्क्रिप्ट अजूनही आवश्यक असू शकते. तथापि, उत्तम कामगिरी आणि देखभालक्षमतेसाठी शक्य असेल तिथे लॉजिक CSS मध्ये हलवण्याचे ध्येय ठेवा.
• CSS फीचर क्वेरी (@supports): ब्राउझरद्वारे एखादे विशिष्ट CSS वैशिष्ट्य समर्थित आहे की नाही हे शोधण्यासाठी @supports वापरा. @when उपलब्ध नसताना फॉलबॅक स्टाइल्स प्रदान करण्यासाठी हे महत्त्वाचे आहे.

वास्तविक-जगातील उदाहरण: @when सह कंपोनेंट-आधारित स्टाइलिंग

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

            /* Basic card styling */
.card {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
}

/* Featured card styling */
@when (element.hasAttribute('data-featured')) {
  .card[data-featured] {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .card[data-featured] .card-title {
    font-weight: bold;
    color: #007bff;
  }
}

/* User-specific styling (requires JavaScript to set --logged-in) */
@when (--logged-in = true) {
  .card {
    /* Additional styling for logged-in users */
    background-color: #f9f9f9;
  }
}

/* Combining conditions */
@when (element.hasAttribute('data-featured') and --logged-in = true) {
  .card[data-featured] {
    /* Even more specific styling */
    background-color: #e9ecef;
    transform: translateY(-5px); /* Subtle lift effect */
  }
}

            

              
                Copy
              
            
          

या उदाहरणात:

• पहिला @when ब्लॉक कार्डला स्टाइल करतो जेव्हा त्यात data-featured ॲट्रिब्यूट असतो.
• दुसरा @when ब्लॉक लॉग-इन वापरकर्त्यांसाठी एक वापरकर्ता-विशिष्ट स्टाइल प्रदान करतो (असे गृहीत धरून की तुमच्याकडे `--logged-in` कस्टम प्रॉपर्टी सेट करण्यासाठी एक जावास्क्रिप्ट यंत्रणा आहे).
• अंतिम @when ब्लॉक दोन्ही कंडिशन्स एकत्र करतो, जेव्हा दोन्ही कंडिशन्स पूर्ण होतात तेव्हा आणखी विशिष्ट स्टाइलिंग लागू करतो.

हे उदाहरण कंपोनेंट-आधारित आर्किटेक्चरमध्ये क्लिष्ट कंडिशनल स्टाइलिंग परिस्थिती हाताळण्यात @when ची लवचिकता दर्शवते.

निष्कर्ष

CSS @when नियम एक गेम-चेंजिंग वैशिष्ट्य आहे जे वेब डेव्हलपर्सना अधिक डायनॅमिक, रिस्पॉन्सिव्ह आणि देखभाल करण्यायोग्य स्टाइलशीट्स तयार करण्यास सक्षम करते. जसजसा ब्राउझर सपोर्ट परिपक्व होईल, तसतसे @when आधुनिक वेब ॲप्लिकेशन्स तयार करण्यासाठी एक অপরিहार्य साधन बनणार आहे. या शक्तिशाली नवीन वैशिष्ट्याचा स्वीकार करून, तुम्ही कंडिशनल स्टाइलिंगसाठी नवीन शक्यता अनलॉक करू शकता आणि अपवादात्मक वापरकर्ता अनुभव देऊ शकता.

@when नियम विकसित होत राहील आणि CSS चे भविष्य घडवत राहील, त्यामुळे भविष्यातील अद्यतने आणि घडामोडींसाठी संपर्कात रहा!

अधिक वाचन आणि संसाधने

• CSS Conditional Rules Module Level 3 (अधिकृत स्पेसिफिकेशन - अद्यतनांसाठी तपासा!)
• Can I use... (ब्राउझर सपोर्ट ट्रॅकिंग)
• Mozilla Developer Network (MDN) (CSS डॉक्युमेंटेशन)