कंटेनर की क्वेरी से जुड़ी केस स्टडी

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

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

redBus

redBus, मोबाइल और डेस्कटॉप वर्शन के लिए अलग-अलग कोड रखता है और उन्हें दिखाता है. Things-to-do और कार्गो पेजों पर कंटेनर क्वेरी लागू करने के बाद, वे इन साइटों के लिए इस कोड को एक ही कोडबेस में शामिल कर पाए. इससे उनकी साइटें रिस्पॉन्सिव बनीं और डेवलेपमेंट में लगने वाला समय भी बचा. यहां दिए गए उदाहरण में, कार्गो पेज का इस्तेमाल करके यह दिखाया गया है:

कोड

यहां दिए गए उदाहरण में, .bpdpCardWrapper पैरंट कंटेनर है, जिसका नाम bpdpSection है.

अगर कंटेनर bpdpSection की कम से कम चौड़ाई 744 पिक्सल है, तो .bpdpCardContainer और .subTxt, .bpdpAddress से चुने गए कॉम्पोनेंट के लिए, font-size और line-height अपडेट हो जाता है.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

असर

Tokopedia

Tokopedia के प्रॉडक्ट की जानकारी वाले पेजों (पीडीपी) में, दुकान और प्रॉडक्ट की जानकारी के लिए कई टैब होते हैं. पहले, इस पेज का लेआउट तीन कॉलम में बंटा होता था. साथ ही, कभी-कभी छोटी स्क्रीन के लिए, बाईं ओर मौजूद प्रॉडक्ट का नाम कट जाता था. इसके लिए, "पहले" वाला यह वीडियो देखें.

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

पहले

बाद में

कोड

यहां दिया गया कोड, infowrapper नाम के पैरंट कंटेनर के साइज़ की क्वेरी करता है. अगर infowrapper की ज़्यादा से ज़्यादा चौड़ाई 360 पिक्सल है, तो चाइल्ड कॉम्पोनेंट की width, margin, और padding को अडजस्ट किया जाता है.

container-type को inline-size पर सेट करने से, पैरंट की इनलाइन-डायरेक्शन साइज़ की क्वेरी होती है. अंग्रेज़ी जैसी लैटिन भाषाओं में, यह पैरंट कंटेनर की चौड़ाई होगी, क्योंकि टेक्स्ट इनलाइन में बाएं से दाएं की ओर फ़्लो होता है.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

कंटेनर क्वेरी का इस्तेमाल करते समय ध्यान रखने वाली बातें

Tokopedia ने अपनी साइट पर टेक्स्ट एलिप्सिस देखकर, अपने इस्तेमाल के उदाहरण का पता लगाया. इससे पता चला कि कंटेनर बहुत छोटे हो सकते हैं. इस वजह से, उपयोगकर्ता के लिए कॉन्टेंट कट जाता है.

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

अपनी साइट में धीरे-धीरे सुधार किए जा सकते हैं. उदाहरण के लिए, Tokopedia के एलिप्स उदाहरण जैसे छोटे इस्तेमाल के उदाहरणों से शुरुआत की जा सकती है. इसके बाद, वहां कंटेनर क्वेरी लागू की जा सकती हैं. फिर, धीरे-धीरे ज़्यादा उदाहरण ढूंढें और सीएसएस को बेहतर बनाएं.

संसाधन:

• कंटेनर क्वेरी, स्टेबल ब्राउज़र में उपलब्ध हैं
• कंटेनर क्वेरी-ब्राउज़र में डिज़ाइन करना
• कंटेनर क्वेरी के डेमो
• डेमो: कंटेनर क्वेरी कार्ड
• वीडियो: वेब यूआई में नया क्या है - I/O 2023
• क्या आपको किसी गड़बड़ी की शिकायत करनी है या नई सुविधा का अनुरोध करना है? हमें आपकी राय जाननी है.

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

• आपकी ई-कॉमर्स साइट के लिए, वेब यूआई की सुविधाएं क्यों ज़रूरी हैं?
• स्क्रोल-ड्राइव ऐनिमेशन के केस स्टडी
• व्यू ट्रांज़िशन के केस स्टडी
• पॉप-ओवर के केस स्टडी
• :has() सिलेक्टर के केस स्टडी