עיצוב ברירת מחדל משופר של מצב כהה עם מאפיין CSS של ערכת צבעים והמטא תג התואם

מאפיין ה-CSS color-scheme והמטא תג התואם מאפשרים למפתחים להגדיר את הדפים שלהם כך שישתמשו בברירת המחדל הספציפית לנושא של גיליון הסגנונות של סוכן המשתמש.

Thomas Steiner

רקע

התכונה prefers-color-scheme של העדפות מדיה של משתמשים

התכונה 'מדיה בהתאם להעדפות המשתמש' ב-prefers-color-scheme מעניקה למפתחים שליטה מלאה במראה של הדפים שלהם. אם אתם לא מכירים את המצב הזה, מומלץ לקרוא את המאמר שלי prefers-color-scheme: שלום חשכה, ידידה ותיקה, שבו תיעדתי את כל מה שאני יודע על יצירת חוויות מדהימות במצב כהה.

חלק מהפאזל שצוין רק בקצרה במאמר הוא מאפיין ה-CSS‏ color-scheme והמטא תג התואם בעל אותו שם. שתי התכונות האלה עוזרות לכם כמפתחים, כי הן מאפשרות לכם להגדיר לדף ברירת מחדל ספציפית לנושא של גיליון הסגנונות של סוכן המשתמש, כמו למשל פקדי טפסים, סרגל גלילה וצבעים של מערכת CSS. במקביל, התכונה הזו מונעת מדפדפנים להחיל טרנספורמציות בעצמם.

תמיכה בדפדפנים

prefers-color-scheme

תמיכה בדפדפנים

• 76
• 79
• 67
• 12.1

מקור

color-scheme

תמיכה בדפדפנים

• 81
• 81
• 96
• 13

מקור

גיליון הסגנונות של סוכן המשתמש

לפני שאמשיך, אסביר בקצרה מהו גיליון סגנונות של סוכן משתמש. ברוב המקרים, אפשר להתייחס למילה סוכן משתמש (UA) כדרך אופנתית לומר דפדפן. גיליון הסגנונות של UA קובע את המראה והתחושה של דף כברירת מחדל. כפי שרואים מהשם, גיליון סגנונות של UA הוא משהו שתלויות בו נתוני UA הרלוונטיים. אפשר לעיין בסגנון הגיליון של UA ב-Chrome (וב-Chromium) ולהשוות אותו לסגנון הגיליון של UA ב-Firefox או ב-Safari (וב-WebKit). בדרך כלל, רוב הדברים זהים בין גיליונות הסגנון של UA. לדוגמה, כולם משתמשים בכחול לקישורים, בשחור לטקסט כללי ובלבן לצבע הרקע, אבל יש גם הבדלים חשובים (ולפעמים מעצבנים), למשל, האופן שבו הם מעצבים את אמצעי הבקרה בטופס.

כדאי לעיין בגיליון סגנונות 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 יש צבעים סמנטיים סטנדרטיים למערכת. הם מפורטים במודול הצבעים של 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 מייצג את ההפך, עם צבעי רקע כהים וצבעי חזית בהירים.

בכל הרכיבים, העיבוד באמצעות ערכת צבעים אמור לגרום לצבעים שבהם נעשה שימוש בכל ממשק המשתמש של הדפדפן עבור הרכיב להתאים למטרה של ערכת הצבעים. דוגמאות: סרגל גלילה, קווים תחתונים של בדיקת איות, פקדי טפסים וכו'.

הערה: אפשר להשתמש במאפיין ה-CSS color-scheme גם ברמת :root וגם ברמה בודדת לכל רכיב.

ברכיב :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.

מצב בהיר: סגנונות שצוינו על ידי המפתח וסוכן המשתמש. הטקסט שחור והרקע לבן, בהתאם לגיליון סגנונות של סוכן המשתמש. הערך של 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) (שחורish) ל-rgba(255, 255, 255, 0.847) (לבןish), כי סוכן המשתמש מעדכן את 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 בדמו ב-Glitch. בהדגמה מוצגת בכוונה הפרה של WCAG AA ו-WCAG AAA עם צבעי הקישורים שצוינו באזהרה שלמעלה.

האפשרות demo עברה למצב color-scheme: light.

האפשרות demo עברה למצב color-scheme: dark. שימו לב ל הפרה של WCAG AA ו-WCAG AAA בצבעים של הקישורים.

תודות

מאפיין ה-CSS color-scheme והמטא תג התואם הוטמעו על ידי Rune Lillesveen. רוני הוא גם אחד מהעורכים של המפרט של מודול התאמת הצבעים של CSS ברמה 1. תמונה ראשית (Hero) של Philippe Leone ב-Unsplash.