יחידות חדשות של אזור תצוגה ב-CSS, ממשק API לניהול פרטי כניסה מאוחד, גופני COLRv1 עם משתנה ועוד.
אם לא צוין אחרת, השינויים שמתוארים בהמשך חלים על הגרסה החדשה ביותר של ערוץ בטא ב-Chrome ל-Android, ל-ChromeOS, ל-Linux, ל-macOS ול-Windows. אפשר לקבל מידע נוסף על התכונות שמפורטות כאן בקישורים המצורפים או מהרשימה ב-ChromeStatus.com. גרסה 108 של Chrome נמצאת בגרסת בטא נכון ל-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, ).vb
תמיכה ב-CSS break-after, break-before ו-break-inside
תמיכה במניעת ערך של מאפייני הפיצול ב-CSS break-before, break-after ו-break-inside בזמן הדפסה. הערך הזה מורה לדפדפן להימנע משיבושים לפני, אחרי או בתוך הרכיב שעליו הוא חל. לדוגמה, שירות ה-CSS הבא מונע פיצול של צורה במעבר דף.
figure {
break-inside: avoid;
}
התכונה הזו נוספה בעקבות הוספה של תמיכה בהדפסה ב-LayoutNG מגרסה 108 של Chrome.
יישור פריט הבסיס האחרון
התכונה הזו מאפשרת למפתחים ליישר פריטים בפריסת רשת או בפריסה גמישה לפי הבסיס האחרון שלהם, במקום הראשון. ניתן לעשות זאת באמצעות המאפיינים הבאים:
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
אירוע אחד (ContentVisibilityAutoStateChanged)
אירוע שמופעל ברכיב עם content-visibility: auto כשמצב הרינדור של הרכיב משתנה בגלל מאפיינים שהופכים את הרכיב לרלוונטי למשתמש.
במקרה כזה, מפתחים יכולים לקבל יותר שליטה על המועד שבו צריך להפסיק את הרינדור או להתחיל את העיבוד בתגובה להפסקת הרינדור או לתחילת העיבוד של עץ המשנה 'חשיפה לתוכן'. לדוגמה, יכול להיות שהמפתח ירצה להפסיק את העדכונים של React בעץ משנה שלא מרונדר על ידי הסוכן המשתמש. באופן דומה, ייתכן שהמפתח ירצה להפסיק כל עדכון אחר של הסקריפט (לדוגמה, עדכונים על קנבס) כאשר הסוכן המשתמש לא מעבד את הרכיב.
ממשקי API לאינטרנט
ניהול של פרטי כניסה מאוחדים (לשעבר WebID)
ה-Federated Credential Management API מאפשר למשתמשים להציג את הזהות המאוחדת שלהם כדי להתחבר לאתרים, באופן שתואם לשיפורים בפרטיות הדפדפן.
תוספים של מקור מדיה בעובדים
הפעלת השימוש ב-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
מעדכן את השיטות האסינכרוניות 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 של צבע COLRv1 נתמכים החל מגרסה 98 של Chrome, אבל בגרסה הראשונית הזו הייתה תמיכה רק בפונקציונליות סטטית של טבלת COLRv1. מפרט COLRv1 מגדיר שילוב עם וריאציות OpenType שמאפשר לשנות את מאפייני הגופן של הדרגות ולבצע שינויים באמצעות שינוי הפרמטרים של ציר המשתנה. השלב השני הזה מעניק תמיכה בווריאציות כאלה ל-COLRv1.
תוספי תנאים font-tech() ו-font-format() ל-CSS @supports
השימוש ב-font-tech() וב-font-format() יחד עם @supports של CSS מאפשר זיהוי של טכנולוגיית גופנים ותמיכה בפורמטים, ושיפור הדרגתי של התוכן. הדוגמאות הבאות לבדיקות תמיכה בגופני COLRv1.
@supports font-tech(color-COLRv1) {
}
תמיכה בפונקציה tech() במתאר @font-face src:
רמת גופנים 4 של CSS מספקת אמצעים נוספים לבחירה או לסינון של משאבי גופנים. הוספנו את הפונקציה tech(), שמאפשרת להעביר רשימה של טכנולוגיות גופנים שנדרשות כדי להפעיל את ה-blob המתאים של הגופנים. בהתאם לכך, סוכן המשתמש יבחר את המשאב המתאים הראשון.
Chrome ב-Android
מערכת Android OSK משנה עכשיו את גודל אזור התצוגה החזותי כברירת מחדל
כברירת מחדל, המקלדת שמופיעה במסך של Android משנה את הגודל של אזור התצוגה החזותי במקום הבלוק הראשוני שמכיל. מחברים יכולים לבטל את ההסכמה לכך באמצעות מפתח המטא-תצוגה החדש interactive-widget.
גרסאות מקור לניסיון
בגרסה הזו של Chrome יש שתי גרסאות מקור חדשות לניסיון.
זהות המוכר באירוע canmakepayment
אירוע של קובץ השירות (service worker) canmakepayment מאפשר למוכר לדעת אם למשתמש יש כרטיס באפליקציית תשלום מותקנת. הוא מעביר בחשאי את המקור של המוכר ונתונים שרירותיים אל קובץ שירות (service worker) ממקור של אפליקציית תשלומים. התקשורת הזו ממקורות שונים מתבצעת בבנייה של PaymentRequest ב-JavaScript. היא לא מחייבת תנועת משתמש ולא מציגה ממשק משתמש. אפשר להפעיל את תקופת הניסיון למפתחים להסרת שדות הזהות מהאירוע 'canmakepayment' דרך: chrome://flags/#clear-identity-in-can-make-payment. הפעלת סימון זה תגרום לריקון שדות הזהות באירוע "canmakepayment" (וב-Intent IS_READY_TO_PAY של Android).
ניתן לקבל מידע נוסף במאמר עדכון ההתנהגות של אירוע CanMakePayment ב-API של Payment Handler.
ממשק ה-API של 'מטמון לדף הקודם/הבא' לא שוחזר
ה-Not בארה"ב של הסיבה ידווח על רשימת הסיבות לכך שדף לא הוצג מ-BFcache במבנה עץ של מסגרות, דרך ה-PerformanceNavigationTiming API.
אפשר לחסום דפים במטמון לדף הקודם/הבא מסיבות שונות, כמו סיבות שנדרשות לפי המפרט או סיבות ספציפיות להטמעה של הדפדפן. מפתחים יכולים לאסוף את שיעור ההיט של BFCache באתר שלהם באמצעות הפרמטר הקבוע של handler של pageshow ו-PerformanceNavigationTiming.type(back-forward). ה-API הזה מאפשר לאתרים לאסוף מידע על הסיבה לכך שלא נעשה שימוש ב-BFCache בניווט של היסטוריית הגלישה, כדי שיוכלו לבצע פעולות מכל סיבה ולהתאים את BFCache לדף שלהם.
הוצאה משימוש והסרות
הגרסה הזו של Chrome מציגה את ההסרות וההוצאה משימוש המפורטות בהמשך. בכתובת ChromeStatus.com אפשר למצוא רשימות של הוצאה משימוש מתוכננות, יצאו משימוש כרגע והסרות קודמות.
הוצאה משימוש
בגרסה הזו של Chrome מוציאים משימוש תכונה אחת.
הוצאה משימוש והסרה של window.defaultStatus ושל window.defaultstatus
אלו ממשקי API לא סטנדרטיים שלא מוטמעים על ידי כל הדפדפנים ואין להם השפעה על התנהגות הדפדפן. הפעולה הזו מסירה אותם ומסירה אות אפשרי ליצירה של טביעת אצבע דיגיטלית.
במקור הם שימשו לשינוי/שליטה בטקסט "שורת הסטטוס" בתחתית חלונות הדפדפן. עם זאת, מעולם לא הייתה להם השפעה בפועל על שורת הסטטוס של Chrome, והם לא מאפיינים סטנדרטיים. Gecko לא תמכה במאפיינים האלה מגרסה 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() עקב כשלי עיצוב שדווחו על ידי מפתחים. compute() התנהגותה כמעט זהה לזו של מעבריגה (()), אבל במקום להשתמש בפרמטר חובה Promise, נדרש פונקציית handler אופציונלית שמחזירה Promise. כך הדפדפן יכול לקבוע מתי ה-handler יופעל. האפשרות הזו מאוחרת יותר ואינטואיטיבית יותר מאשר במצב transitionWhile().
הסרת googIPv6 של WebRTC mediaConstraint
ניתן להשתמש ב-"googIPv6: false" כדי להשבית את התמיכה ב-IPv6 ב-WebRTC, כמו בדוגמה הבאה.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 פועל כברירת מחדל במשך שנים רבות, ואין לנו אפשרות להשבית אותו. זהו API מדור קודם שלא קיים במפרט.