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

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

ביוני, הגרסאות Chrome 103 ו-Firefox 102 הפכו ליציבות.

ב-Firefox 102 יש תמיכה בTransform Streams. כך אפשר להעביר נתונים מ-ReadableStream אל WritableStream, תוך ביצוע טרנספורמציה על הקטעים. אנחנו שמחים שהתכונה הזו זמינה עכשיו בכל שלושת המנועים, וזה הזמן ללמוד על Streams.

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

  • Chrome: 67.
  • קצה: 79.
  • Firefox: 102.
  • Safari:‏ 14.1.

מקור

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

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

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

מקור

גישה לגופנים שמותקנים באופן מקומי

גרסה 103 של Chrome כוללת את Local Font Access API, שמאפשר גישה לגופנים שהותקנו באופן מקומי במכשיר של המשתמש. אחרי שמבקשים גישה לגופנים שמותקנים במכשיר, צריך לבצע קריאה ל-window.queryLocalFonts() כדי לקבל מערך של הגופנים שהותקנו.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console
.log(fontData.postscriptName);
  console
.log(fontData.fullName);
  console
.log(fontData.family);
  console
.log(fontData.style);
}

התכונה update של מדיה

גרסה 102 של Firefox כוללת את תכונת המדיה update. השדה הזה משמש לשליחת שאילתה כדי לבדוק אם מכשיר הפלט יכול לשנות את המראה של התוכן אחרי שהוא עבר עיבוד.

תמיכה בדפדפן

  • Chrome:‏ 113.
  • Edge:‏ 113.
  • Firefox: 102.
  • Safari: 17.

מקור

קוד מצב HTTP חדש - 103 רמזים מוקדמים

בגרסה 103 של Chrome הוספנו קוד סטטוס חדש – HTTP 103 – רמזים מוקדמים. אם השרת או ה-CDN יודעים שקבוצה מסוימת של משאבי משנה נדרשת כדי לטעון דף, הם יכולים להמליץ לדפדפן לבצע חיבור מראש למקורות או אפילו לטעון מראש משאבים כשהדף שדורש אותם מגיע. כדי ליהנות מהתכונה הזו, צריך לבצע עדכונים בשרת או ב-CDN. מידע נוסף על הנחיות מוקדמות

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

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

גרסאות הבטא החדשות שפורסמו באפריל היו Chrome 104,‏ Firefox 103 ו-Safari 16.

תחביר חדש לשאילתות מדיה בטווח

Chrome 104 כולל את התחביר החדש לשאילתות מדיה טווח, מהמפרט של רמה 4 של שאילתות מדיה. לדוגמה, שאילתה של מדיה שנכתבה בעבר כך:

@media (min-width: 400px) {  }

עכשיו אפשר לכתוב אותו כך:

@media (width >= 400px) {  }

תמיכה בדפדפן

  • Chrome:‏ 104.
  • קצה: 104.
  • Firefox: 102.
  • Safari: 16.4.

מקור

ממשק API לצילום אזור

גרסה 104 של Chrome למחשב כוללת גם את Region Capture API. כך תוכלו לחתוך ולמחוק תוכן מהסרטון שצילמתם לפני שתשתפו אותו.

גרסה 16 של Safari מוסיפה לדפדפן כמה תכונות מרכזיות

נראה ש-Safari 16 הוא עוד גרסה מלהיבה של צוות Safari. במהדורה הזו נוספו הרבה מהתכונות שכלולות ב-Interop 2022, ונהדר לראות שאנחנו מוסיפים כל כך הרבה תכונות באמצע השנה. אסקור כאן כמה מהתכונות האהובות עליי, אבל מומלץ לעיין בהערות המוצר כדי לקבל מידע נוסף.

כמו מפתחים רבים, אני שמח מאוד לראות תמיכה בשאילתות לגבי גודל ב-Container Queries. זו תכונה שגם היא זמינה כרגע ב-Chrome באמצעות דגל.

ב-Safari 16 יש גם תמיכה בערך subgrid עבור grid-template-columns ו-grid-template-rows. התכונה הזו כבר קיימת ב-Firefox, והיא נמצאת בפיתוח ב-Chrome. היא מאפשרת לגדלים של הטראקים ב-grid לעבור בירושה ל-grids בתצוגת עץ.

תמיכה בדפדפן

  • Chrome:‏ 117.
  • Edge:‏ 117.
  • Firefox: 71.
  • Safari: 16.

מקור

בפריסת רשת קיימת גם האפשרות להוסיף אנימציה למסלולי רשת.

תמיכה בדפדפן

  • Chrome: 107.
  • Edge:‏ 107.
  • Firefox: 66.
  • Safari: 16.

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

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

  • Chrome: 99.
  • Edge:‏ 99.
  • Firefox: 101.
  • Safari: 16.

מקור

טיפלנו גם בבעיות נגישות ב-display: contents, כך שאפשר להשתמש בתכונה השימושית הזו בבטחה בלי סכנה להסרת רכיבים מעץ הנגישות.

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

חלק מסדרת האתרים החדשה