इस पेज का अनुवाद 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 क्लाइंट हिंट के ज़रिए दी जाती है.

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

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

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

उपयोगकर्ता की प्राथमिकता वाली मीडिया सुविधाओं में एक नाम (जैसे कि 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 और Mozilla जैसे अन्य वेंडर के सुझाव, शिकायत या राय का इंतज़ार है.

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

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

Sec-CH-Prefers-Color-Scheme: गहरा

Sec-CH-Prefers-Color-Scheme: light

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

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

रेफ़रंस

स्वीकार की गई

इनके फ़ीडबैक और सलाह के लिए आपका धन्यवाद योव वाइस. इस दिन Tdatamemd का हीरो इमेज विकिमीडिया कॉमंस.