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

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

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

בדיקה משירות ה-CSS

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

תמיכה בדפדפן

• 98
• 98
• 100
• 13.1

מקור

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

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

תמיכה בדפדפן

• 58
• 79
• 110
• 10

מקור

@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() ולהעביר שאילתת מדיה לצורך הערכה.

תמיכה בדפדפן

• 9
• 12
• 6
• 5.1

מקור

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:

תמיכה בדפדפן

• 28
• 12
• 22
• 9

מקור

@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)')

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

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

: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. כדי לבדוק באיזה סולם צבעים, תוכלו לפתוח את בוחר הצבעים ולראות!

המרת צבעים

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

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

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

השלבים הבאים

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

תוכלו לקרוא מידע נוסף על משאבי צבעים במדריך.