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

Sofia Emelianova

Jecelyn Yeen

इस गाइड में आपको 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 एलिमेंट चुनें. स्टाइल पैनल में, @container का एलान करने वाले फ़ॉर्म के साथ पैरंट कंटेनर article.card का लिंक भी देखा जा सकता है.

   

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

   

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

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

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

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

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

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

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