หน่วยวิวพอร์ต CSS ใหม่, API การจัดการข้อมูลเข้าสู่ระบบแบบรวมศูนย์, แบบอักษร COLRv1 แบบตัวแปร และอื่นๆ
การเปลี่ยนแปลงที่อธิบายไว้ด้านล่างจะมีผลกับ Chrome เวอร์ชันเบต้าใหม่ล่าสุดสำหรับ Android, ChromeOS, Linux, macOS และ Windows เว้นแต่จะระบุไว้เป็นอย่างอื่น เรียนรู้เพิ่มเติมเกี่ยวกับฟีเจอร์ที่แสดงรายการไว้ที่นี่ผ่านลิงก์ที่ให้ไว้หรือจากรายการใน ChromeStatus.com Chrome 108 เป็นเวอร์ชันเบต้าตั้งแต่วันที่ 27 ตุลาคม 2022 คุณดาวน์โหลดเวอร์ชันล่าสุดได้จาก Google.com สำหรับเดสก์ท็อปหรือ Google Play Store ใน Android
CSS
Chrome 108 มีฟีเจอร์ CSS ใหม่ๆ มากมาย
CSS Overflow สำหรับองค์ประกอบที่ถูกแทนที่
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;
}
มีการเพิ่มฟีเจอร์นี้เนื่องจาก Chrome 108 เพิ่มการรองรับการพิมพ์ LayoutNG
การจัดข้อความรายการพื้นฐานล่าสุด
ฟีเจอร์นี้ช่วยให้นักพัฒนาแอปสามารถจัดเรียงรายการภายในเลย์เอาต์แบบยืดหยุ่นหรือแบบตารางกริดตามเส้นฐานล่าสุด แทนที่จะเป็นแบบแรก โดยทําผ่านพร็อพเพอร์ตี้ต่อไปนี้
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
ContentVisibilityAutoStateChanged เหตุการณ์
เหตุการณ์ที่เริ่มทำงานในองค์ประกอบที่มี content-visibility: auto เมื่อสถานะการแสดงผลขององค์ประกอบมีการเปลี่ยนแปลงเนื่องจากแอตทริบิวต์ที่ทำให้องค์ประกอบดังกล่าวเกี่ยวข้องกับผู้ใช้
กรณีการใช้งานนี้มีไว้เพื่อให้นักพัฒนาแอปควบคุมได้มากขึ้นว่าจะหยุดหรือเริ่มแสดงผลเมื่อใดเพื่อตอบสนองต่อ User Agent ที่หยุดหรือการเริ่มแสดงผลของแผนผังย่อยที่มองเห็นได้ เช่น นักพัฒนาซอฟต์แวร์อาจต้องการหยุดการอัปเดต React ในแผนผังย่อยที่ไม่ได้แสดงผลโดย User Agent ในทำนองเดียวกัน นักพัฒนาซอฟต์แวร์อาจต้องการหยุดการอัปเดตสคริปต์อื่นๆ (เช่น การอัปเดต Canvas) เมื่อ User Agent ไม่แสดงผลองค์ประกอบ
API ของเว็บ
การจัดการการรับรองแบบรวมศูนย์ (เดิมคือ WebID)
Federated Credential Management API ช่วยให้ผู้ใช้นำข้อมูลประจำตัวแบบรวมศูนย์ของตนมาเข้าสู่ระบบเว็บไซต์ในลักษณะที่เข้ากันได้กับการปรับปรุงความเป็นส่วนตัวของเบราว์เซอร์
ส่วนขยายแหล่งที่มาของสื่อในผู้ปฏิบัติงาน
เปิดใช้งานการใช้ API ของ Media Source Extensions (MSE) จากบริบท DedicatedWorker เพื่อปรับปรุงประสิทธิภาพในการบัฟเฟอร์สื่อสำหรับการเล่นโดย HTMLMediaElement ในบริบทของ Windows หลัก การสร้างออบเจ็กต์ MediaSource ในบริบท DedicatedWorker อาจทำให้แอปพลิเคชันได้รับ MediaSourceHandle แล้วโอนแฮนเดิลนั้นไปยังเทรดหลักเพื่อใช้ในการแนบ HTMLMediaElement บริบทที่สร้างออบเจ็กต์ MediaSource อาจใช้ในการบัฟเฟอร์สื่อ
Sec-CH-Prefers-Reduced-Motion ส่วนหัวคำแนะนำของไคลเอ็นต์สำหรับฟีเจอร์สื่อค่ากำหนดของผู้ใช้
ส่วนหัวคำแนะนำไคลเอ็นต์สำหรับฟีเจอร์สื่อที่ต้องการของผู้ใช้จะกำหนดชุดส่วนหัวคำแนะนำไคลเอ็นต์ HTTP รอบๆ ฟีเจอร์สื่อค่ากำหนดของผู้ใช้ ตามที่กำหนดโดยคำค้นหาสื่อระดับ 5 หากใช้เป็น Critical Client Hints ส่วนหัวเหล่านี้จะช่วยให้เซิร์ฟเวอร์เลือกทางเลือกต่างๆ ได้อย่างชาญฉลาด เช่น CSS Ininline Sec-CH-Prefers-Reduced-Motion แสดงค่ากำหนด prefers-reduced-motion ของผู้ใช้
ผู้อ่าน BYOB ของ WebTransport
รองรับเครื่องอ่าน 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 เป็นเมธอดแบบซิงโครนัส
ปัจจุบัน FileSystemSyncAccessHandle มีทั้งวิธีการซิงค์และอะซิงโครนัส ซึ่งขัดขวางประสิทธิภาพและความสามารถในการใช้งาน โดยเฉพาะสำหรับแอปพลิเคชันที่พอร์ต C/C++ ไปเป็น Wasm การอัปเดตนี้จะทำให้การใช้งาน API มีความสอดคล้องกันและปรับปรุงประสิทธิภาพสำหรับไลบรารีที่ใช้ Wasm ด้วย
การเปลี่ยนแปลงนี้อาจเป็นการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบ อ่านข้อมูลเพิ่มเติมได้ในการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบ: วิธีการซิงค์สำหรับ AccessHandles
UI แบบมีเงื่อนไขของ WebAuthn
UI แบบมีเงื่อนไขสำหรับ WebAuthn ใช้ได้ใน Windows 22H2 ขึ้นไป, macOS และ Android P ขึ้นไป นอกจากนี้ยังมีการรีเฟรช UI WebAuthn บนแพลตฟอร์มเดสก์ท็อปด้วย
การตรวจหาแบบอักษรและฟีเจอร์แบบอักษร COLRv1
รองรับแบบอักษร COLRv1
แบบอักษรเวกเตอร์สี COLRv1 ได้รับการสนับสนุนตั้งแต่ Chrome 98 แต่รุ่นแรกนี้รองรับเฉพาะฟังก์ชันการทำงานแบบคงที่ของตาราง COLRv1 ข้อกำหนด COLRv1 กำหนดการผสานรวมกับรูปแบบ OpenType ซึ่งอนุญาตให้แก้ไขคุณสมบัติแบบอักษรของการไล่ระดับสีและการเปลี่ยนรูปแบบด้วยการเปลี่ยนพารามิเตอร์แกนตัวแปร ขั้นตอนที่ 2 นี้จะรองรับรูปแบบดังกล่าวกับ COLRv1
ส่วนขยายเงื่อนไข font-tech() และ font-format() รายการไปยัง CSS @supports
การใช้ font-tech() และ font-format() ร่วมกับ CSS @supports จะช่วยให้ตรวจจับเทคโนโลยีแบบอักษรและการรองรับรูปแบบได้ รวมถึงการเพิ่มประสิทธิภาพเนื้อหาแบบต่อเนื่อง ตัวอย่างต่อไปนี้คือการทดสอบการรองรับแบบอักษร COLRv1
@supports font-tech(color-COLRv1) {
}
การรองรับฟังก์ชัน tech() ในข้อบ่งชี้ @font-face src:
CSS Fonts ระดับ 4 เป็นวิธีเพิ่มเติมในการเลือกหรือกรองทรัพยากรแบบอักษร เปิดตัวฟังก์ชัน tech() ซึ่งช่วยให้ส่งรายการเทคโนโลยีแบบอักษรที่ BLOB แบบอักษรที่เกี่ยวข้องนี้ต้องใช้ในการทำงาน User Agent จะเลือกทรัพยากรที่เหมาะสมรายการแรก
Chrome บน Android
ขณะนี้ Android OSK ปรับขนาดวิวพอร์ตภาพโดยค่าเริ่มต้น
แป้นพิมพ์บนหน้าจอของ Android ปรับขนาดวิวพอร์ตภาพโดยค่าเริ่มต้นแทนบล็อกแรกที่มี ผู้เขียนสามารถเลือกไม่ใช้การตั้งค่านี้ได้โดยใช้คีย์เมตาวิวพอร์ตของ interactive-widget ใหม่
ช่วงทดลองใช้จากต้นทาง
Chrome รุ่นนี้มีการทดลองใช้ต้นทางใหม่ 2 รายการ
ข้อมูลระบุตัวตนของผู้ขายในเหตุการณ์ canmakepayment
เหตุการณ์ Service Worker ของ canmakepayment ช่วยให้ผู้ขายทราบว่าผู้ใช้มีบัตรอยู่ในแอปการชำระเงินที่ติดตั้งไว้หรือไม่ ซึ่งจะส่งข้อมูลต้นทางและข้อมูลที่กําหนดเองของผู้ขายไปยัง Service Worker จากต้นทางของแอปการชำระเงินโดยไม่มีการแจ้งเตือน การสื่อสารข้ามต้นทางนี้จะเกิดขึ้นเมื่อมีการสร้าง PaymentRequest ใน JavaScript ไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้ และไม่แสดงอินเทอร์เฟซผู้ใช้ การทดลองของนักพัฒนาแอปสำหรับการนำช่องข้อมูลประจำตัวออกจาก "canmakepayment" สามารถเปิดใช้กิจกรรมผ่าน: chrome://flags/#clear-identity-in-can-make-payment การเปิดใช้งาน Flag นี้จะทำให้ช่องข้อมูลประจำตัวใน "canmakepayment" ว่างเปล่า เหตุการณ์ (และ IS_READY_TO_PAY Intent ของ Android)
ดูข้อมูลเพิ่มเติมในการอัปเดตลักษณะการทำงานของเหตุการณ์ CanMakePayment ของ Payment Handler API
Back-Forward Cache NotRestoredReason API
NotRestoredReason API จะรายงานรายการเหตุผลที่หน้าเว็บไม่แสดงผลจาก BFcache ในโครงสร้างเฟรมแบบต้นไม้ผ่าน Performance NavigationTiming API
หน้าต่างๆ อาจถูกบล็อกจาก BFcache ด้วยเหตุผลต่างๆ เช่น เหตุผลตามที่กำหนดและเหตุผลที่เกี่ยวข้องกับการใช้งานเบราว์เซอร์โดยเฉพาะ นักพัฒนาซอฟต์แวร์สามารถรวบรวมอัตรา Hit ของ BFCache บนเว็บไซต์ของตนโดยใช้พารามิเตอร์ของตัวแฮนเดิลการแสดงหน้าเว็บที่มีอยู่และ PerformanceNavigationTiming.type(back-forward) API นี้ช่วยให้เว็บไซต์รวบรวมข้อมูลเหตุผลที่ไม่ใช้ BFCache ในการนำทางตามประวัติได้ เพื่อให้เว็บไซต์ดำเนินการกับเหตุผลแต่ละข้อและทำให้หน้าเว็บเข้ากันได้กับ BFCache
การเลิกใช้งานและการนำออก
Chrome เวอร์ชันนี้แนะนำการเลิกใช้งานและการนำออกตามที่ระบุไว้ด้านล่าง ไปที่ ChromeStatus.com เพื่อดูรายการการเลิกใช้งานที่วางแผนไว้ การเลิกใช้งานปัจจุบัน และการนำออกก่อนหน้านี้
การเลิกใช้งาน
Chrome รุ่นนี้เลิกใช้งานฟีเจอร์เดียว
เลิกใช้งานและนำ window.defaultStatus และ window.defaultstatus ออก
API เหล่านี้คือ API ที่ไม่ได้มาตรฐานและไม่ได้เปิดใช้งานโดยเบราว์เซอร์ทั้งหมด และไม่มีผลต่อการทำงานของเบราว์เซอร์ ซึ่งจะเป็นการทำความสะอาดและลบสัญญาณฟิงเกอร์ปรินต์ที่อาจเกิดขึ้น
เดิมทีมีการใช้ไอคอนเหล่านี้เพื่อแก้ไข/ควบคุม "แถบสถานะ" ที่ด้านล่างของหน้าต่างเบราว์เซอร์ อย่างไรก็ตาม แท็กดังกล่าวไม่เคยส่งผลกระทบใดๆ ต่อแถบสถานะของ Chrome และไม่ใช่แอตทริบิวต์ที่เป็นมาตรฐาน Gecko ไม่สนับสนุนแอตทริบิวต์เหล่านี้ตั้งแต่เวอร์ชัน 23 WebKit ยังคงรองรับแอตทริบิวต์เหล่านี้ แอตทริบิวต์ window.status ที่เกี่ยวข้องเป็นมาตรฐานแล้ว แต่ก็ต้องไม่มีผลกระทบต่อแถบสถานะหน้าต่างด้วย
การนำออก
Chrome รุ่นนี้จะนำฟีเจอร์ 4 รายการออก
นำ ImageDecoderInit.premultiplyAlpha ออก
ฟีเจอร์นี้ไม่ส่งผลกระทบที่สังเกตได้ใน Use Case หลัก แต่อาจจำกัดการใช้งานในลักษณะที่ไม่เหมาะสม ดูรายละเอียดเพิ่มเติมในปัญหานี้ ตามความเห็นพ้องของตัวแก้ไขข้อกำหนดของ WebCodecs และการขาดการใช้งาน (0.000000339% - 0.00000687% ของการโหลดหน้าเว็บต่อตัวนับการใช้งานใน M106)
นำ navigateEvent.restoreScroll() ออก
กำลังแทนที่ restoreScroll() ด้วย navigateEvent.scroll() scroll() ทำงานในลักษณะเดียวกัน เว้นแต่ว่าจะอนุญาตให้นักพัฒนาซอฟต์แวร์ควบคุมเวลาในการเลื่อนสำหรับการนำทางแบบไม่ข้ามผ่าน (scroll() ทำงานเมื่อการเลื่อนไม่ใช่การคืนค่า จึงมีการเปลี่ยนชื่อตามการเปลี่ยนแปลงลักษณะการทำงาน)
นำ navigateEvent.transitionWhile() ออก
transitionWhile() จะแทนที่ด้วย navigateEvent.intercept() เนื่องจากข้อบกพร่องในการออกแบบที่รายงานโดยนักพัฒนาแอป Intercept() ทำงานแทบจะเหมือนกันกับ conversionและลองอีกครั้ง แต่แทนที่จะรับพารามิเตอร์ Promise ที่จำเป็น จะมีการใช้ฟังก์ชันของตัวแฮนเดิลที่ไม่บังคับซึ่งแสดงผล Promise วิธีนี้จะช่วยให้เบราว์เซอร์ควบคุมได้ว่าตัวแฮนเดิลจะทำงานเมื่อใด ซึ่งทำได้ง่ายกว่าและง่ายกว่าสำหรับ transitionWhile()
นำ googIPv6 ของ WebRTC mediaConstraint ออก
คุณสามารถใช้ "googIPv6: false" เพื่อปิดใช้การสนับสนุน IPv6 ใน WebRTC ดังตัวอย่างต่อไปนี้
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 มีการเปิดใช้งานโดยค่าเริ่มต้นมาหลายปีแล้ว และเราก็ไม่ควรจะปิดไม่ได้ นี่เป็น API เดิมที่ไม่มีในข้อกำหนด