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

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

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

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

התאמת סכימות הצבעים באמצעות light-dark()

פונקציית הצבע light-dark() הגיעה לגרסה 123 של Chrome, וכך קל יותר להתאים את לוחות הצבעים להעדפות המשתמש. בדוגמה הבאה 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);
}

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

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

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

הוספת סימן פיסוק ל-CJK עם text-spacing-trim

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

שירות ה-CSS של @scope

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

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

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

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

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

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

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

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

API של Service Worker Static Routing

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

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

ממשק API של מסגרת אנימציה ארוכה

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

הנכס content-visibility

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

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

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

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

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

setHTMLUnsafe וגם parseHTMLUnsafe

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

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

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

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

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