عناوين تعديلات العميل لميزات الوسائط المفضّلة للمستخدم

تتيح مجموعة من عناوين إشارات العميل للمواقع الإلكترونية الحصول على إعدادات المستخدم المفضّلة للوسائط بشكل اختياري عند الطلب، ما يتيح للخوادم تضمين لغة CSS المناسبة لأسباب تتعلق بالأداء.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

من المحتمل أن يكون لطلبات البحث عن وسائط CSS، وتحديدًا ميزات الوسائط المفضّلة لدى المستخدم مثل prefers-color-scheme أو prefers-reduced-motion، تأثيرًا كبيرًا على حجم CSS الذي يجب أن تعرضه الصفحة، وعلى التجربة التي سيحصل عليها المستخدم عند تحميل الصفحة.

مع التركيز على prefers-color-scheme، وتسليط الضوء على أنّ السبب ينطبق على ميزات الوسائط الأخرى المفضّلة للمستخدمين أيضًا، من أفضل الممارسات عدم تحميل CSS لنظام الألوان المحدّد غير المطابق في مسار العرض الحرج، وبدلاً من ذلك تحميل CSS ذي الصلة حاليًا فقط. ويمكنك إجراء ذلك من خلال عبر <link media>.

في المقابل، إنّ المواقع الإلكترونية التي تحظى بعدد زيارات مرتفع، مثل بحث Google والتي تريد الالتزام بميزات الوسائط المفضّلة للمستخدمين، مثل prefers-color-scheme وCSS المضمّنة هذه لأسباب تتعلق بالأداء، تحتاج إلى معرفة نظام الألوان المفضّل (أو ميزات الوسائط المفضّلة الأخرى للمستخدم على التوالي) عند الطلب لكي يتم تضمين حمولة HTML الأولية في لغة CSS المناسبة.

بالإضافة إلى ذلك، وخاصةً بالنسبة إلى prefers-color-scheme، تريد المواقع الإلكترونية بكل الطرق تجنُّب وميض المظاهر ذات الألوان غير الدقيقة.

إنّ العنوانَين Sec-CH-Prefers-Color-Scheme وSec-CH-Prefers-Reduced-Motion هما أول عنوان من سلسلة من عناوين تعديلات العميل الخاصة بميزات الوسائط المفضّلة لدى المستخدم تهدف إلى حلّ هذه المشكلة.

خلفية عن تلميحات العميل

تحدّد HTTP Client Hints عنوان استجابة Accept-CH الذي يمكن للخوادم استخدامه للإعلان عن استخدامها لرؤوس الطلبات للتفاوض الاستباقي على المحتوى، ويُشار إليها بالعامية باسم "تلميحات العميل". يحدّد اقتراح User Preferences Media Features Client Hints Headers (عناوين تلميحات للعملاء) مجموعة من تعديلات العميل التي تهدف إلى نقل ميزات الوسائط المفضّلة للمستخدم. وتتم تسمية تلميحات العميل هذه بعد ميزة وسائط تفضيل المستخدم المقابلة التي يتم إعداد تقارير عنها. على سبيل المثال، يتمّ الإبلاغ عن نظام الألوان المفضّل حاليًا وفقًا لـ prefers-color-scheme من خلال تلميح العميل Sec-CH-Prefers-Color-Scheme الذي يحمل الاسم المناسب.

خلفية عن تلميحات العملاء الهامة

تلميحات العميل المقترحة في عناوين تلميحات البرامج حول ميزات الوسائط المفضّلة من المفترَض أن يتم استخدامها بشكل أكثر شيوعًا كـ تلميحات مهمة للعميل. تلميحات العميل المُهمة هي تلميحات عن العميل تؤدي إلى تغيير المورد الناتج بشكل ملموس. ويجب جلب مثل هذا المورد بشكل متّسق في جميع عمليات تحميل الصفحات (بما في ذلك التحميل initial للصفحة) لتجنُّب حدوث مشاكل تبديل مرئية للمستخدم.

بنية تلميح العميل

تتكوّن ميزات الوسائط المفضّلة لدى المستخدم من اسم (مثل prefers-reduced-motion) وقيم مسموح بها (مثل no-preference أو reduce). ويتم تمثيل كل حقل عنوان لتلميح العميل على هيئة عناوين منظَّمة لبروتوكول HTTP يحتوي على عنصر تكون قيمته سلسلة. على سبيل المثال، لنقل أن المستخدم يفضل المظهر الداكن والحركة المنخفضة، تبدو تلميحات العميل كما في المثال أدناه.

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

إنّ مكافئ خدمة مقارنة الأسعار (CSS) للمعلومات التي تم نقلها في ملاحظات العميل أعلاه هو @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 على الإصدار 108 من Chromium. وهناك تعليقات أخرى من المورّدين، وهي WebKit وMozilla، في انتظار المراجعة.

عرض توضيحي لـ Sec-CH-Prefers-Color-Scheme

جرِّب العرض التوضيحي في Chromium 93 ولاحظ كيف تتغير عناصر CSS المضمّنة وفقًا لنظام الألوان المفضّل للمستخدم.

مخطط ألوان Sec-CH-Prefers-Color-داكن

Sec-CH-Prefers-Color-Scheme: فاتح

عرض توضيحي لـ Sec-CH-Prefers-Reduced-Motion

جرِّب العرض التوضيحي في Chromium 108 ولاحظ كيف تتغير لغة CSS المضمّنة وفقًا لإعدادات حركة المستخدم المفضّلة.

آلية العمل

  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. يستطيع الخادم بعد ذلك تخصيص الاستجابة وفقًا لتفضيلات العميل، على سبيل المثال، تضمين خدمة CSS المسؤولة عن المظهر الداكن في نص الاستجابة.

مثال على 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 عناوين تلميحات الوسائط لميزات الوسائط المفضّلة للمستخدم ونفّذها باستخدام المبادئ الأساسية المحدّدة في التحكّم في الوصول إلى الميزات القوية للنظام الأساسي للويب، بما في ذلك التحكّم في المستخدم والشفافية وهندسة العمل.

بالمثل، تسري على هذا الاقتراح اعتبارات الأمان المتعلّقة بتلميحات عميل HTTP واعتبارات الأمان الخاصة بموثوقية تلميحات العميل.

المراجع

شكر وتقدير

شكرًا جزيلاً على ملاحظاتك ونصائح Yoav Weiss القيمة. صورة رئيسية من Tdamemd على ويكيميديا كومنز