מרחבי צבע חדשים של CSS ופונקציות חדשות בכל המנועים העיקריים

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

Rachel Andrew

שירות CSS תומך עכשיו במרחבי צבעים שמאפשרים לנו לגשת לצבעים מחוץ לסולם sRGB. המשמעות היא שתהיה לך אפשרות לתמוך במסכים (איכות HD) ולהשתמש בצבעים מצגי HD. התמיכה הזו כוללת פונקציות חדשות לשיפור השימוש בצבע באינטרנט.

גישה למרחבי צבעים מ-CSS

כבר יש לנו כמה פונקציות שמאפשרות לגשת לצבעים בתוך סולם sRGB – rgb(), hsl() ו-hwb(). הפונקציה color() נתמכת עכשיו בדפדפנים. זו דרך מנורמלת לגשת לצבעים בכל מרחב צבעי RGB. זה כולל את sRGB, Display P3 ו-Rec2020. אתם יכולים לראות כמה דוגמאות בשירות ה-CSS הבא:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

תמיכה בדפדפן

  • Chrome: 111.
  • קצה: 111.
  • Firefox: 113.
  • Safari: 15.

מקור

יש גם כמה פונקציות נתמכות שמאפשרות גישה למרחבי צבעים שאינם sRGB באמצעות lch(), lab(), oklch() ו-oklab().

תמיכה בדפדפן

  • Chrome: 111.
  • קצה: 111.
  • Firefox: 113.
  • Safari: 15.

מקור

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

הפונקציה color-mix()

בנוסף למרחבי הצבעים החדשים האלה, כל המנועים תומכים עכשיו בפונקציה color-mix(). הפונקציה הזו מאפשרת שילוב של צבע אחד בצבע אחר, בכל מרחב צבעים. ב-CSS הבא, 25% מהכחול מעורבבים ללבן, במרחב הצבעים srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

תמיכה בדפדפן

  • Chrome: 111.
  • קצה: 111.
  • Firefox: 113.
  • Safari: 16.2.

מקור

מידע נוסף על color-mix()

הפונקציות ומרחבי הצבע החדשים האלה מבטיחים להוסיף צבעי HD מלאי חיים באינטרנט. כדי לקבל השראה, אפשר להתחיל ביצירת כמה הדרגה יפהפייה באמצעות מחולל ההדרגתיות של HD ב-gradient.style.