עיצוב ברירת מחדל משופר של מצב כהה עם מאפיין 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) ולהשוות אותו לזה של 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 Color Module Level 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. לדוגמה, הצבע הקנייני של WebKit CSS -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) (שחור) ל-rgba(255, 255, 255, 0.847) (בלבן), כי סוכן המשתמש מעדכן את ButtonFace באופן דינמי על סמך ערכת הצבעים. אותו עיקרון חל על color של הרכיב <button> שמוגדר לצבע המערכת המתאים ButtonText.

הדגמה (דמו)

אפשר לראות את ההשפעות של color-scheme על מספר גדול של רכיבי HTML בהדגמה ב-Glitch. בהדגמה מכוון מוצגת ההפרה של WCAG AA ושל WCAG AAA עם צבעי הקישורים שצוינו באזהרה שלמעלה.

אישורים

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