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

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

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

תיבות נפתחות בלעדיות עם המאפיין name עבור <details>

ב-Firefox 130 יש תמיכה במאפיין name של האלמנט <details>. הקבוצה הזו מקבצת רכיבי <details>, וניתן לפתוח רק רכיב אחד בקבוצה בכל פעם. כך אפשר ליצור חלונית מתקפלת ייחודית בלי להשתמש ב-JavaScript.

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

הנפשה אוטומטית (ועוד)

ב-Chrome 129 נוספו המאפיין interpolate-size והפונקציה calc-size() של CSS.

נכס ה-CSS interpolate-size מאפשר לדף להביע הסכמה להצגת אנימציות ומעברים של מילות מפתח פנימיות של CSS לבחירת גודל, כמו auto, ‏ min-content ו-fit-content, במקרים שבהם אפשר להציג אנימציה של מילות המפתח האלה.

Browser Support

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

Source

פונקציית ה-CSS calc-size() היא פונקציית CSS שדומה ל-calc(), אבל היא תומכת גם בפעולות על מילת מפתח אחת בלבד שתומכת בגודל. מילות המפתח הנתמכות לבחירת גודל הן auto,‏ min-content,‏ max-content ו-fit-content.

Browser Support

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

Source

מידע נוסף זמין במאמר אנימציה לגובה: auto; (ומילות מפתח אחרות לקביעת גודל מובנה) ב-CSS.

עיצוב משכי זמן ב-JavaScript

ב-Chrome 129 יש גם את Intl.DurationFormat, שמאפשרת לעצב משכי זמן, למשל 'שעה אחת, 40 דקות ו-30 שניות', ותומכת במספר אזורים גיאוגרפיים.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

WebCodecs API

Web Codecs API זמין עכשיו במחשב ב-Firefox 130, ומעניק למפתחי אינטרנט גישה ברמה נמוכה לפריימים הנפרדים של סטרימינג וידאו ולקטעי אודיו. הממשקים החדשים כוללים את: VideoEncoder,‏ VideoDecoder,‏ EncodedVideoChunk,‏ VideoFrame ו-VideoColorSpace. ה-API הזה לא מאפשר להשתמש ב-Baseline Newly, כי הוא עדיין לא נתמך ב-Firefox ל-Android, אבל יש תמיכה ב-Firefox Nightly ל-Android.

Browser Support

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Source

שאילתות של סגנון CSS לנכסים מותאמים אישית

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

מידע נוסף על שאילתות בסגנון CSS

מעברים בין תצוגות של אותו מסמך

ב-Safari 18 יש תמיכה גם במעברים בין תצוגות של אותו מסמך לאפליקציות SPA, שמאפשרים ליצור מעברים חזותיים בין מצבים שונים של אפליקציה.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

מידע נוסף על מעברים בין תצוגות של אותו מסמך

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

גרסאות בטא של דפדפנים נותנות לכם תצוגה מקדימה של תכונות שייכללו בגרסה היציבה הבאה של הדפדפן. זו הזדמנות מצוינת לבדוק תכונות חדשות או הסרות שעשויות להשפיע על האתר שלכם, לפני שהן יהיו זמינות לכולם. הגרסאות החדשות של גרסת הבטא הן Firefox 131,‏ Chrome 130 ו-Safari 18.1. במהדורות האלה נוספו לפלטפורמה תכונות רבות ומועילות. כל הפרטים מפורטים בהערות המוצר. ריכזנו כאן כמה נקודות עיקריות.

גרסה 131 של Firefox כוללת עזרים חדשים של מחזור JavaScript וקובצי cookie עם חלוקה עצמאית למחיצות (CHIPS) מופעלים עכשיו.

ב-Chrome 130 יש תמיכה ב-box-decoration-break: clone גם לפיצול בתוך שורה (פריסה של שורה) וגם לפיצול בלוקים (קטעים שנוצרים לצורך הדפסה ולצורך מספר עמודות). בנוסף, יש דיווח משופר על שגיאות ב-IndexedDB, ומאפיין connected חדש לממשק SerialPort של Web Serial.

גרסה 18.1 של Safari כוללת תיקוני באגים בתכונות קיימות.