תכונות מעניינות שנוספו לדפדפני אינטרנט בגרסת בטא ובגרסה יציבה במהלך אוקטובר 2022.
גרסאות יציבות של דפדפנים
באוקטובר, הגרסאות 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.
התראות Push מהאינטרנט ל-Safari
ב-Safari 16.1 יש תמיכה ב-Web Push ב-Safari ב-macOS Ventura. לשם כך נעשה שימוש ב-Push API וב-Notifications API. מידע נוסף זמין במאמר מידע על 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 מתחילה ההשקה של שינוי בהתנהגות של רכיבים מוחלפים בזמן הצפה. השינוי הזה עלול לגרום לשינויים חזותיים בנסיבות מסוימות. במאמר שינוי ב-overflow על רכיבים שהוחלפו ב-CSS מוסבר בהרחבה איך לטפל בבעיות שעשויות להופיע.
יש שינוי בהתנהגות של חלון התצוגה של הפריסה ב-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
, vb
). היחידות האלה כבר מוטמעות ב-Firefox וב-Safari.
ב-Firefox 107 הופעלה תמיכה בגופנים מסוג COLRv1, והוא מצטרף ל-Chrome בתמיכה בטכנולוגיית הגופנים הזו. בנוסף, בגופנים, ב-Chrome 108 נוספה תמיכה בפונקציות font-tech()
ו-font-format()
כדי להציג שאילתות עם @supports
.
גם דפדפן Firefox תומך ב-contain-intrinsic-size
, כך ש-Chrome ודפדפן Firefox הם שני הדפדפנים עם תמיכה בתכונה הזו.
גרסה 16.2 בטא של Safari כוללת כמה תיקונים ל-CSS, כולל שינוי גודל ונעילה בזמן גלילה.
חלק מהסדרה חדשות באינטרנט