מה חדש בגרסה 129 של Chrome

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

קוראים לי פיט לייפאג (Pete LePage). נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 129.

פיצול משימות ארוכות באמצעות scheduler.yield()

משימות ארוכות מעכבות את היכולת של הדפדפן להגיב לקלט של המשתמשים, יוצרות תחושה שהאתר איטי ומשפיעות על מדדי ביצועים קריטיים כמו INP. בעזרת scheduler.yield() אפשר לפצל משימות ארוכות למקטעים קטנים יותר, וכך לשפר את היענות המערכת על ידי העברה מפורשת חזרה לשרשור הראשי.

היא מאפשרת לכם להורות לדפדפן:

"היי! העבודה שאעשה עשויה להימשך זמן מה. אם יש לך צורך לצבוע מסגרת, להגיב לקלט של משתמש או לבצע משימות חשובות אחרות, אין בעיה, אוכל להמתין"

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

מוסיפים את השורה הבאה לקוד ה-JavaScript לעיתים קרובות כדי לתת לדפדפן מרווח נשימה, וכדי למנוע בעיות INP.

await scheduler.yield();

חשוב לציין שהיא מאפשרת לתת עדיפות להמשך הקוד, כך שלא תפסידו זמן על ידי הענקת עדיפות לקוד אחר. מומלץ להשתמש ב-scheduler.yield() בפונקציות בין קטעי קוד גדולים יותר.

לפרטים נוספים, ראו אופטימיזציה של משימות ארוכות.

אנימציות עם מידות מובנות

אנימציות CSS הן נהדרות, אבל בדרך כלל הן דורשות גדלים מפורשים. לא ניתן להשתמש במילות המפתח של הגדרת הגודל המובנית, כמו auto,‏ min-content או fit-content.

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

בלי interpolate-size, אין לחצנים בסרטון הבא עם מעבר.

אחרי שמוסיפים את interpolate-size: allow-keywords, הלחצנים בסרטון מקבלים אפקט אנימציה יפה של מעבר.

ציון הערך interpolate-size: allow-keywords ברכיב root מגדיר את ההתנהגות החדשה לכל הדף. מומלץ לעשות זאת בכל מקרה שבו אין בעיה של תאימות.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

כדי לשלוט בצורה מדויקת יותר, הפונקציה calc-size() ב-CSS, בדומה לפונקציה calc(), תומכת גם בפעולות על אחת בלבד ממילת המפתחות הנתמכות של התאמה אישית מובנית. כשמבצעים חישובים של פריסה, מילת המפתח size מוערכת לפי הגודל המקורי של calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

פרטים מלאים זמינים במאמר Animation to height: auto; (ועוד מילות מפתח פנימיות לקביעת גודל) ב-CSS.

שינויים במיקום של עוגנים ב-CSS

היכולת למקם עוגנים ב-CSS נוספה ל-Chrome בגרסה 125, אבל אחרי דיון נוסף בקבוצת העבודה של CSS, בוצעו כמה שינויים במפרט ובהטמעה. אם אתם כבר משתמשים במיקום עוגן ב-CSS, תצטרכו לעדכן את הקוד בהקדם האפשרי.

קודם כול, השם של inset-area השתנה ל-position-area. האפשרות הזו נבחרה כי הניסוח position- עוזר לזכור שהמאפיין הזה חל על הרכיב הממוקם, ולא על רכיב העוגן.

בשלב השני, השם של position-try-options משתנה ל-position-try-fallbacks. הסימון הזה עוזר לזכור שאלה רק חלופות למיקום הראשי, שנקבע על ידי סגנונות הבסיס.

לבסוף, התחביר הפונקציוני של inset-area() יוסר מ-position-try. לכן, צריך להשתמש ב-position-try-fallbacks: top במקום ב-position-try-fallbacks: inset-area(top).

ועוד.

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

יש שיטה חדשה Intl לפורמט של משכי זמן, עם תמיכה במספר אזורי זמן.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

עכשיו אפשר להשתמש במלוא טווח התצוגה של Web GPU canvas לתמונות HDR.

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

לנתוני הגרסה המלאים

קריאה נוספת

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

להרשמה

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

אני מחליף את Adriana. שמי Pete LePage, וברגע שגרסת Chrome 130 תפורסם, נהיה כאן כדי לספר לכם מה חדש ב-Chrome!