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