מאפיין ה-CSS color-scheme
והמטא תג התואם מאפשרים למפתחים להגדיר את הדפים שלהם לברירות המחדל הספציפיות לעיצוב של גיליון הסגנונות של סוכן המשתמש.
רקע
תכונת המדיה של העדפת המשתמש עבור prefers-color-scheme
prefers-color-scheme
תכונת המדיה של העדפת המשתמש נותנת למפתחים שליטה מלאה על המראה של הדפים שלהם.
אם לא ידוע לך מהו, כדאי לקרוא את המאמר שלי
prefers-color-scheme
: שלום חושך, חבר ותיק,
שבו תיעדתי את כל מה שידוע לי על יצירת חוויות מדהימות של מצב כהה.
חידה אחת שהוזכרה רק בקצרה במאמר היא המאפיין color-scheme
ב-CSS והמטא תג התואם באותו שם.
שני הכלים האלה מקלים על חייכם כמפתחים בכך שהם מאפשרים לכם להגדיר את הדף לברירות המחדל הספציפיות לעיצוב של גיליון הסגנונות של סוכן המשתמש, כמו פקדי טפסים, סרגלי גלילה וצבעי מערכת CSS.
עם זאת, התכונה הזו מונעת מדפדפנים להחיל טרנספורמציות באופן עצמאי.
תמיכת דפדפן
prefers-color-scheme
color-scheme
גיליון הסגנונות של סוכן המשתמש
לפני שנמשיך, אני רוצה לתאר בקצרה מהו גיליון סגנונות של סוכן משתמש. ברוב המקרים, אפשר לחשוב על המילה user agent (UA) כעל דרך מהודרת לומר browser. גיליון הסגנונות של UA קובע את ברירת המחדל למראה ולסגנון של הדף. כפי שהשם מרמז, גיליון סגנונות של UA הוא תלוי ב-UA הרלוונטי. תוכל לעיין בגיליון הסגנונות של UA ב-Chrome (וב-Chromium) ולהשוות אותו ל-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 יש צבעי מערכת סמנטית סטנדרטיים.
הם מצוינים ברמת מודול צבע 4 של CSS.
לדוגמה,
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-link
של WebKit ול-Chrome, ל-rgb(0,0,238)
בצבע כחול קלאסי, יש יחס ניגודיות לא מספיק של 2.23:1 ברקע שחור ופגיע ב-WCAG AA וגם בדרישות WCAG AAA.
פתחתי באגים ב-Chrome, ב-WebKit וב-Firefox, וכן בעיית מטא ב-HTML Standard כדי לפתור את הבעיה.
אינטראקציה עם 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)
(שחור) ל-rgba(255, 255, 255, 0.847)
(לבן), כי סוכן המשתמש מתעדכן באופן דינמי ButtonFace
על סמך ערכת הצבעים.
הכלל הזה חל גם על color
של האלמנט <button>
, שמוגדר לצבע המערכת התואם ButtonText
.
הדגמה (דמו)
ניתן לראות את ההשפעות של color-scheme
על מספר גדול של רכיבי HTML בהדגמה של תקלה.
ההדגמה מכוונת מציגה את ההפרה של WCAG AA ו-WCAG AAA עם צבעי הקישורים שמוזכרים באזהרה שלמעלה.
אישורים
מאפיין ה-CSS color-scheme
והמטא תג התואם יושמו על ידי Rune Lillesveen.
Rune היא גם עורכת-שותפה של המפרט של מודול התאמת הצבע של CSS ברמה 1.
תמונה ראשית (Hero) מאת פיליפ ליאון ב-UnFlood.