במהלך אוגוסט 2024 נוספו לדפדפני אינטרנט יציבים ובגרסת בטא כמה תכונות מעניינות.
גרסאות יציבות של דפדפנים
באוגוסט 2024, הגרסאות Firefox 129 ו-Chrome 128 הפכו ליציבות. בפוסט הזה נסקור את התכונות החדשות שנוספו לפלטפורמת האינטרנט.
עדכונים בפורמט של Ruby
רכיב ה-HTML <ruby>
הוא כלי יעיל לשיפור הצגת הטקסט, במיוחד בשפות מזרח אסיה. הרכיב הזה מאפשר להציג הערות פונטיות או מידע נוסף מעל הטקסט הבסיסי או לצידו. החל מגרסה 128 של Chrome, אפשר לחלק הערות Ruby לשורות, ואפשר לעצב טקסט של הערות Ruby באמצעות מאפיין ה-CSS ruby-align
.
מידע נוסף זמין במאמר התכונה <ruby>
ונכס ה-CSS ruby-align
לניתוק שורות.
PointerEvent.deviceProperties
לכתיבה בכמה עטים
השינוי הזה, שייכנס לתוקף ב-Chrome 128, מספק דרך מאובטחת ואמינה לזהות עטים (מקשיות) ספציפיים שמקיימים אינטראקציה עם המסך, כדי להגדיר צבעים או צורות עט ספציפיים לכל מכשיר שמקיים אינטראקציה עם המכשיר לסריקה דיגיטלית. הוא מרחיב את הממשק PointerEvent
כך שיכלול מאפיין חדש, deviceProperties
. הוא מכיל את המאפיין uniqueId
, שמייצג מזהה ייחודי ומבודד למסמך, שנשמר לכל משך הסשן, וניתן להשתמש בו באופן מהימן כדי לזהות עטים ספציפיים שמקיימים אינטראקציה עם הדף.
Promise.try
בנוסף, בגרסה Chrome 128, Promise.try
מאפשר לטפל בשגיאות בקלות רבה יותר באמצעות Promises. יש תבנית שבה יש פונקציה, f
. הפונקציה הזו עשויה להיות אסינכררונית ולהחזיר Promise, או לא. כדי להשתמש בסמינטיקה של Promise כדי לטפל בשגיאות בשני המקרים, צריך לעטוף את הפונקציה ב-Promise. בדרך כלל משתמשים ב-new Promise(resolve => resolve(f()))
כדי לעשות זאת.
Promise.try
היא דרך פשוטה יותר להשיג את אותו מטרה. הוא מאפשר להתחיל שרשרת Promise שמאתרת את כל השגיאות במטפלים של .catch
, במקום לטפל גם בתהליכי חריגה סינכרוניים וגם בתהליכי חריגה אסינכררוניים.
אנימציה של אפקטים של כניסה
גרסה 129 של Firefox כוללת שתי תכונות CSS שמשמשות ליצירת אנימציות של אפקטים של כניסה, והתכונות האלה זמינות עכשיו בגרסת Baseline.
הכלל @starting-style
מגדיר את הסגנונות הראשוניים של רכיב לפני שהוא מוצג בדף. הדבר נדרש לרכיבים שמופיעים באנימציה מ-display: none, כי הם זקוקים למצב שממנו תתחיל האנימציה.
אפקטים של כניסה דורשים גם אנימציה של מאפיינים נפרדים, אלה שלא ניתן לבצע בהם אינטרפולציה בין ערכים.
עכשיו אפשר לעשות זאת באמצעות transition-behavior: allow-discrete
או בערך allow-discrete
בקיצור הדרך של המעבר.
התכונה הזו נתמכת עכשיו גם ב-Firefox 129.
מידע נוסף זמין במאמר עכשיו בגרסת Baseline: אנימציה של אפקטים לכניסה.
הוספות ל-PerformanceResourceTiming
ב-Firefox 129 נוספו המאפיינים contentType
ו-responseStatus
של הממשק PerformanceResourceTiming
.
הם מציינים את סוג התוכן של המשאב שאוחזר ואת קוד סטטוס התגובה של HTTP שהוחזר בזמן אחזור המשאב, בהתאמה.
contentType
responseStatus
שיטות toJSON()
למיקום גיאוגרפי
ב-Firefox 129 יש גם את GeolocationCoordinates.toJSON()
ו-GeolocationPosition.toJSON()
.
WebDriver BiDi
עכשיו יש תמיכה ב-WebDriver BiDi ב-Firefox 129. פירוש הדבר הוא שאפשר להשתמש ב-Puppeteer עם Chrome או Firefox לצורך אוטומציה. מידע נוסף זמין במאמרים WebDriver BiDi מוכן לייצור ב-Firefox, ב-Chrome וב-Puppeteer והכרזה על תמיכה רשמית ב-Puppeteer ל-Firefox.
גרסאות בטא של דפדפנים
גרסאות בטא של דפדפנים נותנות לכם תצוגה מקדימה של תכונות שייכללו בגרסה היציבה הבאה של הדפדפן. זו הזדמנות מצוינת לבדוק תכונות חדשות או הסרות שעשויות להשפיע על האתר שלכם, לפני שהן יהיו זמינות לכולם. הגרסאות החדשות של גרסת הבטא הן Firefox 130 ו-Chrome 129. עדיין נמשכת תקופת הבטא של Safari 18. במהדורות האלה נוספו לפלטפורמה תכונות רבות ומועילות. כל הפרטים מפורטים בהערות למהדורה. ריכזנו כאן כמה מהשינויים הבולטים.
גרסה 130 של Firefox תומכת במאפיין השם של אלמנט <details>
שמקבץ אלמנטים <details>
, כאשר רק אלמנט אחד בקבוצה יכול להיות פתוח בכל פעם. כך אפשר ליצור חלונית מתקפלת ייחודית בלי להשתמש ב-JavaScript.
ב-Chrome 129 נוספו המאפיין interpolate-size
והפונקציה calc-size()
של CSS.
נכס ה-CSS interpolate-size
מאפשר לדף להביע הסכמה להצגת אנימציות ומעברים של מילות מפתח פנימיות של CSS לבחירת גודל, כמו auto
, min-content
ו-fit-content
, במקרים שבהם אפשר להציג אנימציה של מילות המפתח האלה.
פונקציית ה-CSS calc-size()
היא פונקציית CSS שדומה ל-calc()
, אבל היא תומכת גם בפעולות על מילת מפתח אחת בלבד שתומכת בגודל. מילות המפתח הנתמכות כרגע לבחירת גודל הן auto
, min-content
, max-content
ו-fit-content
.
ב-Chrome 129 יש גם את Intl.DurationFormat
, שמספק שיטה לעיצוב משכי זמן, לדוגמה '1 שעה 40 דקות 30 שניות', שתומך במספר אזורי זמן.