Safari 27.3 Beta يضيف Adaptive Dark Mode للمواقع الفاتحة

أعلنت WebKit عن Adaptive Dark Mode في Safari 27.3 beta. أصبح Safari 12.1 أول متصفح يدعم الوضع الداكن على الويب في ربيع 2019، لكن ليس كل موقع ويب يملك نسخة داكنة. يكيّف Adaptive Dark Mode المواقع الفاتحة لمستخدمي الوضع الداكن مع ترك المواقع التي تعلن دعم الوضع الداكن دون تغيير.

كيف يعمل Adaptive Dark Mode

نحو 40% من تحميلات صفحات الويب تأتي من مستخدمين في الوضع الداكن، بينما تدعم 10% فقط من تحميلات الصفحات هذا الوضع. صُمّم Adaptive Dark Mode لسد هذه الفجوة. يتحقق أولاً مما إذا كان الموقع يشير إلى دعم الوضع الداكن عبر وسم meta color-scheme مع محتوى light dark في HTML أو عبر color-scheme: light dark في CSS. إذا كان الأمر كذلك، فلا تغيّر الميزة الصفحة. أما للمواقع الأخرى، فتحلل Safari الألوان وتقدر ما إذا كانت الصفحة فاتحة أو داكنة في الغالب. تبقى الصفحة ذات الخلفية الداكنة عموماً والنص الفاتح دون تغيير، بينما تُكيَّف الصفحة الفاتحة إلى داكنة.

تحول الميزة اللون بعكس الإضاءة مع الحفاظ على الصبغة. وتهدف إلى تباين نص كافٍ كما تعرّفه نسبة تباين WCAG 4.5:1. تُحول تدرجات CSS الفاتحة، وتتخذ Safari أحكاماً كي تبقى الأزرار والنص فوق الصور والقوائم التي تظهر عند تمرير المؤشر قابلة للاستخدام. تُترك معظم الصور دون تغيير، لكن قد تُحول ألوان صور SVG عند الحاجة، وقد تُعكس شعارات bitmap البسيطة بالأبيض والأسود بعد تحليل histogram. يمكن إيقاف تأثيرات مثل الأقنعة وmix-blend-mode في بعض الحالات، بينما يُترك محتوى canvas دون تغيير.

نصائح للمواقع

تقول WebKit إن الصفحات تعمل عموماً بشكل جيد إذا اتبعت ممارسات تطوير الويب الحديثة. تشمل التحديثات المقترحة استبدال شعارات bitmap والأيقونات بـ SVG، واستخدام ألوان CSS صلبة أو متدرجة بدلاً من صور الخلفية المبلّطة، واستبدال image sprites بـ CSS الحديث، وإنشاء صور المحتوى بخلفيات شفافة. إضافة padding إلى الحاويات يمكن أن تمنع الازدحام. لتجربة داكنة محددة على جزء من صفحة، يمكن للمطورين تطبيق color-scheme: light dark على عنصر وإضافة أنماطهم الداكنة الخاصة.

للتحكم الكامل، يمكن للمواقع إعلان دعم كامل للوضع الداكن باستخدام تقنيات الويب المتاحة على نطاق واسع، بما في ذلك وسم meta color-scheme، و:root { color-scheme: light dark }، واستعلامات media prefers-color-scheme، وعناصر picture source، وlight-dark(). توفر دوال CSS الأحدث مثل color-mix() وcontrast-color()، إضافة إلى تقنيات متغيرات CSS، خيارات أكثر. تنصح WebKit بإعلان الدعم في HTML أو CSS بدلاً من حقنه لاحقاً باستخدام JavaScript.

يمكن للمواقع التي يجب أن تبقى فاتحة فقط استخدام color-scheme: light only، إما عبر وسم meta في HTML أو CSS. الكلمة المفتاحية only غير مدعومة في Safari 27.3 beta 1. تنصح WebKit بالتحقق لاحقاً مع تطور الميزة خلال عملية beta.

الخصوصية والتعليقات

تقول WebKit إن Safari يمنع المواقع من اكتشاف وقت تطبيق Adaptive Dark Mode، لأن اكتشافه سيضيف معلومات قابلة للبصمة (fingerprintable). JavaScript الذي يستعلم عن ألوان CSS يتلقى الألوان الأصلية المكتوبة، وتُعرض الصور المرسومة في canvas في شكلها الأصلي. يمكن للمطورين الذين لديهم أسئلة التواصل عبر [email protected]، ويمكن للمستخدمين الذين يجدون موقعاً لا يعمل بشكل جيد إرسال تقرير عبر Feedback Assistant.

المصادر: webkit.org