उपयोगकर्ता की पसंद के मीडिया की सुविधाएं, क्लाइंट हिंट के हेडर

क्लाइंट हिंट हेडर के सेट की मदद से, साइटें अनुरोध के समय उपयोगकर्ता की मीडिया प्राथमिकताएं हासिल कर सकती हैं. इससे सर्वर, परफ़ॉर्मेंस के लिए सही सीएसएस को इनलाइन कर सकते हैं.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

सीएसएस मीडिया क्वेरी और खास तौर पर, prefers-color-scheme या prefers-reduced-motion जैसी उपयोगकर्ता की पसंद की मीडिया सुविधाओं का, पेज पर डिलीवर की जाने वाली सीएसएस की संख्या और पेज लोड होने पर उपयोगकर्ता को मिलने वाले अनुभव पर, काफ़ी असर पड़ सकता है.

prefers-color-scheme पर फ़ोकस करते हुए, यह हाइलाइट करना कि यह वजह, उपयोगकर्ता की प्राथमिकता वाली अन्य मीडिया सुविधाओं पर भी लागू होती है. यह सबसे सही तरीका है कि क्रिटिकल रेंडरिंग पाथ में, मैच न करने वाली किसी खास कलर स्कीम के लिए सीएसएस लोड न की जाए. इसके बजाय, शुरुआत में सिर्फ़ मौजूदा सीएसएस लोड की जाए. ऐसा करने का एक तरीका है, <link media> का इस्तेमाल करना.

हालांकि, Google Search जैसी ज़्यादा ट्रैफ़िक वाली साइटों को prefers-color-scheme जैसी उपयोगकर्ता की प्राथमिकता वाली मीडिया सुविधाओं और परफ़ॉर्मेंस के लिए इनलाइन सीएसएस का इस्तेमाल करना होता है. इसलिए, उन्हें अनुरोध के समय पसंदीदा कलर स्कीम (या उपयोगकर्ता की प्राथमिकता वाली अन्य मीडिया सुविधाओं) के बारे में पता होना चाहिए, ताकि शुरुआती एचटीएमएल पेलोड में पहले से ही सही सीएसएस इनलाइन हो.

इसके अलावा, खास तौर पर prefers-color-scheme के लिए, साइटें किसी भी तरह से गलत रंग की थीम के फ़्लैश से बचना चाहती हैं.

Sec-CH-Prefers-Color-Scheme और Sec-CH-Prefers-Reduced-Motion क्लाइंट हिंट हेडर, उपयोगकर्ता की प्राथमिकता वाले मीडिया की सुविधाओं के क्लाइंट हिंट हेडर की सीरीज़ में से पहले हैं. इनका मकसद इस समस्या को हल करना है.

क्लाइंट के संकेत के बारे में जानकारी

एचटीटीपी क्लाइंट हिंट, Accept-CH रिस्पॉन्स हेडर तय करता है. इसका इस्तेमाल सर्वर, कॉन्टेंट के लिए पहले से बातचीत करने के लिए, अनुरोध हेडर के इस्तेमाल का विज्ञापन करने के लिए कर सकते हैं. इसे आम तौर पर क्लाइंट हिंट कहा जाता है. उपयोगकर्ता की प्राथमिकता वाली मीडिया सुविधाओं के क्लाइंट हिंट हेडर के प्रस्ताव में, क्लाइंट हिंट का एक सेट बताया गया है. इसका मकसद, उपयोगकर्ता की प्राथमिकता वाली मीडिया सुविधाओं के बारे में बताना है. इन क्लाइंट हिंट को, उपयोगकर्ता की पसंद के हिसाब से मीडिया की उस सुविधा के नाम पर रखा जाता है जिसकी रिपोर्टिंग की जा रही है. उदाहरण के लिए, prefers-color-scheme के हिसाब से फ़िलहाल पसंदीदा कलर स्कीम की जानकारी, Sec-CH-Prefers-Color-Scheme क्लाइंट हिंट के ज़रिए दी जाती है.

ज़रूरी क्लाइंट हिंट के बारे में जानकारी

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

क्लाइंट हिंट सिंटैक्स

उपयोगकर्ता की प्राथमिकता वाली मीडिया सुविधाओं में एक नाम (जैसे कि prefers-reduced-motion) और अनुमति वाली वैल्यू (जैसे कि no-preference या reduce) शामिल होती हैं. हर क्लाइंट हिंट हेडर फ़ील्ड को एचटीटीपी के लिए स्ट्रक्चर्ड हेडर ऑब्जेक्ट के तौर पर दिखाया जाता है. इसमें एक आइटम होता है, जिसकी वैल्यू स्ट्रिंग होती है. उदाहरण के लिए, अगर उपयोगकर्ता को गहरे रंग वाली थीम और कम मोशन पसंद है, तो क्लाइंट के संकेत नीचे दिए गए उदाहरण की तरह दिखेंगे.

GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"

ऊपर दिए गए क्लाइंट हिंट में दी गई जानकारी के सीएसएस वर्शन के तौर पर, @media (prefers-color-scheme: dark) {} और @media (prefers-reduced-motion: reduce) {} का इस्तेमाल किया जाता है.

क्लाइंट के लिए दिए गए सुझावों की पूरी सूची

क्लाइंट हिंट की सूची, मीडिया क्वेरी लेवल 5 में उपयोगकर्ता की प्राथमिकता वाली मीडिया सुविधाओं के हिसाब से बनाई गई है.

क्लाइंट हिंट इस्तेमाल की जा सकने वाली वैल्यू उपयोगकर्ता की पसंद से जुड़ी मीडिया सुविधा
Sec-CH-Prefers-Reduced-Motion no-preference, reduce prefers-reduced-motion
Sec-CH-Prefers-Reduced-Transparency no-preference, reduce prefers-reduced-transparency
Sec-CH-Prefers-Contrast no-preference, less, more, custom prefers-contrast
Sec-CH-Forced-Colors active, none forced-colors
Sec-CH-Prefers-Color-Scheme light, dark prefers-color-scheme
Sec-CH-Prefers-Reduced-Data no-preference, reduce prefers-reduced-data

ब्राउज़र समर्थन

Sec-CH-Prefers-Color-Scheme क्लाइंट हिंट हेडर, Chromium 93 पर काम करता है. Sec-CH-Prefers-Reduced-Motion क्लाइंट हिंट हेडर, Chromium 108 पर काम करता है. WebKit और Mozilla जैसे अन्य वेंडर के सुझाव, शिकायत या राय का इंतज़ार किया जा रहा है.

Sec-CH-Prefers-Color-Scheme का डेमो

Chromium 93 में डेमो आज़माएं और देखें कि उपयोगकर्ता की पसंदीदा कलर स्कीम के हिसाब से, इनलाइन की गई सीएसएस कैसे बदलती है.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Sec-CH-Prefers-Reduced-Motion का डेमो

Chromium 108 में डेमो आज़माएं और देखें कि उपयोगकर्ता की मोशन सेटिंग के हिसाब से, इनलाइन की गई सीएसएस कैसे बदलती है.

यह कैसे काम करता है

  1. क्लाइंट, सर्वर से शुरुआती अनुरोध करता है. bash GET / HTTP/2 Host: example.com
  2. सर्वर जवाब देता है और Accept-CH के ज़रिए क्लाइंट को बताता है कि वह Sec-CH-Prefers-Color-Scheme और Sec-CH-Prefers-Contrast क्लाइंट हिंट स्वीकार करता है. इनमें से Critical-CH के मुताबिक, वह Sec-CH-Prefers-Color-Scheme को एक अहम क्लाइंट हिंट मानता है. साथ ही, Vary के मुताबिक, जवाब भी अलग-अलग देता है. bash HTTP/2 200 OK Content-Type: text/html Accept-CH: Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Contrast Vary: Sec-CH-Prefers-Color-Scheme Critical-CH: Sec-CH-Prefers-Color-Scheme
  3. इसके बाद, क्लाइंट अनुरोध को फिर से भेजता है. साथ ही, Sec-CH-Prefers-Color-Scheme के ज़रिए सर्वर को बताता है कि उसके पास उपयोगकर्ता की पसंद के मुताबिक, डार्क स्कीम वाला कॉन्टेंट है. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. इसके बाद, सर्वर क्लाइंट की प्राथमिकताओं के हिसाब से जवाब को तैयार कर सकता है. उदाहरण के लिए, रिस्पॉन्स बॉडी में डार्क थीम के लिए ज़रूरी सीएसएस को इनलाइन कर सकता है.

Node.js का उदाहरण

नीचे दिया गया Node.js उदाहरण, लोकप्रिय Express.js फ़्रेमवर्क के लिए लिखा गया है. इसमें दिखाया गया है कि Sec-CH-Prefers-Color-Scheme क्लाइंट हिंट हेडर को इस्तेमाल करने का तरीका क्या है. ऊपर दिया गया डेमो, इस कोड की मदद से काम करता है.

app.get("/", (req, res) => {
  // Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
  res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server's response will vary based on its value…
  res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server considers this client hint a _critical_ client hint.
  res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
  // Read the user's preferred color scheme from the headers…
  const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
  // …and send the adequate HTML response with the right CSS inlined.
  res.send(getHTML(prefersColorScheme));
});

निजता और सुरक्षा से जुड़ी बातें

Chromium टीम ने वेब प्लैटफ़ॉर्म की बेहतर सुविधाओं के ऐक्सेस को कंट्रोल करना में बताए गए मुख्य सिद्धांतों का इस्तेमाल करके, उपयोगकर्ता की प्राथमिकता वाली मीडिया सुविधाओं के क्लाइंट हिंट हेडर को डिज़ाइन और लागू किया है. इन सिद्धांतों में, उपयोगकर्ता का कंट्रोल, पारदर्शिता, और काम करने के तरीके शामिल हैं.

एचटीटीपी क्लाइंट हिंट के लिए बताई गई सुरक्षा से जुड़ी बातें और क्लाइंट हिंट के भरोसेमंद होने से जुड़ी सुरक्षा से जुड़ी बातें, इस प्रस्ताव पर भी लागू होती हैं.

रेफ़रंस

आभार

Yoav Weiss के अहम सुझाव और सलाह के लिए धन्यवाद. विकिमीडिया कॉमंस पर, Tdadamemd की दी गई हीरो इमेज.