מעבר לצבע CSS באיכות HD

המסמך הזה הוא חלק ממדריך הצבעים של CSS ברזולוציה גבוהה.

Adam Argyle

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

1. שיפור הדרגתי: משתמשים במרחבי הצבעים החדשים ומאפשרים לדפדפן ולמערכת ההפעלה לקבוע איזה צבע להציג על סמך יכולות התצוגה.

2. שיפור הדרגתי: משתמשים ב-@supports וב-@media כדי להעריך את היכולות של הדפדפן של המשתמש, ואם התנאים מתקיימים, מספקים צבעים בטווח רחב.

אם דפדפן לא מבין את הצבע display-p3:

color: red;
color: color(display-p3 1 0 0);

אם הדפדפן מבין את הצבע display-p3:

color: red;
color: color(display-p3 1 0 0);

יש יתרונות וחסרונות לכל אחת מהן. הנה רשימה קצרה של יתרונות וחסרונות:

הידרדרות הדרגתית

• יתרונות
  • המסלול הפשוט ביותר.
  • הדפדפן ממפה את מגוון הצבעים או מלחץ אותו ל-sRGB אם מדובר בצג עם מגוון צבעים מצומצם, ולכן האחריות היא על הדפדפן.
• חסרונות
  • יכול להיות שהדפדפן יבצע צמצום של לוח הצבעים או מיפוי של לוח הצבעים לצבע שאתם לא אוהבים.
  • ייתכן שהדפדפן לא יבין את בקשת הצבע וייכשל לגמרי. עם זאת, אפשר לצמצם את האפשרות הזו על ידי ציון הצבע פעמיים, כך שאפשר יהיה להחזיר את הרצף לצבע הקודם שהוא כן מבין.

שיפור הדרגתי

• יתרונות
  • יותר שליטה באמצעות ניהול של איכות הצבע.
  • שיטת צבע נוספת שלא משפיעה על הצבעים הנוכחיים.
• חסרונות
  • צריך לנהל שני תחבירים נפרדים של צבעים.
  • צריך לנהל שני טווחי צבעים נפרדים.

בדיקת התמיכה בגוונים ובמרחב צבע

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

שאילתות לגבי תמיכה בגווני צבע

דוגמאות הקוד הבאות בודקות את טווח הצבעים של המשתמש שמבקר באתר בתצוגה שלו.

בדיקה מ-CSS

הבקשה הכי פחות ספציפית לתמיכה היא שאילתת המדיה dynamic-range:

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

אפשר לבדוק את רמת התמיכה המשוערת או הגבוהה יותר באמצעות שאילתת המדיה color-gamut:

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

יש עוד שתי שאילתות מדיה לבדיקה של תמיכה:

1. @media (color)
2. @media (color-index)

בדיקה מ-JavaScript

ב-JavaScript, אפשר לקרוא לפונקציה window.matchMedia() ולהעביר לה שאילתה של מדיה לצורך הערכה.

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

אפשר להעתיק את התבנית שלמעלה לשאר שאילתות המדיה.

שאילתות לתמיכה במרחב צבעים

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

בדיקה מ-CSS

אפשר לבדוק אם יש תמיכה במרחב צבעים ספציפי באמצעות השאילתה @supports:

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

בדיקה מ-JavaScript

ב-JavaScript, אפשר לקרוא לפונקציה CSS.supports() ולהעביר צמד של מאפיין וערך כדי לבדוק אם הדפדפן מבין.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

שילוב של בדיקות החומרה והניתוח

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

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

ניפוי באגים של צבעים באמצעות כלי הפיתוח ל-Chrome

כלי הפיתוח ל-Chrome עודכנו ויש בהם כלים חדשים שעוזרים למפתחים ליצור, להמיר ולנפות באגים בצבע HD.

בוחר צבעים מעודכן

בורר הצבעים תומך עכשיו בכל מרחבי הצבעים החדשים. מאפשרים לכותבים לבצע פעולות בערכי הערוץ בדיוק כמו שהם היו מבצעים אותן.

גבולות גאמוט

הוספנו גם קו גבול של מגוון צבעים, שמפריד בין מגוון הצבעים של srgb לבין מגוון הצבעים של display-p3. להבהיר באיזה טווח צבע נמצא הצבע שנבחר.

התכונה הזו עוזרת למחברים להבחין באופן חזותי בין צבעים באיכות HD לבין צבעים שאינם HD. התכונה הזו שימושית במיוחד בעבודה עם הפונקציה color() ומרחבי הצבעים החדשים, כי אפשר ליצור בהם צבעים שהם לא HD וגם צבעים באיכות HD. כדי לבדוק באיזה סולם צבעים נמצא הצבע, פותחים את חלון הבחירה של הצבעים ורואים.

המרת צבעים

כבר שנים ש-DevTools יכול להמיר צבעים בין פורמטים נתמכים כמו hsl,‏ hwb, ‏ rgb ו-hex. shift + click על ריבוע צבע בחלונית הסגנונות כדי לבצע את ההמרה הזו. כלי הצבעים החדשים לא רק מאפשרים לעבור בין ההמרות, אלא גם פותחים תיבת דו-שיח שבה המחברים יכולים לראות את ההמרות ולבחור את ההמרה הרצויה.

כשממירים, חשוב לדעת אם ההמרה נחתכה כדי להתאים למרחב. בכלי הפיתוח יש עכשיו סמל אזהרה לצבע שעבר המרה, כדי להודיע לכם על החיתוך הזה.

מידע נוסף על התכונה של ניפוי באגים ב-CSS ב-DevTools

השלבים הבאים

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

במדריך מפורט מידע נוסף על משאבי צבעים.