CSS में कंटेनर क्वेरीज़ का उपयोग कैसे करें

लंबे समय तक, विभिन्न स्क्रीन आकारों पर UI डिज़ाइनों को उत्तरदायी बनाने के लिए मीडिया क्वेरी ही एकमात्र तरीका था। लेकिन उसकी भी अपनी सीमाएँ थीं। मीडिया प्रश्नों का उपयोग करने में सबसे बड़ी समस्याओं में से एक यह था कि आप केवल स्क्रीन आकार में परिवर्तन के जवाब में एक तत्व को शैलीबद्ध कर सकते हैं, न कि इसके निकटतम कंटेनर तत्व को।

इस समस्या को हल करने के लिए कंटेनर प्रश्नों की शुरुआत की गई। उन्होंने React और Vue.js जैसे फ्रेमवर्क की लोकप्रियता में भी वृद्धि की है जो मॉड्यूलर UI "घटक" बनाकर काम करते हैं। अपने CSS में प्रतिक्रियाशील तत्व बनाने के लिए कंटेनर क्वेरी का उपयोग करना सीखें।

इस लेख में प्रयुक्त कोड इसमें उपलब्ध है गिटहब रिपॉजिटरी और आपके लिए एमआईटी लाइसेंस के तहत उपयोग करने के लिए स्वतंत्र है।

आपको CSS कंटेनर क्वेरीज़ का उपयोग क्यों करना चाहिए?

कंटेनर प्रश्नों के महत्व को समझने के लिए, आइए एक उदाहरण का उपयोग करें जो अवधारणा को समझना आसान बनाता है। लेकिन सबसे पहले, आपको इससे स्टार्टर कोड को क्लोन करना होगा गिटहब रिपॉजिटरी.

रेपो को सफलतापूर्वक क्लोन करने के बाद, कोड चलाएँ। आपको निम्न छवि के समान एक वेबपृष्ठ मिलेगा:

यहां आपके पास एक ग्रिड लेआउट है जिसमें दो कॉलम हैं: मुख्य अनुभाग और साइडबार। मुख्य भाग ठीक दिखता है, लेकिन साइडबार (जो मुख्य सामग्री से बहुत छोटा है) थोड़ा टेढ़ा दिखता है।

लेआउट उत्तरदायी है। जब आप ब्राउज़र को सिकोड़ते हैं, तो आप देख सकते हैं कि कार्ड एक वर्टिकल कॉलम में बदल जाता है:

दूसरे शब्दों में, जब सामग्री अपठनीय होने लगती है, तो लेआउट एक ऊर्ध्वाधर स्तंभ में बदल जाता है, जहां छवि सामग्री के शीर्ष पर खड़ी होती है। यह प्रभाव मीडिया के प्रश्नों के परिणामस्वरूप आता है, जो एकमात्र तरीका है जिससे आप अपनी स्क्रीन के संपूर्ण आकार के आधार पर तत्वों का आकार निर्धारित कर सकते हैं।

इस स्थिति में, जब भी आपकी स्क्रीन 800px से कम होती है, तो आप प्रत्येक चीज़ का उपयोग करके एक-दूसरे के ऊपर ढेर कर देते हैं फ्लेक्सबॉक्स संरेखण. बड़ी स्क्रीन पर, हम सामग्री को साथ-साथ रखते हैं:

@मीडिया(अधिकतम चौड़ाई: 800 पीएक्स) {
कार्ड {
फ्लेक्स-दिशा: कॉलम;
 }
.कार्ड-शीर्षक { 
चौड़ाई: 100%;
 }
}

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

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

साइडबारकार्ड {
/* साइडबार कार्ड को छोटा करें */
}
@मीडिया(अधिकतम चौड़ाई: 800 पीएक्स) {
/* जब स्क्रीन 800px से कम संकरी हो तो पेज को स्टाइल दें */
}

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

यह वह जगह है जहाँ कंटेनर प्रश्न उपयोगी हो सकते हैं। अपने व्यूपोर्ट को अपने आकार के रूप में उपयोग करने के लिए मजबूर होने के बजाय, आप अपने पृष्ठ पर किसी भी तत्व को एक कंटेनर के रूप में उपयोग कर सकते हैं। फिर उस कंटेनर की अपनी चौड़ाई हो सकती है, जिस पर आप अपने मीडिया प्रश्नों को आधार बना सकते हैं।

कैसे एक कंटेनर क्वेरी बनाने के लिए

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

मुख्य, साइडबार {
कंटेनर प्रकार: इनलाइन आकार
}

जब आप अपनी CSS फ़ाइल सहेजते हैं, तो पृष्ठ पर कुछ भी नहीं बदलेगा। लेकिन अब आप मुख्य अनुभाग और साइडबार अनुभाग में नेस्टेड कार्ड का आकार बदलने और उन्हें फिर से स्टाइल करने के लिए कंटेनर प्रश्नों का उपयोग कर सकते हैं। निम्नलिखित कंटेनर क्वेरी में, आप 500px या उससे कम चौड़ी स्क्रीन पर कार्ड को वर्टिकल कॉलम में बदल रहे हैं:

@कंटेनर(अधिकतम चौड़ाई: 500 पीएक्स) {
कार्ड {
फ्लेक्स-दिशा: कॉलम;
 }
.कार्ड-शीर्षक {
चौड़ाई: 100%;
 }
}

यह सामान्य मीडिया क्वेरी के रूप में काम करने वाला है। लेकिन अपनी स्क्रीन के आकार को मापने के बजाय, आप अपने कंटेनरों (मुख्य और साइडबार अनुभागों) के आकार को माप रहे हैं। तो अब जब आपका कंटेनर 500px या अधिक है, तो आप क्षैतिज दृश्य का उपयोग करते हैं। अन्यथा, आप वर्टिकल (फ्लेक्सबॉक्स के लिए डिफ़ॉल्ट) का उपयोग करते हैं।

उपरोक्त छवि से, आप देख सकते हैं कि साइडबार लंबवत रूप लेता है क्योंकि यह 500px से छोटा है। जबकि, मुख्य सामग्री अपने क्षैतिज लेआउट को बरकरार रखती है क्योंकि यह 500px से बड़ा है। यदि आप अपने ब्राउज़र को छोटा करते हैं, तो आपकी साइडबार और मुख्य सामग्री दोनों 500px या उससे कम तक पहुँचने पर लंबवत संरेखण का उपयोग करेंगी।

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

कंटेनर प्रश्नों के साथ, आप अपने यूआई घटकों को उनके कंटेनर के आधार पर आसानी से बदल सकते हैं, जिससे आप पूरी तरह से स्व-निहित घटक बना सकते हैं।

नामकरण कंटेनर

जब आप एक बनाते हैं @कंटेनर क्वेरी, यह पहले उस तत्व के कंटेनर की तलाश करता है जिसे आप क्वेरी के भीतर लक्षित कर रहे हैं। हमारे मामले में, यह मुख्य कंटेनर और साइडबार कंटेनर होगा।

और भले ही कार्ड किसी अन्य कंटेनर के अंदर हों, यह अन्य कंटेनरों को अनदेखा कर देगा और केवल अपने निकटतम कंटेनर का चयन करेगा। यह एक व्यापक का हिस्सा है CSS अवधारणा जिसे CSS चयनकर्ताओं के रूप में जाना जाता है.

निम्नलिखित उदाहरण में, हमने बॉडी एलिमेंट को एक कंटेनर में बदल दिया है:

शरीर {
कंटेनर प्रकार: इनलाइन आकार;
}

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

इस व्यवहार को ओवरराइड करने के लिए, आपको दो काम करने होंगे। सबसे पहले, आपको अपने शरीर के तत्व को एक कंटेनर नाम देना होगा:

शरीर {
कंटेनर प्रकार: इनलाइन आकार;
कंटेनर-नाम: शरीर;
}

फिर, जब आप अपनी कंटेनर क्वेरी बनाते हैं, तो आपको बाद में कंटेनर का नाम निर्दिष्ट करना होगा @कंटेनर.

@कंटेनर शरीर (अधिकतम चौड़ाई:1000 पिक्सेल){
/* CSS नियम जो बॉडी कंटेनर को लक्षित करते हैं */
}

यह तब उपयोगी होता है जब आप लक्षित तत्व के निकटतम कंटेनर के बजाय कंटेनर के रूप में किसी विशिष्ट तत्व का उपयोग करना चाहते हैं। दूसरे शब्दों में, आप किसी विशिष्ट कंटेनर का चयन कर सकते हैं और अपने लेआउट को ठीक कर सकते हैं।

कंटेनर इकाइयां

कंटेनरों के बारे में एक और बड़ी विशेषता यह है कि आप कंटेनर इकाइयों का उपयोग कर सकते हैं। ये इकाइयाँ व्यूपोर्ट इकाइयों की तरह ही काम करती हैं (वे सभी एक ही प्रकार की इकाइयाँ हैं)। हालाँकि, कंटेनर इकाइयाँ उपयोग करती हैं cqw (चौड़ाई सेट करने के लिए) और cqh (ऊंचाई सेट करने के लिए)। ये इकाइयां आपके कंटेनर की सटीक चौड़ाई और ऊंचाई निर्धारित करती हैं।

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