יחידות תצוגה חדשות של CSS, ממשק API לניהול פרטי כניסה מאוחד, גופן COLRv1 משתנה ועוד.
אם לא צוין אחרת, השינויים שמתוארים בהמשך חלים על הגרסה החדשה ביותר של ערוץ הבטא של Chrome ל-Android, ל-ChromeOS, ל-Linux, ל-macOS ול-Windows. אפשר לקבל מידע נוסף על התכונות המפורטות כאן באמצעות הקישורים המצורפים או מהרשימה ב-ChromeStatus.com. Chrome 108 בגרסת בטא החל מ-27 באוקטובר 2022. אפשר להוריד את הגרסה העדכנית ביותר מ-Google.com למחשב, או מחנות Google Play ב-Android.
CSS
Chrome 108 כולל כמה תכונות CSS חדשות.
אפשרויות ב-CSS עבור רכיבים שהוחלפו
אנחנו מתחילים להשיק ב-Chrome שינוי שיאפשר למפתחים להשתמש בנכס overflow הקיים עם רכיבים מוחלפים שצבועים מחוץ לתיבת התוכן. בשילוב עם object-view-box אפשר להשתמש בו כדי ליצור תמונה עם זוהר או צללית מותאמים אישית, עם התנהגות מתאימה של גלישת דיו כמו צללית של CSS.
מדובר בשינוי שעלול לגרום לכשל. מידע נוסף זמין במאמר שינוי באפשרויות הנוספות של רכיבים שהוחלפו.
יחידות תצוגה קטנות, גדולות, דינמיות ולוגיות
העלייה הזו מוסיפה תמיכה ביחידות קטנות (svw, svh, svi, svb, svmin, svmax), גדולות (lvw, lvh, lvi, lvb, lvmin, lvmax), דינמיות (dvw, dvh, dvi, dvb, dvmin, dvmax) יחידות לוגיות (vi, vi, }vb
התמיכה של שירותי ה-CSS: break-after, break-before ו-break-inside
תמיכה בערך הנמנע של מאפייני המקטעים ב-CSS break-before, break-after ו-break-inside בזמן ההדפסה. הערך הזה מורה לדפדפן למנוע תקלות לפני, אחרי או בתוך הרכיב שעליו הוא חל. לדוגמה, שירות ה-CSS הבא מונע מספר שבור שמופיע במעבר דף.
figure {
break-inside: avoid;
}
התכונה הזו נוספה כי בגרסה 108 של Chrome נוספה תמיכה בהדפסת LayoutNG.
התאמה של פריט הבסיס האחרון
התכונה הזו מאפשרת למפתחים ליישר פריטים בפריסת רשת גמישה או בפריסת רשת לפי ערך הבסיס האחרון, במקום בפריסה הראשונה. אפשר לעשות זאת באמצעות המאפיינים (properties) הבאים:
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
אירוע אחד (ContentVisibilityAutoStateChanged)
אירוע שמופעל על רכיב עם content-visibility: auto כשמצב הרינדור של הרכיב משתנה בגלל מאפיין כלשהו שבזכותו הרכיב רלוונטי למשתמש.
במקרה כזה, המפתחים יכולים לקבוע מתי להפסיק או להתחיל את הרינדור בתגובה לעוצר הסוכן המשתמש או להתחלת העיבוד של עץ המשנה חשיפה לתוכן. לדוגמה, יכול להיות שהמפתח ירצה להפסיק את העדכונים של React בעץ משנה שלא עובר רינדור על ידי סוכן המשתמש. באופן דומה, ייתכן שהמפתח ירצה להפסיק עדכונים אחרים של הסקריפט (לדוגמה, עדכונים של לוח הציור) כאשר סוכן המשתמש לא יבצע רינדור של הרכיב.
ממשקי API לאינטרנט
ניהול מאוחד של פרטי כניסה (לשעבר WebID)
Fedeated Credential Management API מאפשר למשתמשים להעביר את הזהות המאוחדת שלהם כדי להתחבר לאתרים באופן שתואם לשיפור הפרטיות בדפדפן.
תוספי מקור מדיה ב-Works
הפעלת השימוש ב-API של תוספי מקור מדיה (MSE) מהקשרי DedicatedWorker כדי לשפר את הביצועים של אגירת המדיה לצורך הפעלה על ידי HTMLMediaElement בהקשר של החלון הראשי. בזמן היצירה של אובייקט MediaSource בהקשר של DedicatedWorker, האפליקציה עשויה לקבל ממנו MediaSourceHandle ולהעביר את הכינוי הזה ל-thread הראשי לצורך צירוף ל-HTMLMediaElement. ההקשר שיצר את אובייקט MediaSource עשוי להשתמש בו לאחר מכן למאגר נתונים זמני של מדיה.
Sec-CH-Prefers-Reduced-Motion כותרת רמזים של לקוח לתכונות מדיה של העדפות משתמש
כותרות של רמזים ללקוחות לגבי תכונות מדיה של העדפת משתמש מגדירה קבוצה של כותרות רמזים של לקוח HTTP סביב תכונות מדיה של העדפת משתמש, כפי שהוגדרו על ידי שאילתות מדיה ברמה 5. אם נעשה בהן שימוש כרמזים קריטיים ללקוח, הכותרות האלה מאפשרות לשרתים לקבל החלטות חכמות לגבי, למשל, הטמעה של CSS. Sec-CH-Prefers-Reduced-Motion משקף את ההעדפה prefers-reduced-motion של המשתמש.
קוראי WebTransport BYOB
תמיכה בקוראי BYOB(bring-your-own-buffer) ל-WebTransport כדי לאפשר קריאה למאגר נתונים זמני שמסופק על ידי המפתח. קוראי BYOB יכולים למזער את העותקים של מאגר הנתונים הזמני ולהפחית את הקצאות הזיכרון.
תווים כלליים לחיפוש במקורות של מדיניות ההרשאות
במפרט של מדיניות ההרשאות מוגדר מנגנון שמאפשר למפתחים להפעיל ולהשבית את השימוש בתכונות דפדפן שונות וממשקי API שונים. אחת מהיכולות של המנגנון הזה מאפשרת להפעיל תכונות רק במקורות שצוינו באופן מפורש (למשל, https://foo.com/). המנגנון הזה לא גמיש דיו לעיצוב של חלק מרשתות ה-CDN, שמספקות תוכן דרך מקור שעשוי להתארח באחד ממאות תת-דומיינים אפשריים.
לכן, התכונה הזו מוסיפה תמיכה בתווים כלליים לחיפוש במדיניות הרשאות כמו SCHEME://*.HOST:PORT (לדוגמה, https://*.foo.com/) שבהם ניתן ליצור מקור חוקי מ-SCHEME://HOST:PORT (לדוגמה, https://foo.com/). כדי לעשות את זה, צריך לציין ש-HOST הוא דומיין שניתן לרשום. המשמעות היא ש-https://*.bar.foo.com/ פועל אבל https://*.com/ לא (אם ברצונך לאפשר לכל הדומיינים להשתמש בתכונה, עליך רק להעניק גישה אל *).
שיטות סנכרון של AccessHandles ב-File System Access API
עדכון ה-methods האסינכרוניות flush(), getSize() ו-truncate() ב-FileSystemSyncAccessHandle ב-File System Access API ל-methods סינכרוניות.
ב-FileSystemSyncAccessHandle יש כרגע שילוב של שיטות סנכרון ואסינכרוניות, מה שפוגע בביצועים ובנוחות השימוש, במיוחד לאפליקציות שמניידות את C/C++ ל-Wasm. העדכון הזה יאפשר עקביות בשימוש ב-API וישפר את הביצועים של ספריות שמבוססות על Wasm.
מדובר בשינוי שעלול לגרום לכשל. מידע נוסף זמין במאמר שינוי תוכנה שעלול לגרום לכשלים: שיטות סנכרון ל-AccessHandles.
ממשק משתמש מותנה של WebAuthn
ממשק משתמש מותנה ל-WebAuthn נתמך ב-Windows 22H2 ואילך, ב-macOS וב-Android P ואילך. גם ממשק המשתמש של WebAuthn בפלטפורמות למחשבים עבר רענון.
משתנה COLRv1 וזיהוי תכונות של גופנים
תמיכה בגופנים של משתנה COLRv1
גופני וקטור צבע של COLRv1 נתמכים החל מגרסה Chrome 98, אבל הגרסה הראשונית הזו תומכת רק בפונקציונליות סטטית של הטבלה COLRv1. מפרט COLRv1 מגדיר שילוב עם וריאציות OpenType שמאפשר לשנות מאפייני גופנים של שיפועים וטרנספורמציות על ידי שינוי פרמטרים של ציר המשתנים. השלב השני הזה תומך בווריאציות כאלה ב-COLRv1.
תוספי תנאי font-tech() ו-font-format() ל-CSS @supports
השימוש ב-font-tech() וב-font-format() יחד עם @support של CSS מאפשר זיהוי של טכנולוגיית גופנים ותמיכה בפורמט, ושיפור הדרגתי של התוכן. בדוגמאות הבאות מתבצעת בדיקה של תמיכה בגופני COLRv1.
@supports font-tech(color-COLRv1) {
}
תמיכה בפונקציה tech() במתאר @font-face src:
גופן CSS ברמה 4 מספק אמצעים נוספים לבחירה או לסינון של משאבי גופנים. הוספנו את הפונקציה tech(), שמאפשרת להעביר רשימה של טכנולוגיות גופנים שנדרשות כדי לפעול בהתאם ל-blob של הגופן הזה. בהתאם לכך, סוכן המשתמש יבחר את המשאב המתאים הראשון.
Chrome ב-Android
מערכת Android OSK משנה עכשיו את הגודל של אזור התצוגה החזותי כברירת מחדל
המקלדת שמופיעה במסך של Android משנה כברירת מחדל את אזור התצוגה החזותי ולא את הבלוק הראשוני שמכיל את התוכן. סופרים יכולים לבטל את ההסכמה לשימוש בתכונה הזו באמצעות מפתח המטא-אזור החדש interactive-widget.
גרסאות מקור לניסיון
לגרסה הזו של Chrome יש שתי גרסאות מקור לניסיון חדשות.
זהות המוכר באירוע canmakepayment
האירוע canmakepayment של קובץ השירות (service worker) מאפשר למוכר לדעת אם יש כרטיס ששמור למשתמש באפליקציית תשלומים מותקנת. היא מעבירה באופן שקט את המקור של המוכר ונתונים שרירותיים אל קובץ שירות (service worker) מהמקור של אפליקציית התשלומים. התקשורת בין מקורות זו מתרחשת בבניית PaymentRequest ב-JavaScript, לא מחייבת תנועת משתמש ולא מציגה ממשק משתמש. תקופת הניסיון למפתחים להסרת שדות הזהות מ-'canmakepayment' ניתן להפעיל את האירוע באמצעות: chrome://flags/#clear-identity-in-can-make-payment. הפעלת הסימון הזה תגרום לריקון שדות הזהות ב-'canmakepayment' אירוע (ו-Intent IS_READY_TO_PAY ב-Android).
מידע נוסף זמין במאמר עדכון בהתנהגות האירועים של CanMakePayment ב-Payment Handler API.
מטמון לדף הקודם/הבא NotRestoreReason API
ה-NotRestoreReason API ידווח על רשימת הסיבות לכך שדף לא מוצג מ-BFcache במבנה עץ מסגרת, באמצעות PerformanceNavigationTiming API.
ניתן לחסום דפים מהמטמון לדף הקודם/הבא מסיבות שונות, כמו סיבות הנדרשות לפי המפרט וסיבות ספציפיות להטמעת הדפדפן. מפתחים יכולים לאסוף את שיעור ההיטים של BFCache באתר שלהם באמצעות הפרמטר הקבוע של ה-handler של pageshow ו-PerformanceNavigationTiming.type(back-forward). ה-API הזה מאפשר לאתרים לאסוף מידע על הסיבה לכך שלא נעשה שימוש ב-BFCache בניווט בהיסטוריה, כדי שיוכלו לנקוט פעולות על כל סיבה ולהתאים את BFCache של הדף שלהם.
הוצאה משימוש והסרות
הגרסה הזו של Chrome מציגה את ההוצאה משימוש וההסרות שמפורטות בהמשך. אפשר להיכנס לכתובת ChromeStatus.com כדי לקבל רשימה של מקרי הוצאה משימוש מתוכננות, הוצאת משימוש בפועל והסרות קודמות.
הוצאה משימוש
גרסה זו של Chrome מוציאה משימוש תכונה אחת.
הוצאה משימוש והסרה של window.defaultStatus ושל window.defaultstatus
אלו ממשקי API לא סטנדרטיים שלא מוטמעים בכל הדפדפנים, ואין להם השפעה על התנהגות הדפדפנים. כך הם נמחקים ומסירים אות פוטנציאלי ליצירה של טביעת אצבע דיגיטלית (fingerprinting).
במקור הם שימשו לשינוי/שליטה ב'שורת הסטטוס' טקסט בחלק התחתון של חלונות הדפדפן. עם זאת, מעולם לא הייתה להם השפעה בפועל על שורת הסטטוס של Chrome, והם לא מאפיינים סטנדרטיים. שממית לא תומכת במאפיינים האלה מאז גרסה 23. WebKit עדיין תומך במאפיינים האלה. המאפיין window.status הקשור הוא סטנדרטי, אבל גם אסור שתהיה לו השפעה על שורת הסטטוס של החלון.
שירותי הובלה
בגרסה הזו של Chrome הוסרו ארבע תכונות.
הסרה של ImageDecoderInit.premultiplyAlpha
לתכונה אין השפעות גלויות בתרחישים לדוגמה ראשוניים, אבל היא עשויה להגביל הטמעות בדרכים לא אופטימליות. לתיאור מפורט יותר, אפשר לעיין בבעיה הזו. בהתאם להסכמה של עורכי המפרט של WebCodecs ושל חוסר שימוש (0.000000339% - 0.00000687% מטעינות הדפים לכל מונה שימוש ב-M106).
הסרה של navigateEvent.restoreScroll()
restoreScroll() מוחלף/ת ב-navigateEvent.scroll(). scroll() פועל באופן זהה, למעט שהוא מאפשר למפתח לשלוט בתזמון הגלילה בניווטים שאינם מעברי (scroll() פועל כשהגלילה היא לא שחזור, ולכן שינוי השם יחד עם השינוי בהתנהגות).
הסרה של navigateEvent.transitionWhile()
הגרסה של transitionWhile() תוחלף באפליקציה navigateEvent.intercept() עקב פגמים בעיצוב שמפתחים דיווחו עליה. הפונקציה יירט() פועלת באופן כמעט זהה ל-conversion ולספק(), אבל במקום לקחת פרמטר Promise שנדרש, היא משתמשת בפונקציית handler אופציונלית שמחזירה Promise. ההגדרה הזו מאפשרת לדפדפן לקבוע מתי ה-handler יפעל. פעולה זו מאוחרת ואינטואיטיבית יותר מה-handler של transitionWhile().
הסרת googIPv6 של WebRTC mediaConstraint
ניתן להשתמש ב-"googIPv6: false" כדי להשבית את התמיכה ב-IPv6 ב-WebRTC, כמו בדוגמה הבאה.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 מופעל כברירת מחדל במשך שנים רבות, ולא נוכל להשבית אותו. זהו API מדור קודם שלא קיים במפרט.