דף זה תורגם על ידי Cloud Translation API.

חדש ב-Chrome 111

Adriana Jara

דברים שעליך לדעת:

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

אני אדריאנה ג'ארה. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 111.

הצגת Transitions API.

יצירת מעברים חלקים באינטרנט היא משימה מורכבת. View Transitions API נועד לפשט את היצירה של מעברים מעודכנים על ידי צילום קובץ snapshot של תצוגות (Views) ומתן אפשרות ל-DOM להשתנות ללא חפיפה בין מצבים.

מעברים שנוצרו באמצעות View Transition API. לנסות את אתר הדגמה – נדרש Chrome מגרסה 111 ואילך.

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

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

כשמתבצעת קריאה ל-.startViewTransition(), ה-API מתעד את המצב הנוכחי של הדף.

בסיום התהליך, תתבצע קריאה של callback שהועבר אל .startViewTransition(). כאן ה-DOM משתנה. לאחר מכן, ה-API מתעד את המצב החדש של הדף.

חשוב לציין שה-API הושק לאפליקציות מסוג Single-Page (SPA), אבל אנחנו מטמיעים גם תמיכה במודלים אחרים.

יש הרבה פרטים לגבי ממשק ה-API הזה. מידע נוסף זמין במאמר שלנו שכולל דוגמאות ופרטים, או במסמכי העזרה של View Transitions ב-MDN.

רמה 4 של צבע ב-CSS.

עם רמת צבע 4 של CSS, שירות CSS תומך עכשיו במסכים באיכות גבוהה, לציון צבעים מסולמות HD, וגם מרחבי צבעים עם תחומי התמחות.

בקיצור, המשמעות היא 50% יותר צבעים לבחירה! חשבתם ש-16 מיליון צבעים זה הרבה. גם אני חשבתי כך.

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

ההטמעה כוללת את הפונקציה color(). אפשר להשתמש בה בכל מרחב צבעים שמציין צבעים בערוצי R,‏ G ו-B. הפרמטר color() לוקח קודם פרמטר של מרחב צבעים, ואז סדרת ערכי ערוץ עבור RGB, ואם רוצים, גם כמה אלפא.

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

.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);
}

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

כלי פיתוח חדשים לצבעים.

ל-Devtools יש תכונות חדשות שתומכות במפרט של צבע ברמה 4 ב-CSS.

החלון Styles תומך עכשיו ב-12 מרחבי הצבעים החדשים וב-7 טווחי הצבעים החדשים שמפורטים במפרט. ריכזנו כאן דוגמאות להגדרות צבעים ב-CSS עם color(), ‏ lch(), ‏ oklab() ו-color-mix().

דוגמאות להגדרות צבעים ב-CSS.

כשמשתמשים ב-color-mix(), שמאפשרת לערבב אחוז מסוים של צבע אחד בצבע אחר, אפשר לראות את פלט הצבע הסופי בחלונית Computed התוצאה של פונקציית color-mix בחלונית Computed.

בנוסף, בורר הצבעים תומך בכל מרחבי הצבעים החדשים עם תכונות נוספות. לדוגמה, לוחצים על דוגמית הצבע של color(display-p3 1 0 1). נוסף גם קו גבולות של מכלול הצבעים. קו זה מבדיל בין סולמות sRGB ו-Display-p3 כדי להבין טוב יותר את סולם הצבעים שבחרתם. קו הפרדה של מגוון צבעים.

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

המרת צבעים בין פורמטים של צבעים.

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

ועוד.

כמובן שיש עוד הרבה.

ב-CSS נוספו פונקציות טריגונומטריות, יחידות גופן נוספות ברמה הבסיסית (root) והרחבה של הסלקטורים הפסאודו מסוג 'הצאצא ה-n'.
Document Picture in Picture API נמצא בגרסת המקור לניסיון
הפעולות previousslide ו-nextslide הן עכשיו חלק מ-Media Session API. כאן אפשר לצפות בהדגמה.

קריאה נוספת

הסיכום מכסה רק חלק מהעדכונים העיקריים. בקישורים שבהמשך מפורטים שינויים נוספים בגרסה 111 של Chrome.

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

קוראים לי אדריאנה ג'רה, ואחרי שגרסת Chrome 112 תפורסם, אספר לכם מה חדש ב-Chrome.