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

Una Kravets

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

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

माता-पिता से सीधे क्वेरी करने के लिए, यह जानकारी लिखें:

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

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