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

תאריך פרסום: 27 במאי 2025

אנחנו משיקים עכשיו את Chrome 137, ובמאמר הזה נסביר על כמה מהתכונות העיקריות של הגרסה. נתוני הגרסה המלאים של Chrome 137

נקודות חשובות בגרסה הזו:

כדי להבטיח סדר הגיוני של מקשי Tab בפריסות מורכבות, צריך להשתמש ב-reading-flow וב-reading-order. הפונקציה if() של CSS מאפשרת להגדיר ערכים מותנים בצורה תמציתית. ‫JavaScript Promise Integration‏ (JSPI) מאפשר לשלב אפליקציות WebAssembly עם הבטחות JavaScript.

‫CSS reading-flow ו-reading-order

מאפיין ה-CSS‏ reading-flow קובע את הסדר שבו רכיבים בפריסה גמישה, בפריסת רשת או בפריסת בלוק נחשפים לכלי נגישות, ואת האופן שבו מתמקדים בהם באמצעות שיטות ניווט לינאריות רציפות. הפתרון הזה פותר בעיה שהייתה קיימת זמן רב בפריסות של רשתות וגמישות, שבהן סדר הלחיצה על מקש Tab יכול להיות לא קשור לסדר שבו הפריטים מוצגים.

היא מקבלת ערך מילת מפתח אחד, וערך ברירת המחדל הוא normal, ששומר על ההתנהגות של סידור הרכיבים לפי סדר ה-DOM. כדי להשתמש בו בתוך קונטיינר flex, צריך להגדיר את הערך שלו ל-flex-visual או ל-flex-flow. כדי להשתמש בו בתוך רכיב grid, צריך להגדיר את הערך שלו ל-grid-rows,‏ grid-columns או grid-order.

המאפיין reading-order CSS מאפשר לשנות באופן ידני את סדר הפריטים בתוך קונטיינר של זרימת קריאה. כדי להשתמש במאפיין הזה בתוך קונטיינר של grid,‏ flex או block, צריך להגדיר את הערך reading-flow בקונטיינר ל-source-order ולהגדיר את הערך reading-order של הפריט הבודד למספר שלם.

מידע נוסף זמין במאמר שימוש ב-CSS reading-flow לניווט לוגי רציף בין רכיבים.

הפונקציה if() של CSS

הפונקציה if() ב-CSS מאפשרת להגדיר ערכים מותנים בצורה תמציתית. היא מקבלת סדרה של צמדי תנאי-ערך, שמופרדים באמצעות נקודה-פסיק. הפונקציה בודקת כל תנאי ברצף ומחזירה את הערך שמשויך לתנאי הראשון שמתקיים. אם אף אחד מהתנאים לא מחזיר את הערך True, הפונקציה מחזירה זרם אסימונים ריק.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}
<div class="dark">dark</div>
<div class="light">light</div>

שילוב של WebAssembly JavaScript Promise (JSPI)

‫JavaScript Promise Integration‏ (JSPI) הוא API שמאפשר לאפליקציות WebAssembly להשתלב עם הבטחות JavaScript.

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

באופן ספציפי, כשמשתמשים ב-JSPI כדי לקרוא ל-API של JavaScript שמחזיר הבטחה, קוד WebAssembly מושהה, והקוד המקורי שקרא לתוכנית WebAssembly מקבל הבטחה שתתממש כשהתוכנית תסתיים.

ועוד!

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

  • כחלק מהמשך הפיתוח של חלוקת האחסון למחיצות, הטמענו ב-Chrome חלוקה למחיצות של גישה לכתובות URL של Blob לפי מפתח אחסון.
  • הטמענו עכשיו פורמטים של פיקסלים בנקודה צפה ב-Canvas.
  • offset-path: shape() נתמך, כך שאפשר להשתמש בצורות רספונסיביות כדי להגדיר את נתיב האנימציה.

קריאה נוספת

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

הרשמה

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

ברגע שגרסה Chrome 138 תושק, נעדכן אתכם כאן לגבי החידושים ב-Chrome.