स्टाइल क्वेरी का इस्तेमाल शुरू करना

Una Kravets

हाल ही में, सभी मॉडर्न ब्राउज़र इंजन में, पैरंट के इनलाइन साइज़ और कंटेनर क्वेरी यूनिट वैल्यू के बारे में क्वेरी करने की सुविधा उपलब्ध कराई गई है.

हालांकि, कंटेनमेंट स्पेसिफ़िकेशन में साइज़ क्वेरी के अलावा और भी चीज़ें शामिल होती हैं. इससे पैरंट के स्टाइल एट्रिब्यूट की वैल्यू के बारे में भी क्वेरी की जा सकती है. Chromium 111 से, कस्टम प्रॉपर्टी की वैल्यू के लिए स्टाइल कंटेनमेंट लागू किया जा सकेगा. साथ ही, कस्टम प्रॉपर्टी की वैल्यू के लिए पैरंट एलिमेंट को क्वेरी किया जा सकेगा.

इसका मतलब है कि सीएसएस में स्टाइल पर हमारा लॉजिकल कंट्रोल और भी ज़्यादा है. साथ ही, इससे किसी ऐप्लिकेशन के लॉजिक और डेटा लेयर को उसकी स्टाइल से बेहतर तरीके से अलग किया जा सकता है.

सीएसएस कंटेनमेंट मॉड्यूल लेवल 3 स्पेसिफ़िकेशन में, साइज़ और स्टाइल क्वेरी शामिल होती हैं. इससे किसी भी स्टाइल को पैरंट से क्वेरी किया जा सकता है. इसमें प्रॉपर्टी और वैल्यू पेयर, जैसे कि font-weight: 800 शामिल हैं. हालांकि, इस सुविधा को रोल आउट करने के दौरान, स्टाइल क्वेरी फ़िलहाल सिर्फ़ सीएसएस कस्टम प्रॉपर्टी वैल्यू के साथ काम करती हैं. यह अब भी स्टाइल को एक साथ इस्तेमाल करने और डेटा को डिज़ाइन से अलग करने के लिए बहुत काम की है. आइए, देखते हैं कि सीएसएस कस्टम प्रॉपर्टी के साथ स्टाइल क्वेरी का इस्तेमाल कैसे किया जाता है:

स्टाइल क्वेरी का इस्तेमाल शुरू करना

मान लें कि हमारे पास यह एचटीएमएल है:

<ul class="card-list">
  <li class="card-container">
    <div class="card">
      ...
    </div>
  </li>
</ul>

स्टाइल क्वेरी का इस्तेमाल करने के लिए, आपको सबसे पहले कंटेनर एलिमेंट सेट अप करना होगा. इसके लिए, आपको अलग तरीके से क्वेरी करनी होगी. यह इस बात पर निर्भर करता है कि आपको डायरेक्ट पैरंट से क्वेरी करनी है या इनडायरेक्ट पैरंट से.

सीधे तौर पर माता-पिता/अभिभावक से क्वेरी करना

स्टाइल क्वेरी के उलट, .card को अपने डायरेक्ट पैरंट की स्टाइल के बारे में क्वेरी करने के लिए, .card-container में container-type या container प्रॉपर्टी का इस्तेमाल करके कंटेनमेंट लागू करने की ज़रूरत नहीं होती. हालांकि, हमें स्टाइल (इस मामले में कस्टम प्रॉपर्टी की वैल्यू) को किसी कंटेनर (इस मामले में .card-container) या डीओएम में स्टाइल किए जा रहे एलिमेंट को शामिल करने वाले किसी भी एलिमेंट पर लागू करना होगा. हम उस एलिमेंट पर स्टाइल लागू नहीं कर सकते जिस पर हम क्वेरी कर रहे हैं. ऐसा इसलिए है, क्योंकि इससे इनफ़िनिट लूप बन सकते हैं.

किसी अभिभावक से सीधे तौर पर सवाल पूछने के लिए, यह लिखें:

/* 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 की स्टाइल के आधार पर .card पर स्टाइल लागू कर सकते हैं. इसके लिए, हमें .card-list को container-name देना होगा और स्टाइल क्वेरी में इसका रेफ़रंस देना होगा.

/* 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;
  }
}

डेटा को डिज़ाइन से अलग करना

इन दोनों डेमो में, डेटा लेयर (पेज पर रेंडर किया जाने वाला डीओएम) को लागू की गई स्टाइल से अलग करने का फ़ायदा मिलता है. स्टाइल को ऐसे संभावित वैरिएंट के तौर पर लिखा जाता है जो कॉम्पोनेंट की स्टाइल में मौजूद होते हैं. वहीं, कोई एंडपॉइंट ऐसा डेटा भेज सकता है जिसका इस्तेमाल कॉम्पोनेंट को स्टाइल करने के लिए किया जाएगा. एक वैल्यू का इस्तेमाल किया जा सकता है. जैसे, पहले मामले में --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);
})

इस लेख में बताई गई सुविधाएं, सिर्फ़ शुरुआत हैं. कंटेनर क्वेरी से आपको और भी कई सुविधाएं मिल सकती हैं. इनकी मदद से, डाइनैमिक और रिस्पॉन्सिव इंटरफ़ेस बनाए जा सकते हैं. स्टाइल क्वेरी के बारे में बात करें, तो अब भी कुछ समस्याएं बाकी हैं. इनमें से एक समस्या, कस्टम प्रॉपर्टी के अलावा अन्य सीएसएस स्टाइल के लिए स्टाइल क्वेरी लागू करने से जुड़ी है. यह समस्या, मौजूदा स्पेसिफ़िकेशन लेवल का हिस्सा है, लेकिन अब तक किसी भी ब्राउज़र में इसे लागू नहीं किया गया है. समस्या हल होने के बाद, मौजूदा स्पेसिफ़िकेशन लेवल में बूलियन कॉन्टेक्स्ट का आकलन करने की सुविधा जोड़ी जाएगी. वहीं, रेंज क्वेरी को स्पेसिफ़िकेशन के अगले लेवल में शामिल करने का प्लान है.