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

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

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

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 שאילתת מדיה:

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

המרת צבעים

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

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

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

השלבים הבאים

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

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