تسمح مجموعة من رؤوس تلميحات العميل للمواقع الإلكترونية بالحصول على الإعدادات المفضّلة للوسائط للمستخدم اختياريًا في وقت الطلب، ما يسمح للخوادم بتضمين ملف CSS المناسب لأسباب تتعلّق بالأداء.
إنّ طلبات البحث عن الوسائط في 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"
مكافئ 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
في الإصدار 93 من Chromium.
يتوفّر عنوان تلميح العميل Sec-CH-Prefers-Reduced-Motion
في الإصدار 108 من Chromium.
لا تزال ملاحظات المورّدين الآخرين، مثل WebKit
وMozilla، في انتظار المراجعة.
عرض توضيحي لـ Sec-CH-Prefers-Color-Scheme
جرِّب الإصدار التجريبي في Chromium 93 ولاحظ كيف يتغيّر ملف CSS المضمّن وفقًا للألوان المفضّلة للمستخدم.
عرض توضيحي لـ Sec-CH-Prefers-Reduced-Motion
جرِّب العرض التجريبي في Chromium 108 ولاحظ كيف يتغيّر ملف CSS المضمّن وفقًا لإعدادات المستخدم المفضّلة للحركة.
آلية العمل
- يقدّم العميل طلبًا أوليًا إلى الخادم.
bash GET / HTTP/2 Host: example.com
- يستجيب الخادم، ويُعلم العميل من خلال
Accept-CH
أنّه يقبلSec-CH-Prefers-Color-Scheme
وSec-CH-Prefers-Contrast
Client Hints، والتي يصنّف منهاSec-CH-Prefers-Color-Scheme
على أنّه Client Hint مهم وفقًا لCritical-CH
، كما يصنّفVary
على أنّه Client Hint مهم، ويغيّر الاستجابة وفقًا لذلك.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"
- ويمكن للخادم بعد ذلك تخصيص الردّ وفقًا لإعدادات العميل المفضّلة، وعلى سبيل المثال، تضمين خدمة 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 ملاحظات العميل وملاحظات الأمان لاعتماد ملاحظات العميل على هذا الاقتراح.
المراجع
- مسودة المواصفات
- الشرح
- Sec-CH-Prefers-Color-Scheme - إدخال حالة Chrome
- Sec-CH-Prefers-Color-Scheme - خطأ في Chromium
- Sec-CH-Prefers-Reduced-Motion - إدخال حالة Chrome
- Sec-CH-Prefers- AdSensed-Motion - خطأ في Chromium
- سلسلة محادثات WebKit
- موضع معايير Mozilla
- تلميحات العميل
- موثوقية تعديلات العميل
- المستوى 5 من طلبات البحث عن الوسائط
- العناوين المنظَّمة لبروتوكول HTTP
شكر وتقدير
نشكرك على الملاحظات والنصائح القيّمة التي قدّمها العميل يواف ويس. الصورة الرئيسية من إنشاء Tdadamemd على ويكيميديا كومنز.