מאפיין ה-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 ולבדוק מה הוא עושה בנוגע למצב כהה.
(מחפשים טקסט מלא את המילה '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 יש צבעים סמנטיים סטנדרטיים למערכת.
הם מפורטים במודול הצבעים של CSS ברמה 4.
לדוגמה, התג Canvas
(לא להתבלבל עם התג <canvas>
) מיועד לרקע של תוכן האפליקציה או המסמכים, ואילו התג CanvasText
מיועד לטקסט בתוכן האפליקציה או במסמכים.
השניים הולכים יחד ואין להשתמש בהם בנפרד.
כדי לקבוע את האופן שבו יש לעבד רכיבי HTML כברירת מחדל, גיליונות סגנון של UA יכולים להשתמש בצבעים הקנייניים שלהם או בצבעים של המערכת הסמנטית הסטנדרטית.
אם מערכת ההפעלה מוגדרת למצב כהה או משתמשת בעיצוב כהה, 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.
Rune הוא גם עורך-שותף של המפרט ברמה 1 של מודול התאמת הצבע של CSS.
תמונה ראשית (Hero) של Philippe Leone ב-Unsplash.