חדש ב-Chrome 111

Adriana Jara

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

  • בעזרת ה-View Migrates API תוכלו ליצור מעברים מטופחים באפליקציה בדף יחיד.
  • משדרגים את הצבעים בעזרת תמיכה ב-CSS Color Level 4.
  • מגלים כלים חדשים בחלונית הסגנון, שיעזרו לכם להפיק את המרב מפונקציונליות הצבעים החדשה.
  • ויש הרבה עוד.

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

הצגת ה-API של המעברים.

יצירת מעברים חלקים באינטרנט היא משימה מורכבת. View Migrates API נועד להקל על תהליך היצירה של מעברים מלוטשים, על ידי יצירת snapshot של תצוגות מפורטות ומתן הרשאה לשינוי ה-DOM ללא חפיפה בין מצבים.

מעברים שנוצרו באמצעות View Migrate 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 הושק עבור אפליקציות בדף יחיד (SPA), אבל מוטמעת גם תמיכה במודלים אחרים.

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

רמת צבע של CSS 4.

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

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

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

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

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

.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.

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

דוגמאות להגדרות צבע של CSS.

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

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

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

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

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

ופעולות נוספות.

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

קריאה נוספת

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

להרשמה

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

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