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

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

Rachel Andrew

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

באוקטובר, Firefox 106, Chrome 107 ו-Safari 16.1 התייצבו. נבחן את המשמעות מבחינת פלטפורמת האינטרנט.

אנימציה של מסלולי רשת

הודות למאמצים של תורמי התוכן ב-Microsoft, עכשיו Chrome יכול לשלב ערכים של grid-template-columns ו-grid-template-rows. כלומר, פריסות רשת יכולות לעבור בצורה חלקה בין מצבים, במקום להצמיד אותם באמצע האנימציה או המעבר.

תוספות לחשבון getDisplayMedia()

בנוסף, ב-Chrome יש כמה תוספות ל-getDisplayMedia() שמטרתן למנוע שיתוף יתר מקרי בזמן שיתוף מסך.

• האפשרות displaySurface יכולה לציין שאפליקציית האינטרנט מעדיפה להציע סוג ספציפי של משטח תצוגה (כרטיסיות, חלונות או מסכים).
• האפשרות surfaceSwitching מציינת אם Chrome יאפשר למשתמש לעבור באופן דינמי בין כרטיסיות משותפות.
• אפשר להשתמש באפשרות selfBrowserSurface כדי למנוע מהמשתמש לשתף את הכרטיסייה הנוכחית. כך אפשר להימנע מאפקט "היכל המראות".
• האפשרות systemAudio מבטיחה ש-Chrome יציע תיעוד אודיו רלוונטי בלבד למשתמש.

ב-Safari 16.1 יש גם תמיכה ב-getDisplayMedia, והוספת תמיכה בצילום של חלון Safari ספציפי.

בדיקת תמיכה בטכנולוגיית גופנים ובתכונות של CSS

Firefox הוסיף את הפונקציות font-tech() ו-font-format() להצגת שאילתות עם @supports. הבדיקות הבאות לדוגמה לתמיכה בגופני COLRv1.

@supports font-tech(color-COLRv1) {

}

דוגמאות נוספות זמינות ב-MDN.

גלילה למקטע טקסט

ב-Safari 16.1 יש תמיכה בתכונה גלילה למקטע טקסט, שמוסיפה תמיכה בניווט לכתובת URL שבה צוין מקטע טקסט מסוים.

תמיכה ב-AVIF

ב-Safari 16 יש תמיכה בתמונות AVIF סטטיות, וב-Safari 16.1 יש תמיכה בתמונות AVIF עם אנימציה ב-macOS Ventura, iOS 16 וב-iPadOS 16.

Web Push ל-Safari

Safari בגרסה 16.1 כולל תמיכה ב-Web Push ב-Safari ב-macOS Ventura. האפשרות הזו משתמשת ב-Push API וב-Notification API. תוכלו לקרוא מידע נוסף על כך במאמר Meet Web Push. נחיתה של Web Push ב-Safari מעידה שעכשיו היא זמינה בכל שלושת המנועים העיקריים.

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

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

ב-Chrome 108 יש תמיכה בערך avoid של מאפייני הפיצול של CSS break-before, break-after ו-break-inside במהלך ההדפסה. הערך הזה מורה לדפדפן להימנע ממעבר לפני, אחרי או בתוך הרכיב שעליו הוא חל. לדוגמה, שירות ה-CSS הבא מונע ניתוק של דמות במעבר דף.

figure {
    break-inside: avoid;
}

בגרסה 108 של Chrome נשיק שינוי באופן הפעולה של 'אפשרויות נוספות' ברכיבים שהוחלפו. השינוי הזה עשוי לגרום לשינויים חזותיים בנסיבות מסוימות. לקבלת פרטים נוספים וכדי לראות איך לפתור בעיות שאתם רואים, מומלץ לקרוא את המאמר שינוי בגלישה ברכיבים מוחלפים ב-CSS.

חל שינוי באופן הפעולה של Layout Viewport ב-Chrome ב-Android, כאשר המקלדת שמופיעה במסך מוצגת. מידע נוסף זמין במאמר הכנה לשינויים בהתנהגות של גודל אזור התצוגה שצפויים בקרוב ב-Chrome ב-Android, כדי לקבל מידע נוסף על הדרכים להתכונן ליציבות של המשלוח בחודש הבא.

יש גם ב-Chrome יחידות אזור התצוגה החדשות של CSS. הערכים האלה כוללים יחידות קטנות (svw, svh, svi, svb, svmin, svmax), גדולות (lvw, lvh, lvi, lvb, lvmin, lvmax), דינמיות (dvw, dvh, dvi, dvb, dvmin, dvmax) ויחידות לוגיות (vi, {19.vb יחידות אלה כבר מיושמות ב-Firefox וב-Safari.

Firefox 107 מאפשר תמיכה בגופנים מסוג COLRv1 ומצטרף ל-Chrome בתמיכה בטכנולוגיית הגופנים הזו. גרסת Chrome 108 מוסיפה תמיכה בפונקציות font-tech() ו-font-format() גם לגופנים, כדי להציג שאילתות עם @supports.

Firefox גם מוסיף תמיכה ב-contain-intrinsic-size ומצטרף ל-Chrome כדי ליצור שני דפדפנים עם תמיכה בתכונה הזו.

Safari 16.2 Beta כולל כמה תיקוני CSS, כולל שינוי גודל והצמדת גלילה.

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