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

כאן אפשר לראות כמה מהתכונות המעניינות שהגיעו לגרסה היציבה ולגרסת הבטא בדפדפני אינטרנט במהלך יולי 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);
}

תמיכה בדפדפן

  • 119
  • 119
  • 128
  • 16.4

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

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

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

תמיכה בדפדפן

  • 77
  • 79
  • 128
  • 17.4

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

הנכס font-size-adjust

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

תמיכה בדפדפן

  • 127
  • 127
  • 3
  • 16.4

מקור

בגרסה הזו של Chrome, הנכס font-size-adjust הופך לחלק Baseline חדש:

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

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

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

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

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

מידע נוסף על השינוי הזה זמין בפוסט מודעות גלילה שניתן להתמקד בהן.

הכלל @property

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

תמיכה בדפדפן

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

תמיכה בדפדפן

  • 111
  • 111
  • 128
  • 16.4

מקור

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

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

תמיכה בדפדפן

  • 115
  • 115
  • 63
  • 18

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

גרסאות של דפדפן בטא

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

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

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