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

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

Thomas Steiner

רקע

התכונה 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.