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

Una Kravets

Gerald Monaco

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

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

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

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

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

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

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

<!-- 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;
  }
}

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

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

कंटेनर के हिसाब से यूनिट का इस्तेमाल कैसे किया जाएगा, इसका एक उदाहरण, रिस्पॉन्सिव टाइपोग्राफ़ी है. व्यूपोर्ट आधारित यूनिट (जैसे कि 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 क्वेरी सिंटैक्स के साथ काम करने के लिए, Resizeऑब्जेक्ट के साथ म्यूटेशन ऑब्ज़र्वर का इस्तेमाल करता है, जो फ़िलहाल स्टेबल ब्राउज़र में उपलब्ध है:

• अलग-अलग क्वेरी (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;
  }
}

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

Polyfill की नई सुविधाएं

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

• नेस्ट किए गए @container नियम.
• @container नियमों को @supports और @media क्वेरी के तहत नेस्ट किया जा सकता है. इसी तरह, इस सेटिंग को @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 क्वेरी करने की अनुमति, हॉरिज़ॉन्टल राइटिंग मोड के साथ सही नहीं है).
• DOM म्यूटेशन (उदाहरण के लिए, रनटाइम के दौरान <style> और <link> एलिमेंट हटाया जाना).

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

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

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

चेतावनियां

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