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

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

Rachel Andrew

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

במרץ 2024, הגרסאות Firefox 124,‏ Safari 17.4 ו-Chrome 123 הפכו לגרסאות יציבות. בפוסט הזה אנחנו בודקים את התכונות החדשות שנוספו לפלטפורמת האינטרנט.

התאמה של ערכות הצבעים בעזרת light-dark()

פונקציית הצבע light-dark() הגיעה לגרסה החדשה של Chrome 123, ועכשיו קל יותר להתאים את ערכות הצבעים להעדפות של המשתמשים. בדוגמה הבאה, הערך color-scheme מוגדר ל-light dark ב-root. המאפיינים המותאמים אישית משתמשים בפונקציית הצבע light-dark() כדי להגדיר צבעים שיהיו מוחלפים בהתאם להעדפת המשתמש במצב בהיר או כהה.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

דוגמאות ופרטים נוספים זמינים במאמר צבעים תלויים ב-color-scheme של שירות CSS באמצעות light-dark()

תמיכה בדפדפן

  • Chrome: 123.
  • Edge:‏ 123.
  • Firefox:‏ 120.
  • Safari: 17.5.

מקור

שליטה טובה יותר על הקלט באמצעות field-sizing

בנוסף, ב-Chrome 123, המאפיין field-sizing מאפשר להגדיל באופן אוטומטי את שדות הקלט של הטקסט.

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

  • Chrome:‏ 123.
  • Edge:‏ 123.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

רוצה לבצע חיפוש של סימני פיסוק ב-CJK עם text-spacing-trim?

ב-Chrome 123, המאפיין text-spacing-trim מחיל קירוב בין תווים על תווים של סימני פיסוק בשפות סינית, יפנית וקוריאנית (CJK) כדי לשנות את המרווחים הגדולים מדי. מידע נוסף זמין במאמר 4 תכונות בינלאומיות חדשות של שירותי CSS.

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

  • Chrome:‏ 123.
  • Edge:‏ 123.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

כלל ה-at-rule של CSS‏ @scope

ב-Safari 17.4 יש את האפשרות @scope שמאפשרת לבחור רכיבים בעצים משניים ספציפיים של DOM, לטרגט רכיבים בצורה מדויקת בלי לכתוב בוחרים ספציפיים מדי שקשה לשנות, בלי לקשר את הבוררים בצורה הדוקה מדי למבנה ה-DOM.

מידע נוסף זמין במאמר הגבלת פוטנציאל החשיפה של הסלקטורים באמצעות הכלל @scope של שירות CSS

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

  • Chrome:‏ 118.
  • קצה: 118.
  • Firefox: מאחורי דגל.
  • Safari: 17.4.

מקור

שיפורים במצב 'תמונה בתוך תמונה'

בגרסה 123 של Chrome יש שתי פיצ'רים לשיפור החוויה של 'תמונה בתוך תמונה'. הראשון הוא מצב התצוגה של picture-in-picture ב-CSS. כך תוכלו לכתוב כללי CSS ספציפיים שיוחלו רק כשאפליקציית האינטרנט (או חלק ממנה) מוצגת במצב 'תמונה בתוך תמונה'.

התכונה השנייה מאפשרת להשתמש ב-opener.focus מחלון של תמונה בתוך תמונה כדי להעביר את המיקוד ברמת המערכת לכרטיסייה שבבעלותה חלון תמונה בתוך תמונה.

כך תוכלו להחזיר את הכרטיסייה המקורית לחזית כשצריך. לדוגמה, כשהמשתמשים צריכים גישה לממשק משתמש שלא מתאים לחלון הקטן של 'תמונה בתוך תמונה'.

תמיכה ב-align-content בפריסה של בלוקים וטבלאות

ב-Chrome 123 וב-Safari 17.4 יש תמיכה ב-align-content בפריסת בלוקים וטבלאות. מידע נוסף על השינוי בתמיכה ב-align-content

ממשק API לניתוב סטטי של Service Worker

החל מגרסה 123 של Chrome, ה-Service Worker Static Routing API זמין. ממשק ה-API הזה מאפשר לציין באופן דקלרטיבי איך צריך לאחזר נתיבים מסוימים של משאבים. כלומר, הדפדפן לא צריך להריץ service worker רק כדי לאחזר תגובות מהמטמון או ישירות מהרשת.

מידע נוסף זמין במאמר שימוש ב-Service Worker Static Routing API כדי לעקוף את קובץ השירות בנתיב ספציפי.

Long Animation Frames API

גרסה 123 של Chrome כוללת גם את Long Animation Frames API, שהוא עדכון ל-Long Tasks API שמאפשר להבין טוב יותר עדכונים איטיים של ממשק המשתמש (UI). התכונה הזו יכולה להיות שימושית לזיהוי פריימים איטיים של אנימציה שיש סיכוי גבוה שהם ישפיעו על המדד מאינטראקציה ועד הצגת התגובה (INP) של Core Web Vitals, שמודד את הרספונסיביות, או לזיהוי תנודות אחרות בממשק המשתמש שמשפיעות על רמת החלקות.

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

  • Chrome:‏ 123.
  • Edge:‏ 123.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

הנכס content-visibility

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

תמיכה בדפדפן

  • Chrome: 85.
  • Edge:‏ 85.
  • Firefox:‏ 125.
  • Safari: 18.

מקור

תוספות ל-ArrayBuffer וקיבוץ מערכי נתונים

ב-Safari 17.4, ל-JavaScript נוספות כמה תכונות חדשות עם תמיכה במאפיין detached ובשיטות transfer() ו-transferToFixedLength() של ArrayBuffer.

תמיכה בדפדפן

  • Chrome:‏ 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

מקור

גרסה 17.4 של Safari כוללת גם את שיטות הקיבוץ של מערכי Object.groupBy ו-Map.groupBy. מידע נוסף על קיבוץ מערכי נתונים זמין במאמר JavaScript מקבלת שיטות לקיבוץ מערכי נתונים.

תמיכה בדפדפן

  • Chrome:‏ 117.
  • Edge:‏ 117.
  • Firefox:‏ 119.
  • Safari: 17.4.

מקור

עכשיו התכונות האלה מאפשרות פעולה הדדית ולכן הן מצטרפים ל-Baseline Newly Available.

setHTMLUnsafe וגם parseHTMLUnsafe

השיטות setHTMLUnsafe ו-parseHTMLUnsafe ששולחות ב-Safari 17.4 מאפשרות להשתמש ב-Declarative Shadow DOM מ-JavaScript. השיטות האלה גם מספקות דרך קלה יותר לנתח באופן אימפרטיבי קובץ HTML ל-DOM, בהשוואה ל-innerHTML או ל-DOMParser.

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

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

Firefox 125 צפוי להיות גרסה מעניינת. הוא כולל את align-content בבלוקים, כך שהתכונה הזו ניתנת לפעולה הדדית. גם Popover API הוא ממשק ה-API של Popover, ולכן הוא חלק מ-Baseline Newly Available. תהיה גם תמיכה במאפיין transition-behavior. חלונות קופצים ו-transition-behavior הם חלק מ-Interop 2024.

גרסה 124 של Chrome כוללת את השיטות setHTMLUnsafe ו-parseHTMLUnsafe, שמאפשרות להשתמש ב-Declarative Shadow DOM מ-JavaScript, וכך מאפשרות לתכונות האלה לפעול יחד. בנוסף, נכללים WebSocketStream API והמאפיין writingsuggestions.