कंटेनर क्वेरी
प्रतिक्रियाशील के लिए एक बेहद गतिशील और लचीला अप्रोच ऑफ़र करते हैं.
डिज़ाइन. कंटेनर क्वेरी, @container
के नियम का इस्तेमाल करती हैं. यह इससे मिलते-जुलते
@media
वाली मीडिया क्वेरी का इस्तेमाल करता है. हालांकि, @container
इसके बजाय पैरंट से क्वेरी करता है
का इस्तेमाल करें.
कंटेनर क्वेरी, बेसलाइन नए उपलब्ध का हिस्सा हैं.
ब्राउज़र सहायता
-
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
-
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
-
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
-
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
कंटेनर के साइज़ के हिसाब से रिस्पॉन्स देकर, कंटेनर क्वेरी, कॉम्पोनेंट को ऑप्टिमाइज़ होने देती हैं की जगह बनाई जा सकती हैं. उदाहरण के लिए, कार्ड कॉम्पोनेंट, ऐप्लिकेशन में रखे गए कंटेनर के मुताबिक साइज़ और स्टाइल, चाहे वह साइडबार हो, हीरो हो सेक्शन या ग्रिड का इस्तेमाल करें.
जैसा कि नीचे दिए गए इलस्ट्रेशन में दिखाया गया है, मैक्रो के लिए मीडिया क्वेरी को जोड़ा जा सकता है लेआउट, माइक्रो लेआउट के लिए कंटेनर क्वेरी, उपयोगकर्ता की प्राथमिकता पर आधारित मीडिया के साथ क्वेरी का जवाब देने के लिए किया जा सकता है. मैसेज पढ़ा गया कंटेनर क्वेरी के बारे में ज़्यादा जानकारी और नया रिस्पॉन्सिव डिज़ाइन.
![इमेज, जिसमें दिखाया गया है कि अलग-अलग तरह की स्टाइलिंग एक साथ कैसे काम करती हैं.](https://developer.chrome.com/static/blog/css-ui-ecommerce-cq/image/new-responsive.png?authuser=9&hl=hi)
यह लेख उस सीरीज़ का हिस्सा है जिसमें इस बारे में चर्चा की गई है कि ई-कॉमर्स कंपनियां कैसे नई सीएसएस और यूज़र इंटरफ़ेस (यूआई) सुविधाओं का इस्तेमाल करके अपनी वेबसाइटों को बेहतर बनाया. इस बार, हम में दिखाया गया है कि कुछ कंपनियों ने कंटेनर क्वेरी का इस्तेमाल कैसे किया और उनसे कैसे फ़ायदा पाया.
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;
}
}
असर
पहले (एक से ज़्यादा कोड बेस) | बाद में (एक कोड बेस) | |
---|---|---|
इमारतें और निर्माण | अलग इन्फ़्रास्ट्रक्चर (ज़्यादा कीमत). | एक जैसा इन्फ़्रास्ट्रक्चर (कम लागत). |
डिज़ाइन | अलग यूज़र इंटरफ़ेस (यूआई), लेकिन एक जैसा काम नहीं करता. | इसे हल करना चुनौती भरा है, लेकिन मुमकिन है. |
परफ़ॉर्मेंस | सिस्टम अलग-अलग होने की वजह से इसे आसानी से मैनेज किया जा सकता है. हालांकि, यह परफ़ॉर्मेंस को बेहतर बनाने की कोशिश का डुप्लीकेट है. | यह पेज और सुविधा के लिए खास है, लेकिन RedBus का PageSpeedInsights स्कोर 80 से ज़्यादा है. |
डेवलेपमेंट | डेवलपर की अलग-अलग टीमें. | समय में 30% - 40% की कमी. |
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()
सिलेक्टर.