इस पेज का अनुवाद 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 और उसके बाद के वर्शन
एज 79 और उसके बाद वाले वर्शन
Safari 13.4 और उसके बाद के वर्शन

कंप्रेस किए जाने पर इसका साइज़ 9 केबी से कम होता है. साथ ही, यह स्थिर ब्राउज़र में उपलब्ध पूरे @container क्वेरी सिंटैक्स के साथ काम करने के लिए, MetationObserver के साथ 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) जैसी शर्तों वाली सीएसएस, पॉलीफ़िल लोड होने के बाद पास हो जाएगी.
सीएसएस सिंटैक्स के लिए पूरी तरह से सहायता (अब टिप्पणियों को कहीं भी डालने में कोई समस्या नहीं है, बशर्ते वे सिंटैक्स के हिसाब से मान्य हों).
वर्टिकल राइटिंग मोड (writing-mode के ज़रिए).
कंटेनर की रिलेटिव यूनिट (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)) में रैप करना होता है.

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

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

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

चेतावनियां

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