מזמן לא התראינו! סרטון 'מה חדש ב-Chrome' חזר עם מידע על:
- תיבת טקסט ב-CSS, שמאפשרת לשלוט בריווח האנכי בצורה מדויקת באמצעות מדדי הגופן.
- File System Access API, שזמין עכשיו ב-Android ובתצוגת האינטרנט.
- דרך לשמור על המצב בזמן העברת רכיב DOM באמצעות
moveBefore. - Light dismiss מגיע לרכיב
<dialog>. - יש גם הרבה עדכונים בבסיס ועוד!
קוראים לי Mariko. נצלול פנימה ונראה מה חדש ב-Chrome בשלוש הגרסאות האחרונות.
תיבת טקסט ב-CSS
באמצעות מאפיין ה-CSS text-box אפשר לשלוט בריווח האנכי בצורה מדויקת באמצעות מדדי הגופן.
לכל גופן יש כמות שונה של רווח מעל ומתחת לתו, שמגדירה את גודל הרכיב.
עד עכשיו לא הייתה אפשרות לקבוע את הגודל של המרחבים האלה.
המאפיין החדש text-box-trim מציין את הצדדים לחיתוך, מעל או מתחת, והמאפיין text-box-edge מציין איך צריך לחתוך.
לדוגמה, חיתוך בגובה של אותיות רישיות, שהיא החלק העליון של תווים גדולים.
אפשר גם לכתוב את זה באמצעות נכס text-box המקוצר.
מידע נוסף על השימוש במאפיינים החדשים האלה זמין במאמר CSS text-box-trim.
File System Access API
נוספה ב-Chrome 133, פונקציית DOM פרימיטיבית Node.prototype.moveBefore שמאפשרת להעביר רכיבים בתוך עץ DOM, בלי לאפס את המצב של הרכיב.
כשמסירים רכיב ומחדירים אותו מחדש כדי להעביר רכיב DOM, המצב של הרכיב הזה מתאפס. באמצעות הפרימיטיב החדש הזה, המצב של הצומת נשמר.
כך, iframes נשארים טעונים, אלמנטים פעילים נשארים במוקד, רכיבים כמו חלונות קופצים ותיבות דו-שיח נשארים פתוחים, ומעברים או אנימציות של CSS ממשיכים לפעול.
דרך לשמור את המצב של רכיב DOM בזמן ההעברה שלו
ממשק ה-API של גישה למערכת קבצים זמין ב-Chrome למחשב כבר זמן מה. ממשק ה-API הזה מאפשר לאפליקציות אינטרנט לקיים אינטראקציה עם קבצים במערכת הקבצים המקומית של המשתמש. החל מגרסה 132 של Chrome, ה-API זמין גם ב-Android וב-WebViews.
כדי לקרוא קובץ, קוראים ל-showOpenFilePicker(). השיטה הזו מציגה בורר קבצים ומחזירה מאחז קובץ שאפשר להשתמש בו כדי לקרוא את הקובץ.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
כדי לשמור קובץ בדיסק, אפשר להשתמש באותו מזהה קובץ שקיבלת מקודם, או לבצע קריאה ל-showSaveFilePicker() כדי לקבל מזהה קובץ חדש.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
סגירה קלה מופיעה ברכיב <dialog>
אם כבר יצא לכם להשתמש ב-Popover API כדי ליצור חלון קופץ, אתם יודעים שאחד מהמאפיינים הנחמדים של Popover API הוא התנהגות הסגירה הקלה. המשתמשים יכולים ללחוץ על הרקע, ורכיב החלונית הקופצת נסגר בלי ללחוץ על לחצן הסגירה באופן ספציפי.
עכשיו יש תמיכה באפשרות הזו גם ברכיב <dialog>.
כשמגדירים את המאפיין closedby כ-any, אפשר לסגור את תיבת הדו-שיח בלחיצה מחוץ לתיבת הדו-שיח או בהקשה על מקשי Escape.
<dialog closedby="any">...</dialog>
זוהי אותה התנהגות כמו כשחלון קופץ מוגדר למצב אוטומטי.
עדכונים ב-Baseline
ויש גם חדשות לגבי Baseline
Baseline זמין עכשיו
קודם כול, Baseline – תכונות חדשות שזמינות עכשיו, והן הופיעו לאחרונה בכל ארבעת הדפדפנים העיקריים.
scrollbar-gutter וגם scrollbar-width
בעזרת מאפיין ה-CSS scrollbar-gutter אפשר להקצות מקום לסרגל הגלילה כדי למנוע שינויים לא רצויים בפריסה כשהוא מופיע או נעלם. בעזרת scrollbar-width אפשר ליצור סרגל גלילה צר יותר, או אפילו להסתיר את סרגל הגלילה לגמרי בלי להשפיע על היכולת לגלול.
ruby-align
באמצעות מאפיין ה-CSS ruby-align אפשר לציין את היישור של טקסט הבסיס של Ruby וטקסט ההערה של Ruby.
Promise.try
Promise.try הוא שיטה נוחה לטיפול בשגיאות בבקשות סינכרוניות. כך אפשר להימנע משימוש בפונקציות קריאה חוזרת כשמנסים לבצע בקשה באמצעות Promise.resolve.
אופטימיזציות של איסוף אשפה וקריאה חוזרת לקוד בסוף פונקציה ב-Wasm
עכשיו יש ב-WebAssembly תמיכה בפינוי אשפה ובאופטימיזציה של קריאה חוזרת לקוד בסוף פונקציה.
בסיס זמין במקומות רבים
מערך findLast() ו-findLastIndex()
השיטות findLast() ו-findLastIndex() של מערך הן שיטות נוחות מאוד לקבלת פריטים מסוף מערך. התכונה הזו נתמכת בכל הדפדפנים העיקריים כבר 30 חודשים, כלומר היא זמינה עכשיו לרוב המשתמשים.
מאפייני טרנספורמציה ספציפיים
מאפייני טרנספורמציה ספציפיים שמעניקים לכם שליטה פרטנית יותר על טרנספורמציות CSS זמינים עכשיו גם ב-Baseline ברמת הזמינות הרחבה .
מידע נוסף על Baseline
מידע נוסף על Baseline ועל ההבדל בין 'חדש' לבין 'זמין באופן נרחב' זמין בסרטון הקצר שיצרתי.
מידע נוסף על סטטוס הבסיס של תכונה מסוימת זמין גם בלוח הבקרה של סטטוס פלטפורמת האינטרנט.
פרויקט יכולת הפעולה ההדדית חוזר בשנת 2025
ולסיום, פרויקט Interop חוזר בשנת 2025 עם רשימה של תחומי התמקדות, כולל מעברים בין תצוגות, מיקום של עוגנים ב-CSS ו-Navigation API. כדאי לעיין בהודעה על הפרויקט.
להרשמה
כדי להתעדכן, כדאי להירשם לערוץ YouTube למפתחי Chrome, ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.
קוראים לי מריקו קוסקה ואחזור אליך בעוד שלושה חודשים כדי לספר לך עוד על מה שחדש ב-Chrome!