תכנים חדשים בפלטפורמת האינטרנט באוגוסט

במהלך אוגוסט 2024 נוספו לדפדפני אינטרנט יציבים ובגרסת בטא כמה תכונות מעניינות.

גרסאות יציבות של דפדפנים

באוגוסט 2024, הגרסאות Firefox 129 ו-Chrome 128 הפכו ליציבות. בפוסט הזה נסקור את התכונות החדשות שנוספו לפלטפורמת האינטרנט.

עדכונים בפורמט של Ruby

רכיב ה-HTML‏ <ruby> הוא כלי יעיל לשיפור הצגת הטקסט, במיוחד בשפות מזרח אסיה. הרכיב הזה מאפשר להציג הערות פונטיות או מידע נוסף מעל הטקסט הבסיסי או לצידו. החל מגרסה 128 של Chrome, אפשר לחלק הערות Ruby לשורות, ואפשר לעצב טקסט של הערות Ruby באמצעות מאפיין ה-CSS ruby-align.

מידע נוסף זמין במאמר התכונה <ruby> ונכס ה-CSS ruby-align לניתוק שורות.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

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, במקום לטפל גם בתהליכי חריגה סינכרוניים וגם בתהליכי חריגה אסינכררוניים.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

אנימציה של אפקטים של כניסה

גרסה 129 של Firefox כוללת שתי תכונות CSS שמשמשות ליצירת אנימציות של אפקטים של כניסה, והתכונות האלה זמינות עכשיו בגרסת Baseline.

הכלל @starting-style מגדיר את הסגנונות הראשוניים של רכיב לפני שהוא מוצג בדף. הדבר נדרש לרכיבים שמופיעים באנימציה מ-display: none, כי הם זקוקים למצב שממנו תתחיל האנימציה.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

אפקטים של כניסה דורשים גם אנימציה של מאפיינים נפרדים, אלה שלא ניתן לבצע בהם אינטרפולציה בין ערכים. עכשיו אפשר לעשות זאת באמצעות transition-behavior: allow-discrete או בערך allow-discrete בקיצור הדרך של המעבר. התכונה הזו נתמכת עכשיו גם ב-Firefox 129.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

מידע נוסף זמין במאמר עכשיו בגרסת Baseline: אנימציה של אפקטים לכניסה.

הוספות ל-PerformanceResourceTiming

ב-Firefox 129 נוספו המאפיינים contentType ו-responseStatus של הממשק PerformanceResourceTiming. הם מציינים את סוג התוכן של המשאב שאוחזר ואת קוד סטטוס התגובה של HTTP שהוחזר בזמן אחזור המשאב, בהתאמה.

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

שיטות toJSON() למיקום גיאוגרפי

ב-Firefox 129 יש גם את GeolocationCoordinates.toJSON() ו-GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

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 שניות', שתומך במספר אזורי זמן.