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

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

Rachel Andrew

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

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

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

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

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

תמיכה בדפדפנים

  • Chrome:‏ 119.
  • Edge:‏ 119.
  • Firefox:‏ 128.
  • Safari: 16.4.

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

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

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

תמיכה בדפדפנים

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

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

הנכס font-size-adjust

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

תמיכה בדפדפנים

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

מקור

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

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

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

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

מאגרי גלילה שניתן להתמקד בהם במקלדת

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

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

הכלל @property

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

תמיכה בדפדפן

  • Chrome:‏ 85.
  • קצה: 85.
  • Firefox:‏ 128.
  • Safari: 16.4.

מקור

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

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

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

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

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

תמיכה בדפדפן

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

מקור

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

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

תמיכה בדפדפנים

  • 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.

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