इस पेज का अनुवाद Cloud Translation API से किया गया है.

पॉलीफ़िल को कोई बड़ा अपडेट मिलने के दौरान, कंटेनर की क्वेरी, स्टेबल ब्राउज़र पर दिखने लगती हैं

Una Kravets

Gerald Monaco

कंटेनर क्वेरी यहां उपलब्ध हैं!

दिलचस्प खबर—डेवलपर के लिए सबसे ज़्यादा अनुरोध की जाने वाली सुविधाओं में से एक सुविधा, वेब ब्राउज़र पर उपलब्ध होने लगी है! Chromium 105 और Safari 16 के बाद से, अब साइज़ पर आधारित कंटेनर क्वेरी बनाई जा सकती हैं. साथ ही, इन ब्राउज़र में कंटेनर क्वेरी यूनिट की वैल्यू का इस्तेमाल किया जा सकता है. साइज़ के हिसाब से कंटेनर क्वेरी और cq यूनिट का इस्तेमाल और भी आसान बनाने के लिए, Chrome की ऑरोरा टीम ने कंटेनर क्वेरी पॉलीफ़िल को अपडेट करने पर काम किया है. इससे ज़्यादा ब्राउज़र और इस्तेमाल के उदाहरणों के साथ काम करने में मदद मिलेगी. इससे, आपको इस बेहतरीन सुविधा का इस्तेमाल करने में भरोसा रहेगा.

कंटेनर क्वेरी क्या हैं?

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

ALT_TEXT_HERE

कंटेनर क्वेरी की मदद से, ऐसे कॉम्पोनेंट लिखे जा सकते हैं जिन्हें दोबारा इस्तेमाल किया जा सकता है. ये कॉम्पोनेंट, पेज पर मौजूद जगह के आधार पर अलग-अलग दिख सकते हैं. इससे वे पेजों और टेंप्लेट पर ज़्यादा आसानी से काम कर पाते हैं.

कंटेनर क्वेरी का इस्तेमाल करना

मान लें कि आपके पास कुछ एचटीएमएल है:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

कंटेनर क्वेरी का इस्तेमाल करने के लिए, आपको सबसे पहले उस पैरंट एलिमेंट पर कंटेनमेंट सेट करना होगा जिसे ट्रैक करना है. ऐसा करने के लिए, container-type प्रॉपर्टी सेट करें या container शॉर्टहैंड की मदद से, कंटेनर का टाइप और कंटेनर का नाम एक साथ सेट करें.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

अब, @container नियम का इस्तेमाल करके, सबसे नज़दीकी पैरंट के आधार पर स्टाइल सेट की जा सकती हैं. ऊपर की इमेज जैसी डिज़ाइन के लिए, जहां कार्ड एक कॉलम से दो कॉलम तक जा सकता है, उसके लिए कुछ इस तरह लिखें:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

ज़्यादा साफ़-साफ़ दिखने के लिए, पैरंट एलिमेंट कंटेनर को कोई नाम दें:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

इसके बाद, पिछले कोड को इस तरह लिखें:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

देखें

कंटेनर की क्वेरी यूनिट

कंटेनर क्वेरी को और भी ज़्यादा काम का बनाने के लिए, कंटेनर पर आधारित इकाई की वैल्यू का भी इस्तेमाल किया जा सकता है. यहां दी गई टेबल में, कंटेनर यूनिट की संभावित वैल्यू और कंटेनर के साइज़ से उनका संबंध बताया गया है:

यूनिट	के हिसाब से
`cqw`	क्वेरी कंटेनर की चौड़ाई का 1%
`cqh`	क्वेरी कंटेनर की ऊंचाई का 1%
`cqi`	क्वेरी कंटेनर के इनलाइन साइज़ का 1%
`cqb`	क्वेरी कंटेनर के ब्लॉक साइज़ का 1%
`cqmin`	cqi या cqb की छोटी वैल्यू
`cqmax`	cqi या cqb की बड़ी वैल्यू

कंटेनर पर आधारित यूनिट का इस्तेमाल करने का एक उदाहरण, रिस्पॉन्सिव टाइपोग्राफ़ी है. व्यूपोर्ट पर आधारित यूनिट (जैसे, vh, vb, vw, और vi) का इस्तेमाल, स्क्रीन पर किसी भी एलिमेंट का साइज़ तय करने के लिए किया जा सकता है.

.card h2 {
  font-size: 15cqi;
}

इस कोड से, फ़ॉन्ट-साइज़ को कंटेनर के इनलाइन साइज़ का 15% बना दिया जाएगा. इसका मतलब है कि इनलाइन साइज़ (चौड़ाई) बढ़ने पर, फ़ॉन्ट साइज़ भी बढ़ जाएगा और साइज़ कम होने पर, फ़ॉन्ट साइज़ भी कम हो जाएगा. इसे और आगे ले जाने के लिए, clamp() फ़ंक्शन का इस्तेमाल करके अपनी टाइपोग्राफ़ी के लिए कम से कम और ज़्यादा से ज़्यादा साइज़ की सीमा तय करें और कंटेनर के साइज़ के आधार पर इसका साइज़ तय करें:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

अब हेडर, 3rem से ज़्यादा या .5rem से कम कभी नहीं होगा. हालांकि, यह कंटेनर के इनलाइन साइज़ का 15% लेगा.

देखें

यह डेमो इसी तरह आगे ले जाता है और चौड़े आकार वाले कार्ड को छोटा करके अपडेट कर देता है, क्योंकि वे दो कॉलम वाले व्यू में दिखते हैं.

कंटेनर क्वेरी पॉलीफ़िल

कंटेनर क्वेरी एक बेहतरीन सुविधा है. इसलिए, हम चाहते हैं कि आप इसे अपने प्रोजेक्ट में आसानी से शामिल कर सकें. साथ ही, आपको यह भी पता हो कि ब्राउज़र की सहायता इस सुविधा के लिए बहुत ज़रूरी है. इसलिए, हम कंटेनर क्वेरी पॉलीफ़िल को बेहतर बनाने पर काम कर रहे हैं. इस पॉलीफ़िल का इस्तेमाल इनमें किया जा सकता है:

Firefox 69 और उसके बाद के वर्शन
Chrome 79 और उसके बाद के वर्शन
Edge 79 और इसके बाद के वर्शन
Safari 13.4 और उसके बाद के वर्शन

कंप्रेस होने पर, इसका साइज़ 9 केबी से कम हो जाता है. साथ ही, यह @container क्वेरी सिंटैक्स के साथ ResizeObserver का इस्तेमाल करता है, जो फ़िलहाल स्टेबल ब्राउज़र में उपलब्ध है:

डिस्क्रीट क्वेरी (width: 300px और min-width: 300px).
रेंज क्वेरी (200px < width < 400px और width < 400px).
प्रॉपर्टी और कीफ़्रेम में, कंटेनर की लंबाई की रिलेटिव यूनिट (cqw, cqh, cqi, cqb, cqmin, औरcqmax).

कंटेनर क्वेरी पॉलीफ़िल का इस्तेमाल करना

पॉलीफ़िल का इस्तेमाल करने के लिए, अपने दस्तावेज़ में सबसे ऊपर यह स्क्रिप्ट टैग जोड़ें: :

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

User-Agent के आधार पर, पॉलीफ़िल को कुछ शर्तों के साथ डिलीवर करने के लिए किसी सेवा का इस्तेमाल किया जा सकता है या इसे अपने ऑरिजिन पर खुद होस्ट किया जा सकता है.

हमारा सुझाव है कि बेहतर उपयोगकर्ता अनुभव के लिए, शुरुआत में सिर्फ़ फ़ोल्ड के नीचे मौजूद कॉन्टेंट के लिए पॉलीफ़िल का इस्तेमाल करें. साथ ही, @supports क्वेरी का इस्तेमाल करके, इसे लोड होने के इंडिकेटर से कुछ समय के लिए बदलें. ऐसा तब तक करें, जब तक पॉलीफ़िल इसे दिखाने के लिए तैयार न हो जाए:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

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

पॉलीफ़िल की नई सुविधाएं

अपडेट किया गया पॉलीफ़िल इनके साथ काम करता है:

नेस्ट किए गए @container नियम.
@supports और @media क्वेरी के तहत @container नियमों को नेस्ट किया जा सकता है. इसके अलावा, @container नियमों को @supports और @media क्वेरी के तहत नेस्ट किया जा सकता है.
पॉलीफ़िल लोड होने के बाद, @supports (container-type: inline-size) जैसी कंडिशनल सीएसएस पास हो जाएगी.
सीएसएस सिंटैक्स के लिए पूरी तरह से सहायता (अब सिंटैक्स के हिसाब से मान्य टिप्पणियों को कहीं भी डालने में कोई समस्या नहीं है).
वर्टिकल राइटिंग मोड (राइटिंग मोड के ज़रिए).
कंटेनर की रिलेटिव यूनिट (cqw, cqh वगैरह) का इस्तेमाल, क्वेरी की शर्तों, प्रॉपर्टी के एलान, और ऐनिमेशन की मुख्य फ़्रेम में किया जा सकता है. rem और em, क्वेरी की शर्तों में काम करते हैं.
बड़ा किया गया कंटेनर क्वेरी सिंटैक्स:
- रेंज सिंटैक्स (उदाहरण के लिए (200px < width < 400px)).
- समानता वाली क्वेरी (उदाहरण के लिए, (width = 200px)).
बदली हुई पहचान वाले एलिमेंट, जैसे कि ::before और::after.
:is(...)/:where(...) के बिना काम करने वाले ब्राउज़र के लिए, समस्या हल करने का एक विकल्प उपलब्ध है
orientation और aspect-ratio ने सुविधा के बारे में क्वेरी की हैं.
सुविधाओं के आधार पर क्वेरी को सही तरीके से फ़िल्टर करना. उदाहरण के लिए, हॉरिज़ॉन्टल राइटिंग मोड में, container: inline-size पर height क्वेरी करने की अनुमति नहीं है.
डीओएम में बदलाव (उदाहरण के लिए, रनटाइम के दौरान <style> और <link> एलिमेंट हटाए जा रहे हैं).

ध्यान दें: अपडेट की गई कंटेनर क्वेरी पॉलीफ़िल अब पुराने लेगसी साइज़ क्वेरी सिंटैक्स के साथ काम नहीं करता है, जहां उपयोगकर्ता को size() (यानी size(width >= 200px)) में साइज़ क्वेरी को रैप करना होगा.

पॉलीफ़िल की सीमाएं और चेतावनियां

अगर कंटेनर क्वेरी पॉलीफ़िल का इस्तेमाल किया जा रहा है, तो कुछ सुविधाएं अधूरी हैं, जैसे कि:

शैडो डीओएम अभी काम नहीं करता है.
@media क्वेरी की शर्तों में, कंटेनर की रिलेटिव यूनिट (उदाहरण के लिए, cqw और cqh) का इस्तेमाल नहीं किया जा सकता.
- Safari: 15.4 से पहले के ऐनिमेशन कीफ़्रेम में कंटेनर रिलेटिव यूनिट का इस्तेमाल नहीं किया जा सकता.
फ़िलहाल, क्वेरी की शर्तों में calc(), min(), max() या गणित के अन्य फ़ंक्शन काम नहीं करते.
यह पॉलीफ़िल सिर्फ़ इनलाइन और एक ही ऑरिजिन वाली सीएसएस के साथ काम करता है. क्रॉस ऑरिजिन स्टाइलशीट और iframe में स्टाइलशीट काम नहीं करते (जब तक कि पॉलीफ़िल को मैन्युअल रूप से लोड न किया जाता हो) काम नहीं करते.
layout और style कंटेनमेंट के लिए, ब्राउज़र में इन सुविधाओं का होना ज़रूरी है:
- Safari 15.4 और उसके बाद वाले वर्शन
- Firefox फ़िलहाल स्टाइल कंटेनमेंट की सुविधा नहीं देता, लेकिन इस पर काम कर रहा है.

चेतावनियां

FID और सीएलएस पर असर न डालने के लिए, पॉलीफ़िल इस बात की गारंटी नहीं देता कि पहला लेआउट कब होगा. भले ही, इसे सिंक्रोनस रूप से लोड किया गया हो. हालांकि, इसमें एलसीपी में देरी से बचने की कोशिश की जाती है. दूसरे शब्दों में कहें, तो आपको पहली बार पेंट करते समय इस पर भरोसा नहीं करना चाहिए.
ResizeObserver Loop Errors जनरेट करता है. ओरिजनल पॉलीफ़िल भी ऐसा करता है, लेकिन इसकी जानकारी देना ज़रूरी है. ऐसा इसलिए होता है, क्योंकि क्वेरी का आकलन करने के बाद container-type: inline-size का ब्लॉक-साइज़ बदल सकता है. हालांकि, ResizeObserver के पास यह बताने का कोई तरीका नहीं है कि हमें ब्लॉक के साइज़ में होने वाले बदलावों की परवाह नहीं है.
इस पॉलीफ़िल की जांच, वेब प्लैटफ़ॉर्म टेस्ट के हिसाब से की गई है. इसमें 70% टेस्ट पास हुए हैं. ऐसा इसलिए हुआ, क्योंकि JavaScript API जैसी कुछ सुविधाओं को पॉलीफ़िल नहीं किया गया है. इसलिए, पास होने की दर जान-बूझकर 70% के करीब रखी गई है.
इन ब्राउज़र के 2.23% उपयोगकर्ताओं के लिए, :where() समाधान ज़रूरी है:
- Safari 14
- Chromium 88
- एज 88
- Samsung Internet 15
- फ़ायरफ़ॉक्स 78