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

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

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

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

ועוד.

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

קריאה נוספת

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

להרשמה

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

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