सीएसएस कंटेनर क्वेरी की जांच करना और उन्हें डीबग करना

सोफ़िया इमेलियानोवा

GitHub

जेसेलिन येन

Twitter GitHub होम पेज

इस गाइड में, Chrome DevTools के एलिमेंट पैनल में, सीएसएस कंटेनर की क्वेरी की जांच करने और उन्हें डीबग करने का तरीका बताया गया है.

सीएसएस कंटेनर क्वेरी की मदद से, पैरंट कंटेनर प्रॉपर्टी के आधार पर एलिमेंट की स्टाइल में बदलाव किया जा सकता है. यह सुविधा, रिस्पॉन्सिव वेब डिज़ाइन के सिद्धांत को पेज के बजाय कंटेनर पर आधारित कर देती है.

इस गाइड में दिए गए स्क्रीनशॉट, इस डेमो पेज से लिए गए हैं.

कंटेनर और उनके वंशज के बारे में जानें

क्वेरी कंटेनर के तौर पर बताए गए हर एलिमेंट के एलिमेंट पैनल में, उसके बगल में container बैज होता है. यह बैज, कंटेनर और उसके डिसेंडेंट के ऊपर बिंदु वाली लाइन के ओवरले को टॉगल करता है.

ओवरले को टॉगल करने के लिए:

1. DevTools खोलें.
2. एलिमेंट पैनल में, कंटेनर के तौर पर तय किए गए एलिमेंट के बगल में मौजूद 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 के पहले एलान की जांच करने के लिए:

1. एलिमेंट पैनल में, कंटेनर की चौड़ाई को 500px पर सेट करें. p एलिमेंट दिखेगा.

2. p एलिमेंट चुनें. स्टाइल पैनल में, पैरंट कंटेनर article.card के लिंक के साथ @container की जानकारी देखी जा सकती है.

   

3. चौड़ाई को 600px से ज़्यादा पर सेट करें. इसके बाद, जिन एलिमेंट पर असर पड़ा है उनमें से किसी को चुनें. हॉरिज़ॉन्टल लेआउट लागू करने वाले @container एलान देखें.

   

कंटेनर के एलिमेंट ढूंढना

जिस कंटेनर की वजह से क्वेरी लागू हुई है उसे ढूंढने और चुनने के लिए, @container एलान के ऊपर कर्सर को एलिमेंट के नाम पर कर्सर घुमाएं और उस पर क्लिक करें.

ऊपर कर्सर घुमाने पर, नाम एलिमेंट पैनल में एलिमेंट के लिंक में बदल जाता है और स्टाइल पैनल, क्वेरी की गई प्रॉपर्टी और उसकी मौजूदा वैल्यू दिखाता है.

कंटेनर की क्वेरी में बदलाव करना

किसी क्वेरी को डीबग करने के लिए, स्टाइल पैनल में किसी भी दूसरे सीएसएस एलान के तौर पर इसमें बदलाव किया जा सकता है. इसका तरीका जानने के लिए, 'सीएसएस देखें और बदलें' लेख में बताया गया है.

इस उदाहरण में, कंटेनर की चौड़ाई 500px है. पेज पर पैराग्राफ़ (p) एलिमेंट दिखता है.

1. p एलिमेंट चुनें. स्टाइल पैनल में. आपके पास @container (inline-size > 400px) एलान देखने का विकल्प है.
2. inline-size को 400px से बदलकर 520px करें.
3. पैराग्राफ़ (p) एलिमेंट, पेज से गायब हो जाता है, क्योंकि यह क्वेरी की शर्तों को पूरा नहीं करता.