डिज़ाइन टोकन की प्रतिक्रिया

बैकग्राउंड और खास जानकारी

अक्सर, लेखक को किसी कॉम्पोनेंट के डिज़ाइन में कॉन्टेक्स्ट के हिसाब से बदलाव करने की ज़रूरत होती है. पहले, लेखकों को इस तरह के बदलाव लागू करने के लिए, सिलेक्टर का इस्तेमाल करना पड़ता था. इसका मतलब यह था कि उनके कई डिज़ाइन टोकन, कस्टम प्रॉपर्टी के तौर पर मौजूद हो सकते थे. हालांकि, ज़्यादा ऑर्डर वाले डिज़ाइन टोकन को सिर्फ़ सिलेक्टर पैटर्न (यानी कि क्लास के नाम या एट्रिब्यूट कन्वेंशन का इस्तेमाल करके) या JavaScript फ़्रेमवर्क में प्रॉप/कॉन्टेक्स्ट के तौर पर एन्कोड किया जा सकता था.

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

इन्हें कैसे लागू करें

कंटेनर स्टाइल क्वेरी का इस्तेमाल करके, रिऐक्टिव डिज़ाइन टोकन लागू करना काफ़ी आसान है:

1. हायर-ऑर्डर डिज़ाइन टोकन को कंटेनर पर कस्टम प्रॉपर्टी के तौर पर सेट करें. यह ज़रूरी नहीं है कि यह कोई रजिस्टर की गई कस्टम प्रॉपर्टी हो.
2. उस कस्टम प्रॉपर्टी की वैल्यू के बारे में क्वेरी करने के लिए, @container style() नियम का इस्तेमाल करें.
3. कंटेनर में मौजूद डिसेंडेंट एलिमेंट पर सही स्टाइल लागू करें.

इन बातों का ध्यान रखें:

• जिस कंटेनर के लिए स्टाइल क्वेरी की जा रही है उसमें container-type या container-name सेट होना ज़रूरी नहीं है. हालांकि, container-name की मदद से ज़्यादा सटीक क्वेरी की जा सकती है.
• कंटेनर स्टाइल क्वेरी का इस्तेमाल करके, कंटेनर को स्टाइल नहीं किया जा सकता.

ऊपर दिए गए चरणों को लागू करने का एक बुनियादी उदाहरण यहां दिया गया है.

<div class="features">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.features {
  --density: spacious;
}

.bugs {
  --density: compact;
}

@container style(--density: compact) {
  .card {
    padding: 8px;
  }
}

@container style(--density: spacious) {
  .card {
    padding: 24px;
  }
}

फ़ॉलबैक रणनीतियां

जब तक कंटेनर स्टाइल क्वेरी के लिए Baseline की सुविधा उपलब्ध नहीं हो जाती, तब तक हमारा सुझाव है कि आप उन्हें ऐसी मुख्य सुविधाओं के लिए इस्तेमाल न करें जो सभी ब्राउज़र पर उपलब्ध होनी चाहिए. इसकी वजह यह है कि उनके लिए फ़ॉलबैक बनाना आसान नहीं है. फ़ॉलबैक बनाने से, उनके फ़ायदे कम हो जाते हैं या उनकी अपनी सीमाएं होती हैं. उदाहरण के लिए, अगर यूज़र इंटरफ़ेस (यूआई) डेंसिटी के लिए उपयोगकर्ता की प्राथमिकता को ऐसी मुख्य सुविधा नहीं माना जाता है जो सभी अनुभवों में उपलब्ध होनी चाहिए, तो कंटेनर स्टाइल क्वेरी का इस्तेमाल करके, फ़ॉलबैक के बिना सुविधा को लागू किया जा सकता है.

इसके बजाय, सिलेक्टर का इस्तेमाल करना

मुख्य सुविधाओं के लिए, सिलेक्टर का इस्तेमाल करके कोई दूसरा तरीका अपनाना चाहिए. इस उदाहरण में, डेंसिटी डिज़ाइन टोकन को कस्टम प्रॉपर्टी के बजाय मार्कअप में एन्कोड करने के लिए, data-density एट्रिब्यूट का इस्तेमाल किया गया है:

<div class="features" data-density="spacious">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs" data-density="compact">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

/* This example uses `:where()` to avoid increasing specificity */
:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

इस फ़ॉलबैक तरीके की एक बड़ी सीमा यह है कि यह data-density एट्रिब्यूट सेट के साथ नेस्टिंग एलिमेंट के साथ काम नहीं करता. ऐसा इसलिए, क्योंकि सिलेक्टर की खासियत एक जैसी होती है. स्टाइल तय करने के लिए, दिखने के क्रम का इस्तेमाल किया जाएगा. इसका मतलब है कि [data-density="spacious"] को हमेशा [data-density="compact"] से ज़्यादा प्राथमिकता दी जाएगी.

प्रोग्रेसिव एनहैंसमेंट के तौर पर स्टाइल क्वेरी का इस्तेमाल करना

हमारा सुझाव है कि आप स्टाइल क्वेरी का इस्तेमाल, किसी मुख्य सुविधा के लिए परतदार वृद्धि के तौर पर न करें. हालांकि, अगर आपको ऐसा करना है, तो डुप्लीकेट कॉन्टेंट से बचने के लिए कुछ कस्टम प्रॉपर्टी बनाएं. इसके बाद, स्टाइल क्वेरी शामिल करें. पक्का करें कि फ़ॉलबैक तरीका, कंटेनर एलिमेंट चुनते समय :where() का इस्तेमाल करता हो, ताकि स्पेसिफ़िसिटी न बढ़े.

.card {
  --card-padding-compact: 8px;
  --card-padding-spacious: 24px;
}

:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

/* Use style queries as a progressive enhancement: same specificity, so order of appearance is used */

@container style(--density: compact) {
  .card {
    padding: var(--card-padding-compact);
  }
}

@container style(--density: spacious) {
  .card {
    padding: var(--card-padding-spacious);
  }
}

सिर्फ़ सीएसएस की मदद से सुविधा की जांच करना

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

:root {
  --style-queries-supported: check;
}

.density-toggle {
  display: none;
}

@container style(--style-queries-supported) {
  .density-toggle {
    display: revert;
  }
}

JavaScript की मदद से सुविधा की जांच करना

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

इस उदाहरण में कस्टम प्रॉपर्टी का इस्तेमाल किया गया है, क्योंकि इसका कोई विज़ुअल इफ़ेक्ट नहीं होगा:

:root {
  --style-queries-supported: check;
}

@container style(--style-queries-supported: check) {
  body {
    --style-queries-supported: yes;
  }
}

इसके बाद, JavaScript में कैलकुलेट की गई वैल्यू को इस तरह देखें:

if (getComputedStyle(document.body).getPropertyValue("--style-queries-supported") === "yes") {
  // Use container style queries
} else {
  // Use fallback strategy
}