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

Pete LePage

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

אני פיט להפיג'. אנחנו מזמינים אותך לבחון מה חדש אצל המפתחים בגרסה 129 של Chrome.

חלוקת משימות ארוכות באמצעות 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);
  }
}

לקבלת פרטים מלאים, ניתן לעיין במאמר הנפשה לגובה: אוטומטי; (ומילות מפתח מהותיות אחרות לקביעת גודל) ב-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!