מאפיין ה-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.
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 בהדגמה של תקלה.
ההדגמה מכוונת מציגה את ההפרה של WCAG AA ו-WCAG AAA עם צבעי הקישורים שמוזכרים באזהרה שלמעלה.
color-scheme: light.
color-scheme: dark.
חשוב לשים לב ל-WCAG AA ול-WCAG AAA
להפרה
של צבעי הקישורים.
אישורים
מאפיין ה-CSS color-scheme והמטא תג התואם יושמו על ידי Rune Lillesveen.
Rune היא גם עורכת-שותפה של המפרט של מודול התאמת הצבע של CSS ברמה 1.
תמונה ראשית (Hero) מאת פיליפ ליאון ב-UnFlood.