कंटेनर क्वेरी और :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 एलिमेंट को स्टाइल करने के लिए 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 में ये दो बेहतरीन सुविधाएं लॉन्च होने जा रही हैं. साथ ही, ये सुविधाएं अलग-अलग ब्राउज़र पर काम करने वाली होंगी. ऐसे में, यूज़र इंटरफ़ेस (यूआई) डेवलपर के तौर पर यह एक रोमांचक समय है!