המסמך הזה הוא חלק ממדריך הצבעים של CSS באיכות HD.
יש שתי אסטרטגיות עיקריות לעדכון הצבע של פרויקט האינטרנט כדי לתמוך תצוגות עם טווח רחב:
הפחתה חיננית: השתמש במרחבי הצבעים החדשים ואפשר לדפדפן מערכת ההפעלה קובעת איזה צבע להציג בהתאם ליכולות התצוגה.
שיפור הדרגתי: באמצעות
@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 */
}
יש שתי שאילתות מדיה נוספות לבדיקת התמיכה:
בדיקה מ-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
על דוגמית צבע מרובעת
חלונית סגנונות לביצוע ההמרה הזו. כלי הצבע החדשים לא רק מסתובבים
בהמרות, הם מניבים תיבת דו-שיח שבה מחברים יכולים לראות ולבחור
את ההמרה שהם רוצים.
בזמן ההמרה, חשוב לדעת אם ההמרה נחתכה כדי להתאים המרחב המשותף. בכלי הפיתוח מופיע עכשיו סמל אזהרה לצבע שהומר לצבע המתריע, כדי ליידע אותך לחיתוך הזה.
![צילום מסך של חיתוך סולם כלי הפיתוח, עם סמל אזהרה ליד הצבע.](https://developer.chrome.com/static/docs/css-ui/migrate-hd-color/image/devtools-informing.png?authuser=4&hl=he)
מידע נוסף על התכונה לניפוי באגים בשירות CSS זמין בכלי הפיתוח.
השלבים הבאים
יותר חיוניות, מניפולציות ואינטרפולציות עקביות באופן כללי, ומשיגים חוויה צבעונית יותר למשתמשים.
מידע נוסף על משאבי צבעים מהמדריך.