इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

François Beaufort

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 क्लाइंट हिंट के नाम से रिपोर्ट किया जाता है.

अहम क्लाइंट के संकेतों के लिए बैकग्राउंड

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

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

उपयोगकर्ता की पसंद की मीडिया सुविधाओं में एक नाम (जैसे 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) {} है.

क्लाइंट के संकेतों की पूरी सूची

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

क्लाइंट के लिए संकेतों की सूची, मीडिया क्वेरी लेवल 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's और Mozilla नाम के दूसरे वेंडर के सुझाव, शिकायत या राय को मंज़ूरी मिलना बाकी है.

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

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

Sec-CH-Prefers-Color-Scheme: डार्क

Sec-CH-Prefers-Color-स्कीम: लाइट

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

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

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

क्लाइंट, सर्वर से शुरुआती अनुरोध करता है. bash GET / HTTP/2 Host: example.com
सर्वर, 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
इसके बाद, क्लाइंट Sec-CH-Prefers-Color-Scheme के ज़रिए सर्वर को दोबारा अनुरोध करते हुए बताता है कि गहरे रंग वाले कॉन्टेंट के लिए, उपयोगकर्ता की प्राथमिकता है. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
इसके बाद, सर्वर क्लाइंट की पसंद के हिसाब से रिस्पॉन्स दे सकता है. उदाहरण के लिए, रिस्पॉन्स के मुख्य हिस्से में, गहरे रंग वाली थीम के लिए ज़िम्मेदार सीएसएस को इनलाइन किया जा सकता है.

Node.js का उदाहरण

लोकप्रिय Express.js फ़्रेमवर्क के लिए नीचे दिया गया Node.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 की टीम ने उपयोगकर्ता की प्राथमिकता वाली मीडिया सुविधाओं के क्लाइंट हिंट हेडर को डिज़ाइन किया है और उसे लागू किया है. इसके लिए, बेहतर वेब प्लैटफ़ॉर्म सुविधाओं का ऐक्सेस कंट्रोल करना सेक्शन में बताए गए मुख्य सिद्धांतों का इस्तेमाल किया गया है. जैसे, उपयोगकर्ता कंट्रोल, पारदर्शिता, और एर्गोनॉमिक्स.

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

रेफ़रंस

स्वीकार हैं

योव वाइज़ से अपनी राय और सुझाव देने के लिए धन्यवाद. Wikimedia Common पर Tdadaemd की हीरो इमेज.