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

Una Kravets

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

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

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

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

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