หน่วยวิวพอร์ต 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) และหน่วยเชิงตรรกะ (vb, vb)vi
การรองรับ 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)
API การจัดการข้อมูลเข้าสู่ระบบแบบรวมศูนย์ช่วยให้ผู้ใช้สามารถนำข้อมูลประจำตัวแบบรวมศูนย์ในการเข้าสู่ระบบเว็บไซต์ในลักษณะที่สอดคล้องกับการปรับปรุงความเป็นส่วนตัวของเบราว์เซอร์
ส่วนขยายแหล่งที่มาของสื่อในผู้ปฏิบัติงาน
เปิดใช้การใช้งาน API ของ Media Source Extensions (MSE) จากบริบท DedicatedWorker เพื่อเพิ่มประสิทธิภาพในการบัฟเฟอร์สื่อสำหรับการเล่นโดย HTMLMediaElement ในบริบทหน้าต่างหลัก เมื่อสร้างออบเจ็กต์ MediaSource ในบริบท DedicatedWorker แอปพลิเคชันอาจรับ MediaSourceHandle จากออบเจ็กต์ดังกล่าวและโอนแฮนเดิลนั้นไปยังเทรดหลักเพื่อใช้แนบกับ HTMLMediaElement จากนั้นบริบทที่สร้างออบเจ็กต์ MediaSource อาจใช้ออบเจ็กต์เพื่อบัฟเฟอร์สื่อ
ส่วนหัวคำแนะนำไคลเอ็นต์สำหรับฟีเจอร์สื่อของค่ากำหนดของผู้ใช้ Sec-CH-Prefers-Reduced-Motion
ส่วนหัวคำแนะนำของไคลเอ็นต์สำหรับฟีเจอร์สื่อของค่ากำหนดของผู้ใช้ กำหนดชุดของส่วนหัวคำแนะนำไคลเอ็นต์ HTTP สำหรับฟีเจอร์สื่อค่ากำหนดของผู้ใช้ ตามที่กำหนดโดยคำค้นหาสื่อระดับ 5 หากใช้เป็นคำแนะนำไคลเอ็นต์ที่สำคัญ ส่วนหัวเหล่านี้จะช่วยให้เซิร์ฟเวอร์ตัดสินใจได้อย่างชาญฉลาด เช่น การแทรกในบรรทัดของ CSS Sec-CH-Prefers-Reduced-Motion แสดงถึงค่ากำหนด prefers-reduced-motion ของผู้ใช้
ผู้อ่าน WebTransport BYOB
รองรับโปรแกรมอ่าน BYOB(bring-your-buffer) สำหรับ WebTransport เพื่อให้อ่านบัฟเฟอร์ที่นักพัฒนาซอฟต์แวร์จัดหาได้ เครื่องอ่าน BYOB สามารถลดสำเนาบัฟเฟอร์และลดการจัดสรรหน่วยความจำได้
ไวลด์การ์ดในที่มาของนโยบายสิทธิ์
ข้อกำหนดของนโยบายสิทธิ์จะกำหนดกลไกที่ช่วยให้นักพัฒนาซอฟต์แวร์เลือกเปิดและปิดการใช้งานฟีเจอร์และ API ต่างๆ ของเบราว์เซอร์ได้ ความสามารถหนึ่งของกลไกนี้ช่วยให้เปิดใช้ฟีเจอร์ได้เฉพาะในต้นทางที่ระบุอย่างชัดเจน (เช่น https://foo.com/) กลไกนี้ไม่ยืดหยุ่นพอสำหรับการออกแบบ CDN บางรายการ ซึ่งแสดงเนื้อหาผ่านต้นทางที่อาจโฮสต์อยู่ในโดเมนย่อยที่เป็นไปได้อย่างน้อย 100 รายการ
ดังนั้นฟีเจอร์นี้จึงเพิ่มการรองรับไวลด์การ์ดในนโยบายสิทธิ์ที่มีโครงสร้าง เช่น 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 ระดับ 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 การเปิดใช้แฟล็กนี้จะทำให้ช่องข้อมูลประจำตัวในเหตุการณ์ "canmakepayment" ว่างเปล่า (และ Intent ของ Android IS_READY_TO_PAY)
ดูข้อมูลเพิ่มเติมในการอัปเดตลักษณะการทำงานของเหตุการณ์ CanMakePayment ของ Payment Handler API
Back-Forward Cache NotRestoredWhy API
NotRestoredreason API จะรายงานรายการเหตุผลที่หน้าเว็บไม่แสดงจาก BFcache ในโครงสร้างแผนผังเฟรมผ่าน PerformanceNavigationTiming API
หน้าเว็บอาจถูกบล็อกจาก BFcache ได้จากหลายสาเหตุ เช่น เหตุผลที่กำหนดโดยข้อกำหนด และเหตุผลเฉพาะสำหรับการใช้งานเบราว์เซอร์ นักพัฒนาซอฟต์แวร์สามารถรวบรวมอัตรา Hit ของ BFCache บนเว็บไซต์ของตนโดยใช้พารามิเตอร์ของตัวแฮนเดิลการแสดงหน้าเว็บและ PerformanceNavigationTiming.type(back-forward) API นี้ช่วยให้เว็บไซต์รวบรวมข้อมูลเกี่ยวกับสาเหตุที่ไม่ใช้ BFCache ในการนําทางของประวัติได้ เพื่อที่จะดําเนินการกับเหตุผลแต่ละข้อและทำให้หน้าเว็บเข้ากันได้กับ BFCache
การเลิกใช้งานและการนำออก
Chrome เวอร์ชันนี้จะแนะนำการเลิกใช้งานและการนำออกตามรายการด้านล่าง ไปที่ ChromeStatus.com เพื่อดูรายการการเลิกใช้งานที่วางแผนไว้ การเลิกใช้งานในปัจจุบัน และการนำออกก่อนหน้า
การเลิกใช้งาน
Chrome รุ่นนี้ได้เลิกใช้งานฟีเจอร์ 1 รายการ
เลิกใช้งานและนำ window.defaultStatus และ window.defaultstatus ออก
API เหล่านี้เป็น API ที่ไม่ได้มาตรฐานซึ่งบางเบราว์เซอร์ติดตั้งไว้และไม่มีผลต่อลักษณะการทำงานของเบราว์เซอร์ วิธีนี้จะช่วยทำความสะอาดและลบสัญญาณการเก็บลายนิ้วมือที่อาจเกิดขึ้น
ก่อนหน้านี้ ส่วนขยายเหล่านี้ใช้เพื่อแก้ไข/ควบคุมข้อความ "แถบสถานะ" ที่ด้านล่างของหน้าต่างเบราว์เซอร์ อย่างไรก็ตาม สถานะเหล่านี้ไม่เคยส่งผลกระทบใดๆ จริงต่อแถบสถานะของ Chrome และไม่ใช่แอตทริบิวต์ที่เป็นมาตรฐาน Gecko ไม่สนับสนุนแอตทริบิวต์เหล่านี้ตั้งแต่เวอร์ชัน 23 แต่ WebKit ก็ยังคงสนับสนุนแอตทริบิวต์เหล่านี้ แอตทริบิวต์ window.status ที่เกี่ยวข้องได้รับการตามมาตรฐาน แต่ก็ต้องไม่ส่งผลกระทบต่อแถบสถานะหน้าต่างด้วย
การนำออก
Chrome รุ่นนี้จะนำฟีเจอร์ออก 4 รายการ
นำ ImageDecoderInit.premultiplyAlpha ออก
ฟีเจอร์นี้ไม่มีผลกระทบใดๆ ที่สังเกตได้ในกรณีการใช้งานหลัก แต่อาจจำกัดการใช้งานในลักษณะที่ไม่เหมาะสม ดูปัญหานี้สำหรับคำอธิบายโดยละเอียด ตามความเห็นพ้องของเครื่องมือแก้ไขข้อกำหนด WebCodecs และการขาดการใช้งาน (0.000000339% - 0.00000687% ของการโหลดหน้าเว็บต่อตัวนับการใช้งานใน M106)
นำ navigateEvent.restoreScroll() ออก
restoreScroll() กำลังแทนที่ด้วย navigateEvent.scroll() scroll() ทำงานในลักษณะเดียวกันยกเว้นว่าจะอนุญาตให้นักพัฒนาซอฟต์แวร์ควบคุมเวลาการเลื่อนสำหรับการนำทางแบบข้ามผ่านได้ (scroll() จะทำงานเมื่อไม่มีการคืนค่าการเลื่อน ชื่อจึงเปลี่ยนไปพร้อมกับลักษณะการทำงานที่เปลี่ยนไป)
นำ navigateEvent.transitionWhile() ออก
จะมีการแทนที่ transitionWhile() ด้วย navigateEvent.intercept() เนื่องจากข้อบกพร่องด้านการออกแบบที่นักพัฒนาซอฟต์แวร์รายงาน Intercept() ทำงานเกือบเหมือนกับtransitionInterstitial() แต่แทนที่จะใช้พารามิเตอร์ Promise ที่จำเป็น แต่จะใช้ฟังก์ชันตัวแฮนเดิลที่ไม่บังคับซึ่งแสดงผล Promise แทน วิธีนี้ทำให้เบราว์เซอร์สามารถควบคุมเวลาที่ตัวแฮนเดิลจะทำงาน ซึ่งจะช้ากว่าและใช้ง่ายกว่าสำหรับ transitionWhile()
นำ googIPv6 ของ WebRTC mediaConstraint ออก
"googIPv6: false" สามารถใช้เพื่อปิดใช้งานการสนับสนุน IPv6 ใน WebRTC ตามตัวอย่างต่อไปนี้
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 เปิดใช้อยู่โดยค่าเริ่มต้นมาหลายปีแล้ว และเราไม่สามารถปิดใช้ได้ นี่คือ API เดิมที่ไม่มีอยู่ในข้อกำหนด