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

Swetha Gopalakrishnan

Saurabh Rajpal

कंटेनर क्वेरी प्रतिक्रियाशील के लिए एक बेहद गतिशील और लचीला अप्रोच ऑफ़र करते हैं. डिज़ाइन. कंटेनर क्वेरी, @container के नियम का इस्तेमाल करती हैं. यह इससे मिलते-जुलते @media वाली मीडिया क्वेरी का इस्तेमाल करता है. हालांकि, @container इसके बजाय पैरंट से क्वेरी करता है का इस्तेमाल करें.

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

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

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

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

redBus

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

कोड

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

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

//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() सिलेक्टर की केस स्टडी