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

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

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

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

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

  • Chrome: ‏ 67.
  • Edge: ‏ 79.
  • Firefox: 102.
  • Safari: ‏ 14.1.

מקור

זרמי בייטים לקריאה נתמכים עכשיו גם ב-Firefox 102, ומאפשרים להשתמש בקורא BYOB (Bring Your Own Buffer) באמצעות הממשק 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 רמזים מוקדמים

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

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

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

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

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

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

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

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

@media (width >= 400px) {  }

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

  • Chrome: ‏ 104.
  • Edge: ‏ 104.
  • Firefox: 102.
  • Safari: 16.4.

מקור

Region Capture 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 לעבור בירושה לרשתות בתצוגת עץ.

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

  • 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, כך שאפשר להשתמש בתכונה השימושית הזו בבטחה בלי סכנה להסרת רכיבים מעץ הנגישות.

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

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