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

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

François Beaufort
François Beaufort
GitHub
Thomas Steiner

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

مع التركيز على prefers-color-scheme، ولكن مع التأكيد على أنّ هذا المنطق ينطبق أيضًا على ميزات وسائط ملفّات CSS الأخرى المفضّلة لدى المستخدِم، من أفضل الممارسات عدم تحميل ملفّات 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 عنوان Accept-CH استجابة يمكن للخوادم استخدامه للإعلان عن استخدامها لرؤوس الطلبات من أجل التفاوض الاستباقي على المحتوى، ويُشار إليه اصطلاحًا باسم ملاحظات العميل. يحدِّد اقتراح رؤوس إشارات العميل لميزات الوسائط المفضّلة للمستخدم مجموعة من إشارات العميل التي تهدف إلى نقل ميزات الوسائط المفضّلة للمستخدم. يتمّ تسمية إشارات العميل هذه باسم ميزة الوسائط المفضّلة للمستخدِم المقابلة التي يتمّ الإبلاغ عنها. على سبيل المثال، يتم الإبلاغ عن الألوان المفضّلة حاليًا وفقًا لـ prefers-color-scheme من خلال تلميح العميل Sec-CH-Prefers-Color-Scheme الذي يحمل اسمًا مناسبًا.

لمحة عن تعديلات العميل المهمة

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

بنية تعديلات البرامج

تتألف ميزات الوسائط المفضّلة للمستخدم من اسم (مثل 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"

إنّ المعلومات الواردة في تلميحات العميل أعلاه هي @media (prefers-color-scheme: dark) {} و@media (prefers-reduced-motion: reduce) {} في CSS على التوالي.

القائمة الكاملة لملاحظات العميل

تم وضع قائمة إشارات العميل على غرار ميزات الوسائط المفضّلة للمستخدم في مستوى 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 في الإصدار 93 من Chromium. يتوفّر عنوان تلميح العميل Sec-CH-Prefers-Reduced-Motion في الإصدار 108 من Chromium. لا تزال ملاحظات المورّدين الآخرين، مثل WebKit وMozilla، في انتظار المراجعة.

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

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

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

عرض توضيحي لـ 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 Client Hints، والتي يصنّفها بموجب Critical-CH على أنّها Sec-CH-Prefers-Color-Scheme Client Hint مهمّة، ويتغيّر أيضًا الردّ عليها وفقًا لما ينقلّه 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 رؤوس Client Hints لميزة "الميزات المفضّلة للمستخدم" في الوسائط ونفّذها باستخدام المبادئ الأساسية المحدّدة في مقالة التحكّم في الوصول إلى ميزات منصة الويب القوية، بما في ذلك التحكّم الذي يمارسه المستخدم والشفافية وسهولة الاستخدام.

تنطبق أيضًا ملاحظات الأمان الخاصة بـ HTTP ملاحظات العميل وملاحظات الأمان لاعتماد ملاحظات العميل على هذا الاقتراح.

المراجع

الشكر والتقدير

نشكرك على الملاحظات والنصائح القيّمة التي قدّمها العميل يواف ويس. الصورة الرئيسية من إنشاء Tdadamemd على ويكيميديا كومنز.