कंटेनर क्वेरी, स्टेबल ब्राउज़र में ऐक्सेस की जाती हैं

इस वैलेंटाइन डे पर, हम सभी स्टेबल ब्राउज़र में साइज़ कंटेनर क्वेरी और कंटेनर क्वेरी यूनिट के आने का जश्न मना रहे हैं.

Una Kravets

कंटेनर क्वेरी का प्यार आज-कल का ट्रेंड में है! इस वैलेंटाइन डे, सभी मॉडर्न ब्राउज़र में साइज़ कंटेनर क्वेरी और कंटेनर क्वेरी यूनिट का स्टेटस स्थिर रहता है.

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

कंटेनर क्वेरी वैलेंटाइन

इस बार छुट्टियों के इस सीज़न में कंटेनर क्वेरी की परफ़ॉर्मेंस का जश्न मनाने के लिए, हमने वेलेंटाइन बनाया है. भले ही, आप किसी भी (सबसे नए वर्शन) स्टेबल ब्राउज़र का इस्तेमाल कर रहे हों, ताकि आप सभी इसका आनंद ले सकें!