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

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 क्वेरी सिंटैक्स के साथ काम करने के लिए, MtationObserver के साथ 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;
  }
}

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

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

अपडेट किए गए पॉलीफ़िल के साथ ये सुविधाएं काम करती हैं:

• नेस्ट किए गए @container नियम.
• @container नियमों को @supports और @media क्वेरी के दायरे में नेस्ट किया जा सकता है. इसी तरह, @container नियमों को @supports क्वेरी के तहत नेस्ट किया जा सकता है.
• पॉलीफ़िल लोड होने के बाद, @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> एलिमेंट हटाना).

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

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

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

चेतावनियां

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