पैरंट के इनलाइन साइज़ की क्वेरी और कंटेनर क्वेरी यूनिट वैल्यू की क्वेरी करने की सुविधा, हाल ही में सभी मॉडर्न ब्राउज़र इंजन में स्थिर सहायता पर पहुंच गई है.
हालांकि, कॉन्टेंट की खास जानकारी में साइज़ के अलावा दूसरी क्वेरी भी शामिल होती हैं. इससे माता-पिता की स्टाइल की वैल्यू के लिए भी क्वेरी की जा सकती है. Chromium 111 से, कस्टम प्रॉपर्टी की वैल्यू के लिए स्टाइल कंटेनमेंट लागू किया जा सकता है. साथ ही, कस्टम प्रॉपर्टी की वैल्यू के लिए पैरंट एलिमेंट से क्वेरी की जा सकती है.
इसका मतलब है कि हमारे पास सीएसएस में स्टाइल का ज़्यादा लॉजिकल कंट्रोल है. इसकी मदद से, किसी ऐप्लिकेशन के लॉजिक और डेटा लेयर को उसकी स्टाइल से बेहतर तरीके से अलग किया जा सकता है.
सीएसएस कंटेनमेंट मॉड्यूल लेवल 3 की खास जानकारी में साइज़ और स्टाइल क्वेरी शामिल हैं. इससे किसी भी स्टाइल के लिए पैरंट से क्वेरी की जा सकती है. इसमें प्रॉपर्टी और font-weight: 800 जैसे वैल्यू पेयर शामिल हैं. हालांकि, इस सुविधा के रोल आउट में, फ़िलहाल स्टाइल क्वेरी सिर्फ़ सीएसएस कस्टम प्रॉपर्टी वैल्यू के साथ काम करती हैं. यह स्टाइल को मिलाने और डेटा को डिज़ाइन से अलग करने के लिए, अब भी बहुत काम आता है. चलिए देखते हैं कि सीएसएस कस्टम प्रॉपर्टी के साथ, स्टाइल क्वेरी का इस्तेमाल कैसे किया जाता है:
स्टाइल क्वेरी का इस्तेमाल शुरू करना
मान लें कि हमारे पास नीचे दिया गया एचटीएमएल है:
<ul class="card-list">
<li class="card-container">
<div class="card">
...
</div>
</li>
</ul>
स्टाइल क्वेरी का इस्तेमाल करने के लिए, आपको पहले कंटेनर एलिमेंट सेट अप करना होगा. इसमें थोड़ा अलग तरीका होना चाहिए. यह इस बात पर निर्भर करता है कि आपके माता-पिता के लिए क्वेरी करनी है या सीधे तौर पर नहीं.
सीधे तौर पर माता-पिता/अभिभावक के लिए क्वेरी करना
स्टाइल क्वेरी से अलग, आपको .card-container पर container-type या container प्रॉपर्टी का इस्तेमाल करके कंटेनमेंट को लागू करने की ज़रूरत नहीं होती, ताकि .card उसके डायरेक्ट पैरंट की स्टाइल से क्वेरी कर सके. हालांकि, हमें स्टाइल (इस मामले में कस्टम प्रॉपर्टी वैल्यू) को कंटेनर (इस मामले में .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 से कस्टम प्रॉपर्टी वैल्यू को आसानी से अपडेट किया जा सकता है. ऐसा DOM मॉडल सेट अप करते समय या <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);
})
इस लेख में बताई गई सुविधाएं सिर्फ़ शुरुआत हैं. डाइनैमिक और रिस्पॉन्सिव इंटरफ़ेस बनाने के लिए, आपको कंटेनर क्वेरी से और भी चीज़ें मिल सकती हैं. खास तौर पर स्टाइल क्वेरी के लिए, अब भी कुछ समस्याएं हैं. पहला तरीका है कस्टम प्रॉपर्टी के अलावा, सीएसएस स्टाइल के लिए स्टाइल क्वेरी को लागू करना. यह पहले से ही मौजूदा स्पेसिफ़िकेशन लेवल का हिस्सा है, लेकिन इसे किसी भी ब्राउज़र में लागू नहीं किया गया है. बकाया समस्या का समाधान होने पर, बूलियन कॉन्टेक्स्ट इवैलुएशन को मौजूदा स्पेसिफ़िकेशन लेवल में जोड़ा जाना चाहिए, जबकि रेंज क्वेरी को स्पेसिफ़िकेशन के अगले लेवल पर प्लान किया जाएगा.