تسمح سمة CSS color-scheme
والعلامة الوصفية المقابلة لها
للمطوّرين بتفعيل الإعدادات التلقائية الخاصة بالموضوع في ورقة أنماط وكيل المستخدم.
الخلفية
ميزة prefers-color-scheme
"الإعدادات المفضّلة للمستخدم" في الوسائط
تتيح ميزة
prefers-color-scheme
"الوسائط المفضّلة للمستخدم" للمطوّرين التحكّم الكامل في مظهر صفحاتهم.
إذا لم تكن على دراية بهذا الوضع، يُرجى قراءة مقالتي بعنوان
prefers-color-scheme
: مرحبًا يا عتمة، يا صديقي القديم،
حيث سجّلت كل ما أعرفه عن إنشاء تجارب رائعة في الوضع الداكن.
إنّ إحدى قطع اللغز التي لم تتم الإشارة إليها إلا بشكل موجز في المقالة هي
سمة CSS color-scheme
والعلامة الوصفية المقابلة لها التي تحمل الاسم نفسه.
يسهّل كل منهما عملك كمطوّر،
من خلال السماح لك بتفعيل الإعدادات التلقائية الخاصة بالموضوع في جدول تصفّح وكيل المستخدم،
مثل عناصر التحكّم في النماذج وأشرطة التمرير وألوان نظام CSS.
وفي الوقت نفسه، تمنع هذه الميزة المتصفّحات من تطبيق أي عمليات تحويل بمفردها.
دعم المتصفح
prefers-color-scheme
color-scheme
ورقة أنماط وكيل المستخدم
قبل المتابعة، دعني أصف لك بإيجاز ما هي ورقة أنماط وكيل المستخدم. في معظم الأحيان، يمكنك اعتبار كلمة وكيل المستخدم (UA) كطريقة أنيقة للتعبير عن المتصفّح. تحدِّد ملفّ أسلوب التنسيق في Universal Analytics المظهر والأسلوب التلقائيَين للصفحة. كما يوحي الاسم، ملفّ أسلوب Universal Analytics هو ملفّ يعتمد على Universal Analytics المعنيّ. يمكنك الاطّلاع على جدول التنسيق لوحدة معالجة الرسومات (UA) في Chrome (وChromium) ومقارنته بجدول التنسيق في Firefox أو Safari (وWebKit). تتطابق عادةً أوراق أسلوب Universal Analytics في معظم العناصر. على سبيل المثال، تُظهر جميعها الروابط باللون الأزرق والنص العام باللون الأسود ولون الخلفية الأبيض، ولكن هناك أيضًا اختلافات مهمة (ومزعجة أحيانًا)، مثل كيفية تصميم عناصر التحكّم في النماذج.
اطّلِع على ملفّ أسلوب Universal Analytics في WebKit ووظائفه المتعلّقة بالوضع الداكن.
(ابحث عن النص الكامل "dark" في ملف تنسيق الصفحات).
يتغيّر الإعداد التلقائي الذي تقدّمه ملفّات الأنماط استنادًا إلى ما إذا كان الوضع الداكن مفعّلاً أم لا.
لشرح ذلك، إليك إحدى قواعد CSS هذه باستخدام الدرجة السطحية
:matches
والمتغيّرات الداخلية في WebKit مثل -apple-system-control-background
،
بالإضافة إلى توجيه المعالج المتقدّم الداخلي في WebKit #if defined
:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
ستلاحظ بعض القيم غير العادية للسمتَين color
وbackground-color
أعلاه.
لا يُعدّ text
أو -apple-system-control-background
لونَين صالحَين في CSS.
وهي ألوان دلالية داخلية في WebKit.
تبيّن أنّ CSS تتضمّن ألوانًا معيارية للنظام الدلالي.
ويتم تحديدها في
مستوى 4 من وحدة ألوان CSS.
على سبيل المثال، علامة
Canvas
(يجب عدم الخلط بينها وبين علامة <canvas>
)
هي لخلفية محتوى التطبيق أو المستندات،
في حين أنّ علامة
CanvasText
هي للنص في محتوى التطبيق أو المستندات.
يرتبط الاثنان ببعضهما ولا يجب استخدامهما بشكل منفصل.
يمكن أن تستخدِم أوراق أنماط Universal Analytics إما الألوان الخاصة بها أو ألوان نظام الدلالات المُعَدَّلة،
لتحديد كيفية عرض عناصر HTML تلقائيًا.
إذا تم ضبط نظام التشغيل على الوضع الداكن أو كان يستخدم مظهرًا داكنًا،
سيتم ضبط CanvasText
(أو text
) بشكل مشروط على اللون الأبيض،
وسيتم ضبط Canvas
(أو -apple-system-control-background
) على اللون الأسود.
بعد ذلك، تحدّد ملفّات أسلوب Universal Analytics ملفّ CSS التالي مرّة واحدة فقط، وتغطّي كلّ من الوضع الفاتح والوضع الداكن.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
خاصية color-scheme
في CSS
تقدّم مواصفة CSS Color Adjustment Module Level 1 نموذجًا وعناصر تحكّم في تعديل الألوان التلقائي من خلال وكيل المستخدم بهدف معالجة الإعدادات المفضّلة للمستخدم، مثل الوضع الداكن أو تعديل التباين أو أنظمة الألوان المطلوبة.
تسمح السمة color-scheme
المحدّدة فيها للعنصر بالإشارة إلى
مخططات الألوان التي يمكن عرضها بشكل مريح.
يتمّ التفاوض على هذه القيم مع الإعدادات المفضّلة للمستخدم، ما يؤدّي إلى اختيار مخطّط ألوان
يؤثّر في عناصر واجهة المستخدم (UI)، مثل الألوان التلقائية لأداة التحكّم في النموذج
وأشرطة التمرير، بالإضافة إلى القيم المستخدَمة لألوان نظام CSS.
في ما يلي القيم المسموح بها حاليًا:
normal
يشير إلى أنّ العنصر لا يراعي أنظمة الألوان على الإطلاق، وبالتالي يجب عرض العنصر باستخدام نظام الألوان التلقائي للمتصفّح.[ light | dark ]+
يشير إلى أنّ العنصر على دراية بأنظمة الألوان المدرَجة ويمكنه التعامل معها، ويعبّر عن ترتيب مفضّل بينها.
في هذه القائمة، يمثّل light
نظام ألوان فاتحًا،
بألوان خلفية فاتحة وألوان واجهة داكنة،
في حين يمثّل dark
العكس، بألوان خلفية داكنة وألوان واجهة فاتحة.
بالنسبة إلى جميع العناصر، يجب أن يؤدي التقديم باستخدام نظام ألوان إلى أن تتطابق الألوان المستخدَمة في جميع عناصر واجهة المستخدم المقدَّمة من المتصفّح مع الغرض من نظام الألوان. وتشمل الأمثلة أشرطة التمرير والخطوط السفلية للتدقيق الإملائي وعناصر التحكّم في النماذج وما إلى ذلك.
في عنصر :root
، يجب أن يؤثّر التقديم باستخدام مخطّط ألوان
أيضًا في لون سطح لوحة الرسم (أي لون الخلفية الشاملة)،
والقيمة الأولية للسمة color
والقيم المستخدَمة لألوان النظام،
ويجب أن يؤثّر أيضًا في أشرطة التمرير لمساحة العرض.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
العلامة الوصفية color-scheme
إنّ الالتزام بسمة CSS color-scheme
يتطلّب تنزيل CSS أولاً
(إذا تمت الإشارة إليها من خلال <link rel="stylesheet">
) وتحليلها.
لمساعدة وكلاء المستخدمين في عرض خلفية الصفحة باستخدام مخطط الألوان المطلوب على الفور،
يمكن أيضًا تقديم قيمة color-scheme
في عنصر
<meta name="color-scheme">
.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
دمج color-scheme
وprefers-color-scheme
بما أنّ كلّ من العلامة الوصفية وخاصيّة CSS (في حال تطبيقها على العنصر :root
) يؤديان في النهاية إلى السلوك نفسه، أنصح دائمًا بتحديد مخطّط الألوان
من خلال العلامة الوصفية، حتى يتمكّن المتصفّح من استخدام المخطّط المفضّل بشكل أسرع.
في حين أنّه لا يلزم استخدام قواعد CSS إضافية للصفحات الأساسية المطلقة،
يجب في الحالة العامة دائمًا دمج color-scheme
مع prefers-color-scheme
.
على سبيل المثال، لون -webkit-link
الخاص بتنسيق CSS في WebKit، والذي يستخدمه WebKit وChrome
لللون الأزرق الكلاسيكي للرابط rgb(0,0,238)
،
يملك نسبة تباين غير كافية تبلغ 2.23:1 على خلفية سوداء، ولا يستوفي
متطلبات كل من إرشادات إتاحة المحتوى على الويب (WCAG) من الفئة AA والفئة AAA.
لقد أبلغت عن أخطاء في Chrome و WebKit و Firefox بالإضافة إلى مشكلة meta في معيار HTML لحلّ هذه المشكلة.
التفاعل مع prefers-color-scheme
قد يبدو التفاعل بين color-scheme
سمة CSS والعلامة الوصفية المقابلة
مع prefers-color-scheme
ميزة "إعدادات المستخدِم المفضّلة" في الوسائط مربكًا في البداية.
في الواقع، يلعبون معًا بشكل جيد جدًا.
من المهم معرفة أنّ color-scheme
يحدّد المظهر التلقائي حصريًا،
بينما يحدّد prefers-color-scheme
المظهر القابل للتنسيق.
لتوضيح ذلك، نفترض أنّ الصفحة التالية:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
يضبط رمز CSS المضمّن في الصفحةbackground-color
عنصر <fieldset>
على gainsboro
بشكل عام،
وعلى darkslategray
إذا كان المستخدم يفضّل مخطّط ألوان dark
وفقًا لميزة prefers-color-scheme
لوسائط إعدادات المستخدم المفضّلة.
من خلال العنصر <meta name="color-scheme" content="dark light">
،
تُعلم الصفحة المتصفّح بأنّها تتيح المظهر الداكن والمظهر الفاتح،
مع تفضيل المظهر الداكن.
بناءً على ما إذا كان نظام التشغيل مضبوطًا على الوضع الداكن أو الفاتح، تظهر الصفحة بأكملها بلون فاتح على خلفية داكنة أو العكس، استنادًا إلى ملف أسلوب وكيل المستخدم. لا يتم استخدام أوراق بيانات CSS إضافية يوفّرها المطوّر لتغيير نص الفقرة أو لون خلفية الصفحة.
لاحظ كيف يتغيّر background-color
عنصر <fieldset>
استنادًا إلى ما إذا كان الوضع الداكن مفعّلاً، وذلك باتّباع القواعد
في جدول الأنماط المضمّن الذي يوفّره المطوّر على الصفحة.
إما gainsboro
أو darkslategray
.
يتم التحكّم في مظهر العنصر <button>
من خلال جدول التنسيق الخاص بوكيل المستخدم.
تم ضبط color
على
ButtonText
لون النظام، وتم ضبط background-color
وborder-color
الأربعة على لون النظام
ButtonFace
.
لاحظ الآن كيف يتغيّر border-color
عنصر <button>
.
تتغيّر القيمة المحسوبة لكل من border-top-color
وborder-bottom-color
من rgba(0, 0, 0, 0.847)
(أسود) إلى rgba(255, 255, 255, 0.847)
(أبيض)،
لأنّ وكيل المستخدم يعدّل ButtonFace
ديناميكيًا استنادًا إلى نظام الألوان.
وينطبق الأمر نفسه على color
عنصر <button>
الذي تم ضبطه على لون النظام ButtonText
المقابل.
عرض توضيحي
يمكنك الاطّلاع على تأثيرات color-scheme
المطبَّقة على عدد كبير من عناصر HTML
في العرض التجريبي على Glitch.
يعرض الإصدار التجريبي عمدًاانتهاك
إرشادات WCAG AA وWCAG AAA باستخدام ألوان الروابط المذكورة في التحذير أعلاه.
الشكر والتقدير
نفَّذ
روني ليلسفين خاصيّة CSS color-scheme
والعلامة الوصفية المقابلة لها.
"رون" هو أيضًا محرِّر مشارك لمواصفات المستوى 1 من "وحدة تعديل الألوان" في CSS.
الصورة الرئيسية من إنشاء
Philippe Leone
على Unsplash.