कंटेनर क्वेरी और :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() pseudo-class की मदद से, डेवलपर यह पता कर सकते हैं कि पैरंट एलिमेंट में खास पैरामीटर वाले चाइल्ड एलिमेंट शामिल हैं या नहीं.
उदाहरण के लिए, p:has(span) से पैराग्राफ़ (p) सिलेक्टर का पता चलता है, जिसके अंदर span होता है. इसका इस्तेमाल, पैरंट पैराग्राफ़ को स्टाइल करने के लिए किया जा सकता है या इसके अंदर कुछ भी स्टाइल किया जा सकता है. figure एलिमेंट को स्टाइल करने के लिए figure:has(figcaption), इसका एक अच्छा उदाहरण है. इसमें कैप्शन शामिल हैं. :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 लॉन्च किया जा रहा है. साथ ही, यह अलग-अलग ब्राउज़र पर काम करने की सुविधा को तेज़ी से आगे बढ़ा रहा है. इसलिए, यह एक यूज़र इंटरफ़ेस (यूआई) डेवलपर बनने का समय है!