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

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

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

תחביר של צבע יחסי ב-CSS

גרסה 128 של Firefox כוללת תחביר של צבע יחסי ב-CSS, שמאפשר ליצור צבע ביחס לצבע מקור. הקוד הבא ב-CSS מפחית את רמת הרוויה של הצבע indigo בחצי, באמצעות hsl().

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

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

טקסט חלופי לנכס content

דפדפן Firefox 128 תומך בטקסט חלופי למאפיין ה-CSS content, כשהוא כולל תמונה. הטקסט החלופי חשוף לעץ הנגישות. כלומר, עכשיו יש תמיכה בטקסט חלופי בכל הדפדפנים ב-content.

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

עדכון ב-Chrome 127 מבטיח ש-Chrome יקבל מספר שרירותי של רכיבים במקום רק מחרוזת אחת, וכך מאפשר להשתמש בפונקציה attr(), לדוגמה.

הנכס font-size-adjust

Chrome 127 כולל את font-size-adjust, שהוא גם תחום התמקדות ב-Interop 2024. המאפיין הזה שימושי במצבים שבהם יכולה להתרחש החלפה לגופן חלופי, כי הוא עוזר להתאים את הגודל של הגופן החלופי לגופן שבחרתם.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

במהדורת Chrome הזו, הנכס font-size-adjust הופך לחלק מBaseline Newly Available.

תמיכה ב-View Transition API ב-iframes

ב-Chrome יהיו זמינים 127 מעברים בו-זמנית של תצוגות באותו מסמך בפריים ראשי וב-iframe מאותו מקור.

בעבר, הפעלת מעבר תצוגה באמצעות document.startViewTransition ב-iframe מאותו מקור לא הייתה פועלת אם במסגרת הראשית היה פועל מעבר בו-זמנית. המעבר של ה-iframe יודח באופן אוטומטי. עכשיו, שני המעברים יבוצעו.

קונטיינרים של גלילה ניתנים למיקוד במקלדת

החל מ-Chrome 127, מקשי גלילה ניתנים למיקוד בלחיצה ולמיקוד פרוגרמטי כברירת מחדל. כברירת מחדל, אפשר להתמקד במקלדת במקשי גלילה ללא צאצאים שניתן להתמקד בהם.

מידע נוסף על השינוי הזה זמין במאמר סרגל גלילה שניתן להתמקד בו באמצעות מקלדת.

הכלל @property

ב-Firefox 128 יש תמיכה בכלל @property ובממשקי ה-API של JavaScript שקשורים אליו. המשמעות היא שאפשר ליצור מאפיינים מותאמים אישית של CSS שמגדירים תחביר, ירושה וערך ראשוני.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

בדוגמה הבאה, המאפיין המותאם אישית מוגדר לקבל ערך <color> בלבד, לא לעבור בירושה ולכלול ערך ראשוני של hotpink.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

הכלל @property הוא עכשיו חלק מ-Baseline Newly Available. מידע נוסף זמין במאמר @property: משתני CSS מדור הבא עם תמיכה בדפדפנים אוניברסליים.

אפשרות לשינוי הגודל ArrayBuffer ולהגדלה SharedArrayBuffer

מעכשיו יש תמיכה ב-ArrayBuffer וב-SharedArrayBuffer שניתן לשנות את הגודל שלהם ב-Firefox 128. כך אפשר לשנות את הגודל של מאגרי נתונים ללא צורך להקצות מאגר חדש ולהעתיק אליו נתונים. הנכסים האלה מצטרפים גם לקבוצה 'בסיס חדש זמין'.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

מילת המפתח safe במאפייני Flexbox

גרסת Safari 17.6 כוללת בעיקר תיקונים לתכונות קיימות, אבל היא כוללת גם את מילת המפתח safe לנכסי היישור של flexbox. כך אפשר להשתמש במילות המפתח מסוג safe בדפדפנים שונים.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

מילת המפתח safe מונעת ממישור שנבחר לגרום להצגת תוכן מחוץ לאזור הראייה. בדוגמה הבאה ב-CodePen אפשר לראות איך זה עובד עם פריטים שמסומנים בתצוגה מרכזית. אם ההתאמה center גורמת לאובדן נתונים, המערכת משתמשת ב-start במקום זאת.

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

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

גרסה 128 של Chrome כוללת את מאפיין ה-CSS ruby-align, יחד עם שינויים שמאפשרים הפסקות שורה בתוך רכיבים עם display: ruby. גם המאפיין zoom עודכן בהתאם למפרט. יש עדכון ל-API של AudioContext שמוסיף קריאה חוזרת (callback) שמוקצית ל-AudiContext.onerror, שמדווחת על שגיאות ביצירה ובעיבוד של AudioContext.

גרסה 129 של Firefox כוללת את הכלל @starting-style ואת המאפיין transition-behavior. הנכסים האלה יהיו חלק מ-Baseline Newly Available אחרי שגרסת Firefox 129 תשוחרר לגרסה היציבה.