इस गाइड में, Chrome DevTools के एलिमेंट पैनल में, सीएसएस कंटेनर की क्वेरी की जांच करने और उन्हें डीबग करने का तरीका बताया गया है.
सीएसएस कंटेनर क्वेरी की मदद से, पैरंट कंटेनर प्रॉपर्टी के आधार पर एलिमेंट की स्टाइल में बदलाव किया जा सकता है. यह सुविधा, रिस्पॉन्सिव वेब डिज़ाइन के सिद्धांत को पेज के बजाय कंटेनर पर आधारित कर देती है.
इस गाइड में दिए गए स्क्रीनशॉट, इस डेमो पेज से लिए गए हैं.
कंटेनर और उनके वंशज के बारे में जानें
क्वेरी कंटेनर के तौर पर बताए गए हर एलिमेंट के एलिमेंट पैनल में, उसके बगल में container
बैज होता है. यह बैज, कंटेनर और उसके डिसेंडेंट के ऊपर बिंदु वाली लाइन के ओवरले को टॉगल करता है.
ओवरले को टॉगल करने के लिए:
- DevTools खोलें.
- एलिमेंट पैनल में, कंटेनर के तौर पर तय किए गए एलिमेंट के बगल में मौजूद
container
बैज पर क्लिक करें.
इस उदाहरण में, container-type: inline-size
प्रॉपर्टी कंटेनर एलिमेंट के बारे में बताया गया है. डिसेंडेंट इसके इनलाइन डाइमेंशन (हॉरिज़ॉन्टल ऐक्सिस) पर क्वेरी कर सकते हैं और कंटेनर की चौड़ाई के हिसाब से अपनी स्टाइल बदल सकते हैं.
कंटेनर की क्वेरी की जांच करें
जब कंटेनर, क्वेरी की शर्त पूरी करता है, तब एलिमेंट पैनल में, क्वेरी के बारे में @container
एलान दिखाए जाते हैं. ऐसा तब होता है, जब वे किसी डिसेंडेंट एलिमेंट पर लागू किए जाते हैं.
यह समझने के लिए कि इस डेमो पेज पर, @container
के एलानों की जांच कब की जा सकती है, इन कोड सैंपल की जांच करें:
@container (inline-size > 400px) {
.coffee p {
display: block;
}
}
@container (inline-size > 600px) {
.coffee {
display: grid;
grid-template-columns: 280px auto;
}
.coffee h1 {
grid-column: 1/3;
}
.coffee img {
grid-row: 2/4;
}
इस उदाहरण में, अगर कंटेनर की चौड़ाई पिक्सल की इस संख्या से ज़्यादा है, तो संबंधित स्टाइल लागू होती हैं:
400px
से ज़्यादा: पैराग्राफ़ (p
) एलिमेंट, पेज पर ब्लॉक के तौर पर दिखता है. यह एक नई लाइन से शुरू होता है और पूरी चौड़ाई लेता है.600px
से ज़्यादा: डिसेंडेंट, हॉरिज़ॉन्टल ग्रिड लेआउट इस्तेमाल करते हैं, जिसका टाइटल (h1
) सबसे ऊपर और इमेज (img
) बाईं ओर होता है.
@container
के पहले एलान की जांच करने के लिए:
- एलिमेंट पैनल में, कंटेनर की चौड़ाई को
500px
पर सेट करें.p
एलिमेंट दिखेगा. p
एलिमेंट चुनें. स्टाइल पैनल में, पैरंट कंटेनरarticle.card
के लिंक के साथ@container
की जानकारी देखी जा सकती है.चौड़ाई को
600px
से ज़्यादा पर सेट करें. इसके बाद, जिन एलिमेंट पर असर पड़ा है उनमें से किसी को चुनें. हॉरिज़ॉन्टल लेआउट लागू करने वाले@container
एलान देखें.
कंटेनर के एलिमेंट ढूंढना
जिस कंटेनर की वजह से क्वेरी लागू हुई है उसे ढूंढने और चुनने के लिए, @container
एलान के ऊपर कर्सर को एलिमेंट के नाम पर कर्सर घुमाएं और उस पर क्लिक करें.
ऊपर कर्सर घुमाने पर, नाम एलिमेंट पैनल में एलिमेंट के लिंक में बदल जाता है और स्टाइल पैनल, क्वेरी की गई प्रॉपर्टी और उसकी मौजूदा वैल्यू दिखाता है.
कंटेनर की क्वेरी में बदलाव करना
किसी क्वेरी को डीबग करने के लिए, स्टाइल पैनल में किसी भी दूसरे सीएसएस एलान के तौर पर इसमें बदलाव किया जा सकता है. इसका तरीका जानने के लिए, 'सीएसएस देखें और बदलें' लेख में बताया गया है.
इस उदाहरण में, कंटेनर की चौड़ाई 500px
है. पेज पर पैराग्राफ़ (p
) एलिमेंट दिखता है.
p
एलिमेंट चुनें. स्टाइल पैनल में. आपके पास@container (inline-size > 400px)
एलान देखने का विकल्प है.inline-size
को400px
से बदलकर520px
करें.- पैराग्राफ़ (
p
) एलिमेंट, पेज से गायब हो जाता है, क्योंकि यह क्वेरी की शर्तों को पूरा नहीं करता.