इस वैलेंटाइन डे पर हम सभी स्टेबल ब्राउज़र में आने वाले साइज़ कंटेनर क्वेरी और कंटेनर क्वेरी यूनिट का जश्न मना रहे हैं.
कंटेनर की क्वेरी के लिए दी जाने वाली जानकारी की झलक आसान है! इस वैलेंटाइन डे, साइज़ कंटेनर क्वेरी, और कंटेनर क्वेरी यूनिट को सभी मॉडर्न ब्राउज़र में एक जैसा रखा जाता है.
कंटेनर क्वेरी की मदद से, पैरंट एलिमेंट की स्टाइलिंग की जानकारी के लिए क्वेरी की जा सकती है, जैसे कि inline-size. मीडिया क्वेरी की मदद से, व्यूपोर्ट के साइज़ के बारे में क्वेरी की जा सकती है. कंटेनर क्वेरी, कॉम्पोनेंट को चालू करती हैं, जो इस आधार पर बदल सकते हैं कि वे यूज़र इंटरफ़ेस (यूआई) में कहां हैं.
कंटेनर क्वेरी खास तौर पर, रिस्पॉन्सिव डिज़ाइन और फिर से इस्तेमाल किए जा सकने वाले कॉम्पोनेंट के लिए काम की होती हैं. उदाहरण के लिए, ऐसा कार्ड कॉम्पोनेंट चालू करना जो साइडबार में डाले जाने पर एक तरीके से और प्रॉडक्ट ग्रिड के अंदर किसी अलग कॉन्फ़िगरेशन में दिख सके.
कंटेनर क्वेरी का इस्तेमाल करें
कंटेनर क्वेरी इस्तेमाल करने के लिए, पहले किसी पैरंट एलिमेंट पर कंटेनमेंट सेट करें. ऐसा करने के लिए, पैरंट कंटेनर में container-type सेट करें या container शॉर्टहैंड का इस्तेमाल करके, उसे टाइप और नाम, दोनों एक साथ दें:
.card-container {
container: card / inline-size;
}
container-type को inline-size पर सेट करने से, पैरंट के इनलाइन-निर्देश साइज़ के बारे में क्वेरी की जाती है. अंग्रेज़ी जैसी लैटिन भाषाओं में, यह कार्ड की चौड़ाई होगी, क्योंकि टेक्स्ट बाईं से दाईं ओर इनलाइन होता है.
अब उस कंटेनर का इस्तेमाल करके, उसके किसी भी चाइल्ड खाते पर स्टाइल लागू किए जा सकते हैं. इसके लिए, @container का इस्तेमाल करें:
.card-child {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card-child {
grid-template-columns: 1fr;
}
}
इसके अलावा, कंटेनर क्वेरी की लंबाई की यूनिट वैल्यू का इस्तेमाल ठीक उसी तरह किया जा सकता है जिस तरह व्यूपोर्ट पर आधारित यूनिट की वैल्यू के लिए किया जाता है. इसमें अंतर यह है कि कंटेनर यूनिट, व्यूपोर्ट के बजाय कंटेनर से जुड़ी होती हैं. नीचे दिए गए उदाहरण में, कंटेनर क्वेरी यूनिट और clamp() फ़ंक्शन का इस्तेमाल करके रिस्पॉन्सिव टाइपोग्राफ़ी के बारे में बताया गया है, ताकि साइज़ के लिए कम से कम और ज़्यादा से ज़्यादा वैल्यू दी जा सके:
.card-child h2 {
font-size: clamp(2rem, 15cqi, 4rem);
}
ऊपर दिया गया 15cqi, कंटेनर के इनलाइन साइज़ का 15% है. clamp() फ़ंक्शन इसे कम से कम 2rem और ज़्यादा से ज़्यादा 4rem वैल्यू देता है. इस दौरान, अगर 15cqi इन वैल्यू के बीच है, तो टेक्स्ट छोटा हो जाएगा और उसी हिसाब से बढ़ता रहेगा.
कंटेनर क्वेरी वैलेंटाइन
इस छुट्टी के दिन कंटेनर क्वेरी के जश्न का जश्न मनाने के लिए, हमने आप सभी के लिए वैलेंटाइन डे बनाया है, इस बात से कोई फ़र्क़ नहीं पड़ता कि आप इसे किस (नए वर्शन) में देख रहे हैं!