किसी पैरंट के इनलाइन साइज़ और कंटेनर क्वेरी यूनिट की वैल्यू के लिए क्वेरी करने की सुविधा, हाल ही में सभी मॉडर्न ब्राउज़र इंजन में ठीक से काम कर रही है.
हालांकि, कंटेनमेंट की खास बातों में साइज़ वाली क्वेरी के साथ-साथ, और भी बहुत कुछ शामिल होता है. इसकी मदद से, पैरंट की स्टाइल वैल्यू के लिए क्वेरी भी की जा सकती है. Chromium 111 में, कस्टम प्रॉपर्टी की वैल्यू के लिए स्टाइल कंटेनमेंट लागू किया जा सकेगा और कस्टम प्रॉपर्टी की वैल्यू के लिए पैरंट एलिमेंट से क्वेरी की जा सकेगी.
इसका मतलब है कि हमारे पास सीएसएस में स्टाइल को लेकर ज़्यादा लॉजिकल कंट्रोल है. साथ ही, इसकी मदद से किसी ऐप्लिकेशन के लॉजिक और डेटा लेयर को उसकी स्टाइल से बेहतर तरीके से अलग किया जा सकता है.
सीएसएस कंटेनमेंट मॉड्यूल लेवल 3 की खास जानकारी में, साइज़ और स्टाइल से जुड़ी क्वेरी शामिल होती हैं. इसकी मदद से, पैरंट से किसी भी स्टाइल के लिए क्वेरी की जा सकती है. इसमें font-weight: 800 जैसे प्रॉपर्टी और वैल्यू पेयर भी शामिल हैं. हालांकि, इस सुविधा के लॉन्च में, स्टाइल क्वेरी फ़िलहाल सिर्फ़ सीएसएस कस्टम प्रॉपर्टी वैल्यू के साथ काम करती हैं. यह स्टाइल को जोड़ने और डिज़ाइन से डेटा को अलग करने में अब भी बहुत मदद करता है. आइए, देखते हैं कि सीएसएस की कस्टम प्रॉपर्टी के साथ स्टाइल क्वेरी का इस्तेमाल कैसे किया जाता है:
स्टाइल क्वेरी का इस्तेमाल शुरू करना
मान लें कि हमारे पास यह एचटीएमएल है:
<ul class="card-list">
<li class="card-container">
<div class="card">
...
</div>
</li>
</ul>
स्टाइल क्वेरी का इस्तेमाल करने के लिए, पहले आपको एक कंटेनर एलिमेंट सेट अप करना होगा. इसके लिए, कुछ अलग तरीके की ज़रूरत होती है. यह इस बात पर निर्भर करता है कि क्वेरी डायरेक्ट या इनडायरेक्ट तरीके से की जा रही है.
सीधे माता-पिता से क्वेरी करना
स्टाइल क्वेरी से अलग, .card को सीधे पैरंट की स्टाइल से क्वेरी करने के लिए, आपको container-type या container प्रॉपर्टी का इस्तेमाल करके .card-container में कंटेनमेंट लागू करने की ज़रूरत नहीं है. हालांकि, हमें किसी कंटेनर (.card-container इस मामले में) या ऐसे किसी भी एलिमेंट पर स्टाइल (इस मामले में कस्टम प्रॉपर्टी वैल्यू) लागू करनी होगी जिसमें उस एलिमेंट से जुड़ा हो जिसे हम DOM में स्टाइल कर रहे हैं. हम उन स्टाइल को लागू नहीं कर सकते जो हम उस क्वेरी के डायरेक्ट एलिमेंट पर कर रहे हैं जिसे हम स्टाइल कर रहे हैं, क्योंकि इससे अनगिनत लूप हो सकते हैं.
माता-पिता से सीधे क्वेरी करने के लिए, यह जानकारी लिखें:
/* styling .card based on the value of --theme on .card-container */
@container style(--theme: warm) {
.card {
background-color: wheat;
border-color: brown;
...
}
}
आपने देखा होगा कि स्टाइल क्वेरी, क्वेरी को style() से रैप कर देती है. इसका इस्तेमाल, साइज़ की वैल्यू को स्टाइल से अलग करने के लिए किया जाता है. उदाहरण के लिए, कंटेनर की चौड़ाई के लिए, क्वेरी को @container (min-width: 200px) { … } के तौर पर लिखा जा सकता है. अगर पैरंट कंटेनर कम से कम 200 पिक्सल चौड़ा है, तो यह स्टाइल लागू होगा. हालांकि, min-width एक सीएसएस प्रॉपर्टी भी हो सकती है और स्टाइल क्वेरी का इस्तेमाल करके, min-width की सीएसएस वैल्यू के लिए क्वेरी की जा सकती है. इसलिए, अंतर को साफ़ करने के लिए आपको style() रैपर का इस्तेमाल करना चाहिए: @container style(min-width: 200px) { … }.
नॉन-डायरेक्ट पैरंट के लिए स्टाइल
अगर आपको किसी ऐसे एलिमेंट के लिए स्टाइल से जुड़ी क्वेरी करनी है जो डायरेक्ट पैरंट नहीं है, तो आपको उस एलिमेंट को container-name देना होगा. उदाहरण के लिए, हम .card-list को container-name देकर और स्टाइल क्वेरी में उसका रेफ़रंस देकर, .card-list स्टाइल के आधार पर .card में स्टाइल लागू कर सकते हैं.
/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
.card {
...
}
}
अपने कंटेनर को नाम देना सबसे सही तरीका है. इससे यह पता चलता है कि आपने क्या क्वेरी की है. साथ ही, कंटेनर को आसानी से ऐक्सेस करने की सुविधा अनलॉक की जा सकती है. यह आपके काम का एक उदाहरण है, अगर आपको सीधे .card में एलिमेंट को स्टाइल करना है. .card-container पर नाम वाले कंटेनर के बिना, वे सीधे तौर पर क्वेरी नहीं कर सकते.
लेकिन इन सभी से व्यावहारिक तौर पर ज़्यादा फ़ायदा होता है. आइए, कुछ उदाहरणों पर नज़र डालें:
स्टाइल क्वेरी का इस्तेमाल करना
स्टाइल क्वेरी खास तौर पर तब काम की होती हैं, जब आपके पास कई वैरिएंट वाला फिर से इस्तेमाल किया जा सकने वाला कॉम्पोनेंट हो या जब आपके पास सभी स्टाइल पर कंट्रोल न हो, लेकिन कुछ मामलों में आपको बदलाव करना हो. इस उदाहरण में, प्रॉडक्ट कार्ड का एक सेट दिखाया गया है, जिसमें एक ही कार्ड कॉम्पोनेंट मौजूद है. कुछ प्रॉडक्ट कार्ड में अतिरिक्त जानकारी/नोट शामिल होते हैं, जैसे कि “नया” या “कम स्टॉक”, जिन्हें --detail नाम की कस्टम प्रॉपर्टी से ट्रिगर किया जाता है. इसके अलावा, अगर कोई प्रॉडक्ट “लो स्टॉक” में है, तो उसके बॉर्डर का बैकग्राउंड गहरा लाल रंग दिखता है. इस तरह की जानकारी, सर्वर रेंडर हो सकती है और इसे इनलाइन स्टाइल के ज़रिए कार्ड पर लागू किया जा सकता है. जैसे:
<div class="product-list">
<div class="product-card-container" style="--detail: new">
<div class="product-card">
<div class="media">
<img .../>
<div class="comment-block"></div>
</div>
</div>
<div class="meta">
...
</div>
</div>
<div class="product-card-container" style="--detail: low-stock">
...
</div>
<div class="product-card-container">
...
</div>
...
</div>
इस स्ट्रक्चर्ड डेटा की मदद से, --detail में वैल्यू पास की जा सकती हैं. साथ ही, इस सीएसएस कस्टम प्रॉपर्टी का इस्तेमाल करके, स्टाइल लागू की जा सकती हैं:
@container style(--detail: new) {
.comment-block {
display: block;
}
.comment-block::after {
content: 'New';
border: 1px solid currentColor;
background: white;
...
}
}
@container style(--detail: low-stock) {
.comment-block {
display: block;
}
.comment-block::after {
content: 'Low Stock';
border: 1px solid currentColor;
background: white;
...
}
.media-img {
border: 2px solid brickred;
}
}
ऊपर दिए गए कोड की मदद से, हम --detail: low-stock और --detail: new के लिए चिप का इस्तेमाल कर सकते हैं. हालांकि, ऐसा हो सकता है कि आपको कोड ब्लॉक में कुछ गड़बड़ियां दिखी हों. फ़िलहाल, @container style(--detail) में सिर्फ़ --detail की मौजूदगी के लिए क्वेरी करने का कोई तरीका नहीं है. इससे स्टाइल को बेहतर तरीके से शेयर किया जा सकेगा और दोहराव में कमी आएगी. फ़िलहाल, इसकी सुविधा के बारे में काम करने वाले ग्रुप में चर्चा की जा रही है.
मौसम कार्ड
पिछले उदाहरण में, ऐसी एक कस्टम प्रॉपर्टी का इस्तेमाल किया गया है जिसमें स्टाइल लागू करने के लिए, कई संभावित वैल्यू हो सकती हैं. हालांकि, कई कस्टम प्रॉपर्टी का इस्तेमाल करके और उनके लिए क्वेरी करके भी इसे मिक्स किया जा सकता है. मौसम की जानकारी देने वाले इस कार्ड का उदाहरण देखें:
इन कार्ड के बैकग्राउंड ग्रेडिएंट और आइकॉन को स्टाइल देने के लिए मौसम की जानकारी देखें, जैसे कि “बादलों”, “बारिश” या “खिली धूप”:
@container style(--sunny: true) {
.weather-card {
background: linear-gradient(-30deg, yellow, orange);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: gold;
}
}
इस तरह, हर कार्ड को उसकी खास विशेषताओं के आधार पर स्टाइल किया जा सकता है. हालांकि, मीडिया क्वेरी की तरह ही and कॉम्बिनेटर का इस्तेमाल करके, एट्रिब्यूट (कस्टम प्रॉपर्टी) के कॉम्बिनेशन के लिए स्टाइल भी बनाई जा सकती है. उदाहरण के लिए, बादल और धूप खिली रहने वाला दिन ऐसा दिखेगा:
@container style(--sunny: true) and style(--cloudy: true) {
.weather-card {
background: linear-gradient(24deg, pink, violet);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: violet;
}
}
डिज़ाइन से डेटा को अलग करना
इन दोनों डेमो में, डेटा लेयर (पेज पर रेंडर होने वाले DOM) को, लागू की गई स्टाइल से अलग करने के संरचनात्मक फ़ायदे हैं. स्टाइल को ऐसे संभावित वैरिएंट के तौर पर लिखा जाता है जो कॉम्पोनेंट स्टाइल में होते हैं. वहीं, एंडपॉइंट वह डेटा भेज सकता है जिसका इस्तेमाल वह कॉम्पोनेंट को स्टाइल करने के लिए करेगा. किसी एक वैल्यू का इस्तेमाल किया जा सकता है, जैसे कि पहले मामले में --detail वैल्यू को अपडेट करना या एक से ज़्यादा वैरिएबल का इस्तेमाल करना, जैसे कि दूसरे मामले में (--rainy या --cloudy या --sunny सेट करना). सबसे अच्छी बात यह है कि इन वैल्यू को भी जोड़ा जा सकता है. --sunny और --cloudy, दोनों के लिए जांच करने पर, थोड़े-बहुत बादल दिख सकते हैं.
JavaScript की मदद से कस्टम प्रॉपर्टी वैल्यू को अपडेट किया जा सकता है. ऐसा, डीओएम मॉडल सेट अप करते समय (जैसे कि फ़्रेमवर्क में कॉम्पोनेंट बनाते समय) या <parentElem>.style.setProperty('--myProperty’, <value>) का इस्तेमाल करके, किसी भी समय किया जा सकता है. I
यहां एक डेमो दिया गया है, जो कोड की कुछ लाइनों में किसी बटन के --theme को अपडेट करता है. साथ ही, स्टाइल क्वेरी और उस कस्टम प्रॉपर्टी (--theme) का इस्तेमाल करके, स्टाइल लागू करता है:
स्टाइल क्वेरी का इस्तेमाल करके कार्ड को स्टाइल करें. कस्टम प्रॉपर्टी वैल्यू को अपडेट करने के लिए, इस JavaScript का इस्तेमाल किया जाता है:
const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');
themePicker.addEventListener('input', (e) => {
btnParent.style.setProperty('--theme', e.target.value);
})
इस लेख में बताई गई सुविधाएं अभी शुरुआत भर हैं. डाइनैमिक और रिस्पॉन्सिव इंटरफ़ेस बनाने में मदद करने के लिए, कंटेनर क्वेरी से कई दूसरी चीज़ों की उम्मीद की जा सकती है. खास तौर पर स्टाइल क्वेरी के लिए, कुछ समस्याएं अब भी मौजूद हैं. इनमें से एक तरीका यह है कि कस्टम प्रॉपर्टी के अलावा, सीएसएस स्टाइल के लिए स्टाइल क्वेरी लागू की जाएं. यह पहले से ही मौजूदा स्पेसिफ़िकेशन लेवल का हिस्सा है, लेकिन इसे अभी तक किसी भी ब्राउज़र में लागू नहीं किया गया है. जब बची हुई समस्या को हल कर लिया जाता है, तब बूलियन कॉन्टेक्स्ट इवैलुएशन को मौजूदा स्पेसिफ़िकेशन लेवल में जोड़े जाने की उम्मीद होती है. वहीं, स्पेसिफ़िकेशन के अगले लेवल के लिए, रेंज क्वेरी करने की योजना बनाई जाती है.