تتيح سمة color-scheme في CSS والعلامة الوصفية المقابلة
للمطوّرين إمكانية تفعيل الإعدادات التلقائية الخاصة بالمظهر في ورقة أنماط وكيل المستخدم.
الخلفية
ميزة الوسائط المفضّلة للمستخدم prefers-color-scheme
إنّ ميزة الوسائط المفضّلة للمستخدم على prefers-color-scheme
تمنح المطوّرين إمكانية التحكّم الكامل في أشكال ظهور صفحاتهم.
إذا لم تكن معتادًا على ذلك، يُرجى قراءة مقالتي
prefers-color-scheme: مرحبًا بك يا صديقي القديم،
حيث وثّقت كل ما أعرفه عن إنشاء تجارب مذهلة في الوضع الداكن.
أحد أجزاء الألغاز التي تم ذكرها بإيجاز في المقالة هو سمة CSS color-scheme والعلامة الوصفية المقابلة للاسم نفسه.
وكلاهما يسهّل حياتك كمطوّر من خلال السماح لك بتفعيل الإعدادات التلقائية الخاصة بالمظهر في ورقة أنماط وكيل المستخدم،
مثل عناصر التحكم في النموذج وأشرطة التمرير وألوان نظام CSS.
وفي الوقت نفسه، تمنع هذه الميزة المتصفّحات من تطبيق أي عمليات تحويل من تلقاء نفسها.
المتصفحات المتوافقة
prefers-color-scheme
color-scheme
ورقة أنماط وكيل المستخدم
قبل المتابعة، دعوني أصف بإيجاز ماهية ورقة أنماط وكيل المستخدم. في معظم الأحيان، يمكنك اعتبار كلمة وكيل مستخدم (UA) باعتبارها طريقة فاخرة لقول متصفّح. تحدّد ورقة أنماط Universal Analytics الشكل والأسلوب التلقائيَين للصفحة. كما يشير الاسم، تعتمد ورقة أنماط UA على Universal Analytics المعني. ويمكنك إلقاء نظرة على ورقة أنماط UA في Chrome (ومتصفّح Chromium) ومقارنتها بأنماط Firefox أو Safari (وWebKit). عادةً ما تتفق أوراق أنماط Universal Analytics على معظم الأشياء. على سبيل المثال، تجعل الروابط جميعها باللون الأزرق والنص العام باللون الأسود ولون الخلفية باللون الأبيض، ولكن هناك أيضًا اختلافات مهمة (ومزعجة في بعض الأحيان)، على سبيل المثال، كيفية تنسيق عناصر التحكم في النموذج.
يمكنك إلقاء نظرة عن كثب على
ورقة أنماط UA في WebKit
وما تفعله في ما يتعلق بالوضع الداكن.
(ابحث في النص الكامل عن "داكن" في ورقة الأنماط).
ويتغيّر الإعداد التلقائي الذي توفّره ورقة الأنماط بناءً على ما إذا كان الوضع الداكن مفعَّلاً أو غير مفعّل.
لتوضيح ذلك، إليك إحدى قواعد 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
تقدّم مواصفات المستوى 1 من وحدة تعديل ألوان CSS المستوى 1 نموذجًا وعناصر تحكّم في التعديل التلقائي للألوان بواسطة وكيل المستخدم بهدف معالجة الإعدادات المفضّلة للمستخدم، مثل الوضع الداكن أو تعديل التباين أو أنظمة الألوان المحدّدة المطلوبة.
وتسمح السمة color-scheme
المحددة فيها للعنصر بالإشارة إلى
أنظمة الألوان التي يناسب عرضها.
ويتم التفاوض على هذه القيم وفقًا لتفضيلات المستخدم، ما ينتج عنه اختيار نظام ألوان يؤثر في عناصر واجهة المستخدم مثل الألوان الافتراضية لعناصر التحكم في النموذج وأشرطة التمرير، بالإضافة إلى القيم المستخدمة لألوان نظام 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
يتطلب مراعاة سمة color-scheme في CSS تنزيل 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 WebKit الخاص بـ CSS، والذي يستخدمه WebKit وChrome للرابط الأزرق الكلاسيكي rgb(0,0,238)، به نسبة تباين غير كافية تبلغ 2.23:1 على خلفية سوداء ويخفق لكل من WCAG AA وكذلك متطلبات WCAG AAA.
لقد فتحتُ أخطاءً في Chrome وWebKit وFirefox بالإضافة إلى مشكلة وصفية في HTML Standard لإصلاح هذه المشكلة.
التفاعل مع "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.
background-color للعنصر <fieldset> هي gainsboro
حسب ورقة أنماط المطوّرين المضمَّنة.
background-color للعنصر <fieldset> هي darkslategray
حسب ورقة أنماط المطوّرين المضمَّنة.
يتم التحكّم في مظهر العنصر <button> من خلال ورقة أنماط وكيل المستخدم.
تم ضبط color على لون نظام
ButtonText،
وضبط background-color وborder-color الأربعة على لون النظام
ButtonFace.
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.
border-top-color
وborder-bottom-color والتي تم ضبطهما على ButtonFace
في ورقة أنماط وكيل المستخدم الآن rgba(0, 0, 0, 0.847).
border-top-color
وborder-bottom-color والتي تم ضبطها على ButtonFace
في ورقة أنماط وكيل المستخدم الآن rgba(255, 255, 255, 0.847).
تجريبي
يمكنك الاطّلاع على تأثيرات علامة color-scheme عند تطبيقها على عدد كبير من عناصر HTML
في عرض توضيحي لميزة Glitch.
يُظهر العرض التوضيحي عمدًا
انتهاك WCAG AA وWCAG AAA من خلال ألوان الروابط المذكورة في التحذير أعلاه.
color-scheme: light.
color-scheme: dark.
لاحظ
انتهاك WCAG AA وWCAG AAA
مع ألوان الروابط.
شكر وتقدير
تم تنفيذ سمة CSS color-scheme والعلامة الوصفية المقابلة لها من خلال Rune Lillesveen.
Rune أيضًا محرر مشارك لمواصفات وحدة تعديل ألوان CSS - المستوى 1.
صورة رئيسية من تصوير فيليب ليون على موقع Unسبلاش