מאפיין ה-CSS color-scheme
והמטא תג התואם מאפשרים למפתחים להגדיר את הדפים שלהם כך שישתמשו בברירת המחדל הספציפית לנושא של גיליון הסגנונות של סוכן המשתמש.
רקע
התכונה prefers-color-scheme
של העדפות מדיה של משתמשים
התכונה 'מדיה בהתאם להעדפות המשתמש' ב-prefers-color-scheme
מעניקה למפתחים שליטה מלאה במראה של הדפים שלהם.
אם אתם לא מכירים את המצב הזה, מומלץ לקרוא את המאמר שלי prefers-color-scheme
: שלום חשכה, ידידה ותיקה, שבו תועדתי את כל מה שאני יודע על יצירת חוויות מדהימות במצב כהה.
חלק מהפאזל שצוין רק בקצרה במאמר הוא מאפיין ה-CSS color-scheme
והמטא תג התואם בעל אותו שם.
שתי התכונות האלה עוזרות לכם כמפתחים, כי הן מאפשרות לכם להגדיר לדף ברירת מחדל ספציפית לנושא של גיליון הסגנונות של סוכן המשתמש, כמו למשל פקדי טפסים, סרגל גלילה וצבעים של מערכת CSS.
במקביל, התכונה הזו מונעת מדפדפנים להחיל טרנספורמציות בעצמם.
תמיכה בדפדפנים
prefers-color-scheme
color-scheme
גיליון הסגנונות של סוכן המשתמש
לפני שאמשיך, אסביר בקצרה מהו גיליון סגנונות של סוכן משתמש. ברוב המקרים, אפשר להתייחס למילה סוכן משתמש (UA) כדרך מהודרת לומר דפדפן. גיליון הסגנונות של UA קובע את המראה והתחושה של דף כברירת מחדל. כפי שרואים מהשם, גיליון סגנונות של UA הוא משהו שתלויות בו נתוני UA הרלוונטיים. אפשר לעיין בסגנון הגיליון של UA ב-Chrome (וב-Chromium) ולהשוות אותו לסגנון הגיליון של UA ב-Firefox או ב-Safari (וב-WebKit). בדרך כלל, רוב הדברים זהים בין גיליונות הסגנון של UA. לדוגמה, כולם משתמשים בכחול לקישורים, בשחור לטקסט כללי ובלבן לצבע הרקע, אבל יש גם הבדלים חשובים (ולפעמים מעצבנים), למשל, האופן שבו הם מעצבים את אמצעי הבקרה בטופס.
כדאי לעיין לעומק בגיליון סגנונות UA של WebKit ובפעולות שהוא מבצע בנוגע למצב כהה.
(מבצעים חיפוש טקסט מלא של 'כהה' בגיליון הסגנונות).
ברירת המחדל שסיפק קובץ גיליון הסגנונות משתנה בהתאם למצב של מצב האפל. כדי להמחיש זאת, הנה כלל CSS אחד כזה שמשתמש בפסאודו-כיתה :matches
ובמשתנים פנימיים של WebKit כמו -apple-system-control-background
, וגם בהוראת מעבד התכנות (preprocessor) הפנימי של 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 יש צבעים סמנטיים סטנדרטיים למערכת.
הם מפורטים במודול הצבעים של CSS ברמה 4.
לדוגמה, התג Canvas
(לא להתבלבל עם התג <canvas>
) מיועד לרקע של תוכן האפליקציה או המסמכים, ואילו התג CanvasText
מיועד לטקסט בתוכן האפליקציה או במסמכים.
השניים הולכים יחד ואין להשתמש בהם בנפרד.
סגנונות העיצוב של UA יכולים להשתמש בצבעים הקנייניים שלהם או בצבעים הסטנדרטיים של המערכת הסמנטית, כדי לקבוע איך רכיבי HTML ייראו כברירת מחדל.
אם מערכת ההפעלה מוגדרת למצב כהה או משתמשת בעיצוב כהה, הערך של CanvasText
(או text
) יוגדר באופן מותנה ללבן, והערך של Canvas
(או -apple-system-control-background
) יוגדר לשחור.
לאחר מכן, גיליון הסגנונות של UA מקצה את ה-CSS הבא רק פעם אחת, והוא מכסה גם את המצב הבהיר וגם את המצב הכהה.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
מאפיין ה-CSS color-scheme
במפרט של 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
.
לדוגמה, לצבע ה-CSS הקנייני של WebKit -webkit-link
, ש-WebKit ו-Chrome משתמשים בו כצבע הכחול הקלאסי של קישורים rgb(0,0,238)
, יש יחס ניגודיות של 2.23:1 בלבד על רקע שחור, והוא לא עומד גם בדרישות של WCAG AA וגם בדרישות של WCAG AAA.
דיווחתי על באגים ב-Chrome, ב-WebKit וב-Firefox, וגם על בעיה ברמת המטא בתקן HTML כדי שהבעיה תטופל.
אינטראקציה עם prefers-color-scheme
האינטראקציה בין מאפיין ה-CSS color-scheme
לבין המטא תג התואם לבין תכונת המדיה 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)
(שחורish) ל-rgba(255, 255, 255, 0.847)
(לבןish), כי סוכן המשתמש מעדכן את ButtonFace
באופן דינמי על סמך ערכת הצבעים.
אותו הדבר חל על color
של רכיב <button>
, שמוגדר לצבע המערכת התואם ButtonText
.
הדגמה (דמו)
אפשר לראות את ההשפעות של color-scheme
כשהיא חלה על מספר גדול של רכיבי HTML בדמו ב-Glitch.
בהדגמה מוצגת בכוונה הפרה של WCAG AA ו-WCAG AAA עם צבעי הקישורים שצוינו באזהרה שלמעלה.
תודות
מאפיין ה-CSS color-scheme
והמטא תג התואם יושמו על ידי Rune Lillesveen.
רוני הוא גם אחד מהעורכים של המפרט של מודול התאמת הצבעים של CSS ברמה 1.
תמונה ראשית (Hero) של Philippe Leone ב-Unsplash.