תכונות מעניינות שנוספו לדפדפני אינטרנט בגרסאות יציבות ובגרסאות בטא במהלך יולי 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
דוגמאות רבות נוספות זמינות בפוסט בבלוג תחביר של צבע יחסי ב-CSS. תחביר צבעים יחסי הוא אחד מתחומי ההתמקדות של Interop 2024, ולכן העדכון הזה עוזר לשפר את הציון של Firefox היציב.
טקסט חלופי לנכס content
דפדפן Firefox 128 תומך בטקסט חלופי למאפיין ה-CSS content
, כשהוא כולל תמונה. הטקסט החלופי חשוף לעץ הנגישות.
כלומר, עכשיו יש תמיכה בטקסט חלופי בכל הדפדפנים ב-content
.
Browser Support
עדכון ב-Chrome 127 מבטיח ש-Chrome יקבל מספר שרירותי של רכיבים במקום רק מחרוזת אחת, וכך מאפשר להשתמש בפונקציה attr()
, לדוגמה.
הנכס font-size-adjust
Chrome 127 כולל את font-size-adjust
, שהוא גם תחום התמקדות ב-Interop 2024.
המאפיין הזה שימושי במצבים שבהם יכולה להתרחש החלפה לגופן חלופי, כי הוא עוזר להתאים את הגודל של הגופן החלופי לגופן שבחרתם.
במהדורת 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 שמגדירים תחביר, ירושה וערך ראשוני.
בדוגמה הבאה, המאפיין המותאם אישית מוגדר לקבל ערך <color>
בלבד, לא לעבור בירושה ולכלול ערך ראשוני של hotpink
.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
הכלל @property
הוא עכשיו חלק מ-Baseline Newly Available. מידע נוסף זמין במאמר @property: משתני CSS מדור הבא עם תמיכה בדפדפנים אוניברסליים.
אפשרות לשינוי הגודל ArrayBuffer
ולהגדלה SharedArrayBuffer
מעכשיו יש תמיכה ב-ArrayBuffer וב-SharedArrayBuffer שניתן לשנות את הגודל שלהם ב-Firefox 128. כך אפשר לשנות את הגודל של מאגרי נתונים ללא צורך להקצות מאגר חדש ולהעתיק אליו נתונים. הנכסים האלה מצטרפים גם לקבוצה 'בסיס חדש זמין'.
מילת המפתח safe
במאפייני Flexbox
גרסת Safari 17.6 כוללת בעיקר תיקונים לתכונות קיימות, אבל היא כוללת גם את מילת המפתח safe
לנכסי היישור של flexbox.
כך אפשר להשתמש במילות המפתח מסוג safe
בדפדפנים שונים.
Browser Support
מילת המפתח 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 תשוחרר לגרסה היציבה.