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

Swetha Gopalakrishnan

Saurabh Rajpal

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

कंटेनर क्वेरी, बेसलाइन के तौर पर हाल ही में उपलब्ध सुविधा का हिस्सा हैं.

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

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

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

redBus

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

कोड

नीचे दिए गए उदाहरण में, .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() सिलेक्टर की केस स्टडी