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

Swetha Gopalakrishnan

Saurabh Rajpal

कंटेनर क्वेरी रिस्पॉन्सिव डिज़ाइन बनाने के लिए, काफ़ी डाइनैमिक और सुविधाजनक होती है. कंटेनर क्वेरी, @container नियम का इस्तेमाल करती हैं. यह @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 के प्रॉडक्ट की जानकारी वाले पेजों (पीडीपी) में, दुकान और प्रॉडक्ट की जानकारी के लिए कई टैब मौजूद हैं. पहले, इस पेज के लेआउट को तीन कॉलम में बांटा जाता था. कभी-कभी, बाईं ओर दिए गए प्रॉडक्ट के नाम को छोटे साइज़ की स्क्रीन के लिए हटा दिया जाता था (यहां दिया गया "पहले" वाला वीडियो देखें).

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

पहले

बाद में

कोड

यह कोड, 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 के इलिप्स वाले उदाहरण जैसे छोटे इस्तेमाल के उदाहरणों से शुरुआत की जा सकती है और वहां कंटेनर क्वेरी लागू की जा सकती है. इसके बाद, धीरे-धीरे ज़्यादा केस ढूंढकर सीएसएस को बेहतर बनाएं.

संसाधन:

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

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

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