इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

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

अलग-अलग स्टाइल एक साथ कैसे काम करते हैं, यह दिखाने वाली इमेज. — web.dev—नया रिस्पॉन्सिव.

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

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

असर

	पहले (एक से ज़्यादा कोड बेस)	बाद में (एक कोड बेस)
इमारतें और निर्माण	अलग-अलग इन्फ़्रास्ट्रक्चर (ज़्यादा लागत).	वही इंफ़्रास्ट्रक्चर (कम कीमत).
डिज़ाइन	अलग यूज़र इंटरफ़ेस (यूआई), लेकिन एक जैसा काम नहीं करता.	हल करना मुश्किल है, लेकिन मुमकिन है.
परफ़ॉर्मेंस	इसे मैनेज करना आसान है, क्योंकि सिस्टम अलग है. हालांकि, परफ़ॉर्मेंस को बेहतर बनाने के लिए, इसमें दोहरा काम करना पड़ता है.	यह पेज और सुविधा के हिसाब से अलग-अलग होता है. हालांकि, redBus का PageSpeedInsights स्कोर 80 से ज़्यादा है.
डेवलेपमेंट	अलग-अलग डेवलपर टीमें.	समय में 30% से 40% की कमी.

Tokopedia

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

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

पहले

कंटेनर क्वेरी लागू करने से पहले, स्क्रीन के छोटे साइज़ के लिए सबसे ऊपर बाईं ओर मौजूद "ISKU 10 in 1 Obeng satu.." शब्द काट दिए जाते हैं.

बाद में

कंटेनर क्वेरी लागू करने से, टेक्स्ट को व्यूपोर्ट में रखते हुए लेआउट में बदलाव होता है.

कोड

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