تتيح سمة 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
.
يتم التحكّم في مظهر العنصر <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
والعلامة الوصفية المقابلة لها من خلال Rune Lillesveen.
Rune أيضًا محرر مشارك لمواصفات وحدة تعديل ألوان CSS - المستوى 1.
صورة رئيسية من تصوير فيليب ليون على موقع Unسبلاش