เผยแพร่: 15 มกราคม 2024
การเปลี่ยนแปลงต่อไปนี้มีผลกับ Chrome เบต้าเวอร์ชันล่าสุดในช่องทางสำหรับ Android, ChromeOS, Linux, macOS และ Windows เว้นแต่จะระบุไว้เป็นอย่างอื่น ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ที่แสดงที่นี่ผ่านลิงก์ที่ให้ไว้หรือจากรายการใน ChromeStatus.com Chrome 133 เป็นเวอร์ชันเบต้าตั้งแต่วันที่ 15 มกราคม 2024 คุณสามารถดาวน์โหลดเวอร์ชันล่าสุดได้ที่ Google.com สำหรับเดสก์ท็อป หรือใน Google Play Store บน Android
CSS และ UI
เวอร์ชันนี้เพิ่มฟีเจอร์ CSS และ UI ใหม่ 7 รายการ
ฟังก์ชัน attr() ขั้นสูงของ CSS
ใช้การเพิ่ม attr() ที่ระบุไว้ใน CSS ระดับ 5 ซึ่งอนุญาตให้ใช้ประเภทอื่นๆ นอกเหนือจาก <string> และใช้ในพร็อพเพอร์ตี้ CSS ทั้งหมด (นอกเหนือจากการรองรับองค์ประกอบจำลอง content ที่มีอยู่)
ดูข้อมูลเพิ่มเติมได้ที่การอัปเกรด CSS attr()
คลาสสมมติ :open ของ CSS
คลาสจำลอง :open จะจับคู่กับ <dialog> และ <details> เมื่ออยู่ในสถานะเปิด และจะจับคู่กับ <select> และ <input> เมื่ออยู่ในโหมดที่มีเครื่องมือเลือกและเครื่องมือเลือกแสดงอยู่
การค้นหาคอนเทนเนอร์สถานะการเลื่อน CSS
ใช้การค้นหาคอนเทนเนอร์เพื่อจัดรูปแบบรายการที่สืบทอดมาจากคอนเทนเนอร์ตามสถานะการเลื่อน
คอนเทนเนอร์การค้นหาอาจเป็นคอนเทนเนอร์การเลื่อนหรือองค์ประกอบที่ได้รับผลกระทบจากตําแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อน คุณสามารถค้นหาสถานะต่อไปนี้ได้
stuck: คอนเทนเนอร์ที่ยึดตำแหน่งไว้ติดอยู่ที่ขอบด้านใดด้านหนึ่งของกล่องเลื่อนsnapped: ขณะนี้คอนเทนเนอร์ที่ปรับแนวตามการเลื่อนกำลังจัดแนวในแนวนอนหรือแนวตั้งscrollable: คอนเทนเนอร์การเลื่อนสามารถเลื่อนไปในทิศทางที่ค้นหาได้หรือไม่
container-type: scroll-state ใหม่ช่วยให้สามารถค้นหาคอนเทนเนอร์ได้
#sticky {
position: sticky;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
#sticky-child {
font-size: 75%;
}
}
ดูข้อมูลเพิ่มเติมใน CSS scroll-state()
CSS text-box, text-box-trim และ text-box-edge
เพื่อให้เนื้อหาข้อความมีความสมดุลสูงสุด พร็อพเพอร์ตี้ text-box-trim และ text-box-edge รวมถึงพร็อพเพอร์ตี้ text-box แบบย่อจะช่วยให้คุณควบคุมการจัดแนวตั้งของข้อความได้ละเอียดยิ่งขึ้น
พร็อพเพอร์ตี้ text-box-trim จะระบุด้านที่จะตัดด้านบนหรือด้านล่าง และพร็อพเพอร์ตี้ text-box-edge จะระบุวิธีตัดขอบ
พร็อพเพอร์ตี้เหล่านี้ช่วยให้คุณควบคุมการเว้นระยะห่างแนวตั้งได้อย่างแม่นยำโดยใช้เมตริกแบบอักษร ดูข้อมูลเพิ่มเติมใน CSS text-box-trim
ค่า hint ของแอตทริบิวต์ popover
Popover API ระบุลักษณะการทํางานของค่า 2 ค่าของแอตทริบิวต์ popover ได้แก่ auto และ manual ฟีเจอร์นี้อธิบายค่าที่ 3 ซึ่งก็คือ popover=hint คำแนะนำซึ่งมักเชื่อมโยงกับลักษณะการทำงานประเภท "เคล็ดลับเครื่องมือ" จะมีการทำงานแตกต่างกันเล็กน้อย ความแตกต่างหลักๆ คือ hint จะอยู่ภายใต้ auto เมื่อเปิดกองซ้อนของป๊อปอัปที่ซ้อนกัน คุณจึงเปิดป๊อปอัป hint ที่ไม่เกี่ยวข้องได้ขณะที่ป๊อปอัป auto ที่มีอยู่ยังคงเปิดอยู่
ตัวอย่าง Canonical คือเครื่องมือเลือก <select> เปิดอยู่ (popover=auto) และแสดงเคล็ดลับเครื่องมือที่เรียกให้แสดงเมื่อวางเมาส์เหนือ (popover=hint) การดำเนินการดังกล่าวจะไม่ปิดเครื่องมือเลือก <select>
การปรับปรุงตัวเรียกให้แสดงป๊อปอัปและการจัดตําแหน่งจุดยึด
เพิ่มวิธีแบบบังคับในการตั้งค่าความสัมพันธ์ของผู้เรียกใช้ระหว่างป๊อปอัปด้วย popover.showPopover({source}) เปิดใช้ความสัมพันธ์ของผู้เรียกใช้เพื่อสร้างการอ้างอิงองค์ประกอบแอตทริบิวต์แองเคอร์โดยนัย
ไม่ควรเรียกใช้ป๊อปอัปที่ฝังอยู่ภายในตัวเรียกใช้อีกครั้ง
ในกรณีต่อไปนี้ การคลิกปุ่มจะเปิดใช้งานป๊อปอัปอย่างถูกต้อง แต่การคลิกป๊อปอัปหลังจากนั้นไม่ควรปิดป๊อปอัป
<button popovertarget=foo>Activate
<div popover id=foo>Clicking me shouldn't close me</div>
</button>
ก่อนหน้านี้ปัญหานี้เกิดขึ้นเนื่องจากป๊อปอัปคลิกไปยัง <button>
และเปิดใช้งานตัวเรียกใช้ ซึ่งจะปิดป๊อปอัป ตอนนี้ได้เปลี่ยนลักษณะการทำงานนี้ให้เป็นไปตามที่คาดไว้แล้ว
Web API
Animation.overallProgress
แสดงภาพเคลื่อนไหวที่สะดวกและสอดคล้องกันสำหรับนักพัฒนาแอปเกี่ยวกับระยะทางที่ภาพเคลื่อนไหวได้ดำเนินการไปในแต่ละรอบ โดยไม่คำนึงถึงลักษณะของไทม์ไลน์ หากไม่มีพร็อพเพอร์ตี้ overallProgress คุณจะต้องคำนวณด้วยตนเองว่าภาพเคลื่อนไหวเล่นไปไกลแค่ไหน โดยพิจารณาจากจํานวนการวนซ้ำของภาพเคลื่อนไหว และ currentTime ของภาพเคลื่อนไหวเป็นเปอร์เซ็นต์ของเวลาทั้งหมด (เช่น ในกรณีของภาพเคลื่อนไหวที่ทำงานตามการเลื่อน) หรือเป็นจํานวนเวลาสัมบูรณ์ (เช่น ในกรณีของภาพเคลื่อนไหวที่ทำงานตามเวลา)
เมธอด pause() ของออบเจ็กต์ Atomics
เพิ่มเมธอด pause() ไปยังออบเจ็กต์เนมสเปซ Atomics เพื่อบอกใบ้ CPU ว่าโค้ดปัจจุบันกำลังดำเนินการสปินครอส
การรายงานแฮช CSP สําหรับสคริปต์
เว็บแอปพลิเคชันแบบซับซ้อนมักต้องติดตามทรัพยากรย่อยที่ดาวน์โหลดเพื่อวัตถุประสงค์ด้านความปลอดภัย
โดยเฉพาะอย่างยิ่ง มาตรฐานและแนวทางปฏิบัติแนะนำของอุตสาหกรรมที่กําลังจะมีผลบังคับใช้ (เช่น PCI-DSS v4) กําหนดให้เว็บแอปพลิเคชันเก็บข้อมูลสคริปต์ทั้งหมดที่ดาวน์โหลดและเรียกใช้
ฟีเจอร์นี้สร้างขึ้นจาก CSP และ Reporting API เพื่อรายงาน URL และแฮช (สําหรับ CORS/ต้นทางเดียวกัน) ของทรัพยากรสคริปต์ทั้งหมดที่เอกสารโหลด
การย้ายที่รักษาสถานะ DOM
เพิ่ม DOM Primitive (Node.prototype.moveBefore) ที่ช่วยให้คุณย้ายองค์ประกอบไปรอบๆ ต้นไม้ DOM ได้โดยไม่ต้องรีเซ็ตสถานะขององค์ประกอบ
เมื่อย้ายแทนที่จะนำออกและแทรก ระบบจะเก็บสถานะต่อไปนี้ไว้
- โหลดองค์ประกอบ
<iframe>รายการไว้ - องค์ประกอบที่ใช้งานอยู่จะยังคงโฟกัสอยู่
- ป๊อปอัป หน้าจอแบบเต็ม และกล่องโต้ตอบแบบโมดัลจะยังคงเปิดอยู่
- การเปลี่ยนและภาพเคลื่อนไหว CSS จะยังคงทำงานต่อไป
แสดงแอตทริบิวต์ attributionsrc ใน <area>
ปรับการแสดงแอตทริบิวต์ attributionsrc ใน <area> ให้สอดคล้องกับลักษณะการประมวลผลที่มีอยู่ของแอตทริบิวต์นั้น แม้ว่าจะไม่ได้แสดงก็ตาม
นอกจากนี้ เราควรรองรับแอตทริบิวต์ใน <area> ด้วย เนื่องจากองค์ประกอบดังกล่าวเป็นแพลตฟอร์มการนําทางระดับชั้นนํา และ Chrome รองรับแอตทริบิวต์นี้ในแพลตฟอร์มอื่นๆ ของ <a> และ window.open อยู่แล้ว
แสดง renderTime แบบคร่าวๆ ที่มาจากหลายแหล่งที่มาในการวัดเวลาขององค์ประกอบและ LCP (โดยไม่คำนึงถึง Timing-Allow-Origin)
รายการเวลาขององค์ประกอบและ LCP มีแอตทริบิวต์ renderTime ซึ่งสอดคล้องกับเฟรมแรกที่มีการแสดงผลรูปภาพหรือข้อความ
ปัจจุบันแอตทริบิวต์นี้ได้รับการปกป้องสำหรับรูปภาพข้ามแหล่งที่มาโดยกำหนดให้ต้องมีส่วนหัว Timing-Allow-Origin ในทรัพยากรรูปภาพ อย่างไรก็ตาม ข้อจํากัดนี้หลีกเลี่ยงได้ง่ายๆ (เช่น แสดงรูปภาพจากแหล่งที่มาเดียวกันและจากแหล่งที่มาอื่นในเฟรมเดียวกัน)
เนื่องจากข้อจำกัดนี้ทำให้เกิดความสับสน เราจึงวางแผนที่จะนำข้อจำกัดนี้ออก และเพิ่มเวลาในการแสดงผลทั้งหมดขึ้น 4 ms เมื่อเอกสารไม่ได้แยกกันหลายแหล่งที่มา ซึ่งดูเหมือนจะหยาบพอที่จะหลีกเลี่ยงการเปิดเผยข้อมูลเวลาถอดรหัสที่เป็นประโยชน์เกี่ยวกับรูปภาพข้ามแหล่งที่มา
อินเทอร์เฟซ FileSystemObserver
อินเทอร์เฟซ FileSystemObserver จะแจ้งให้เว็บไซต์ทราบถึงการเปลี่ยนแปลงในระบบไฟล์ เว็บไซต์จะสังเกตการเปลี่ยนแปลงไฟล์และไดเรกทอรีที่ผู้ใช้เคยให้สิทธิ์ไว้ก่อนหน้านี้ในอุปกรณ์ของผู้ใช้หรือในระบบไฟล์ของที่เก็บข้อมูล (หรือที่เรียกว่าระบบไฟล์ส่วนตัวของต้นทาง) และได้รับการแจ้งเตือนเกี่ยวกับข้อมูลการเปลี่ยนแปลงพื้นฐาน เช่น ประเภทการเปลี่ยนแปลง
ค้างเมื่อใช้โหมดประหยัดพลังงาน
เมื่อโหมดประหยัดพลังงานทำงานอยู่ Chrome จะหยุด "กลุ่มบริบทการท่องเว็บ" ที่ซ่อนอยู่และไม่มีการใช้งานนานกว่า 5 นาที หากเฟรมย่อยของต้นทางเดียวกันภายในกลุ่มมีการใช้งาน CPU เกินเกณฑ์ เว้นแต่ว่ากลุ่มดังกล่าวจะมีลักษณะดังนี้
- มีฟังก์ชันการประชุมทางเสียงหรือวิดีโอ (ตรวจพบโดยการระบุการจับภาพไมโครโฟน กล้อง หรือหน้าจอ/หน้าต่าง/แท็บ หรือ RTCPeerConnection ที่มี RTCDataChannel "เปิด" หรือ MediaStreamTrack "สด")
- ควบคุมอุปกรณ์ภายนอก (ตรวจพบโดยใช้ WebUSB, Web Bluetooth, WebHID หรือ Web Serial)
- ถือ Web Lock หรือการเชื่อมต่อ IndexedDB ที่บล็อกการอัปเดตเวอร์ชันหรือธุรกรรมในการเชื่อมต่ออื่น
การหยุดประกอบด้วยการหยุดการดําเนินการชั่วคราว ซึ่งมีการกําหนดอย่างเป็นทางการใน Page Lifecycle API
ระบบจะปรับเทียบเกณฑ์การใช้งาน CPU เพื่อหยุดแท็บเบื้องหลังประมาณ 10% ไว้ชั่วคราวเมื่อโหมดประหยัดพลังงานทำงานอยู่
แผนที่การนําเข้าหลายรายการ
ปัจจุบันแผนที่การนําเข้าต้องโหลดก่อนโมดูล ES ใดๆ และจะมีแผนที่การนําเข้าได้เพียงแผนที่เดียวต่อเอกสาร ซึ่งทำให้โมดูลเหล่านี้เปราะบางและอาจทําให้การใช้งานช้าลงเมื่อใช้ในสถานการณ์จริง โมดูลที่โหลดก่อนโมดูลเหล่านี้จะทําให้ทั้งแอปใช้งานไม่ได้ และในแอปที่มีโมดูลจํานวนมาก โมดูลเหล่านี้จะกลายเป็นทรัพยากรที่บล็อกขนาดใหญ่ เนื่องจากต้องโหลดแผนที่ทั้งแผนที่สําหรับโมดูลที่เป็นไปได้ทั้งหมดก่อน
ฟีเจอร์นี้ช่วยให้ใช้การแมปการนําเข้าหลายรายการต่อเอกสารได้โดยการผสานการแมปเหล่านั้นในลักษณะที่สอดคล้องกันและแน่นอน
ส่วนหัวการเข้าถึงพื้นที่เก็บข้อมูล
เสนอวิธีอื่นสําหรับการฝังที่ตรวจสอบสิทธิ์แล้วเพื่อเลือกใช้คุกกี้ที่ไม่ได้แบ่งพาร์ติชัน ส่วนหัวเหล่านี้ระบุว่าคุกกี้ที่ไม่ได้แบ่งพาร์ติชัน (หรือสามารถ) รวมอยู่ในคำขอเครือข่ายหนึ่งๆ หรือไม่ และอนุญาตให้เซิร์ฟเวอร์เปิดใช้งานสิทธิ์ "การเข้าถึงพื้นที่เก็บข้อมูล" ที่ได้รับแล้ว การให้วิธีอื่นในการเปิดใช้งานสิทธิ์ "storage-access" จะช่วยให้ทรัพยากรที่ไม่ใช่ iframe ใช้งานได้ และลดเวลาในการตอบสนองสำหรับการฝังที่ตรวจสอบสิทธิ์แล้ว
รองรับการสร้าง ClipboardItem ด้วย Promise<DOMString>
ตอนนี้ ClipboardItem ซึ่งเป็นอินพุตสําหรับเมธอดคลิปบอร์ดแบบแอสซิงค์ write() ยอมรับค่าสตริงนอกเหนือจาก Blob ในคอนสตรคเตอร์แล้ว
ClipboardItemData อาจเป็น Blob, สตริง หรือ Promise ที่แสดงผลเป็น Blob หรือสตริง
WebAssembly Memory64
memory64 proposal จะเพิ่มการรองรับหน่วยความจำ WebAssembly แบบเชิงเส้นที่มีขนาดใหญ่กว่า 2^32 บิต โดยจะไม่มีคำสั่งใหม่ แต่จะใช้คำสั่งที่มีอยู่เพื่ออนุญาตให้ใช้ดัชนี 64 บิตสำหรับหน่วยความจำและตารางแทน
Web Authentication API: วิธีการ PublicKeyCredential getClientCapabilities()
วิธีการ PublicKeyCredential getClientCapabilities() ช่วยให้คุณระบุฟีเจอร์ WebAuthn ที่ไคลเอ็นต์ของผู้ใช้รองรับ เมธอดนี้จะแสดงรายการความสามารถที่รองรับ ซึ่งช่วยให้นักพัฒนาแอปปรับแต่งประสบการณ์และเวิร์กโฟลว์การตรวจสอบสิทธิ์ตามฟังก์ชันการทำงานที่เฉพาะเจาะจงของลูกค้าได้
WebGPU: รูปแบบเวิร์กเท็กซ์ 1 องค์ประกอบ (และ unorm8x4-bgra)
เพิ่มรูปแบบเวิร์กเท็กซ์เพิ่มเติมที่ไม่ได้อยู่ในรุ่นแรกของ WebGPU เนื่องจากไม่มีการสนับสนุนหรือ macOS เวอร์ชันเก่า (ซึ่งเบราว์เซอร์ไม่รองรับอีกต่อไป) รูปแบบเวิร์กเท็กซ์คอมโพเนนต์เดียวช่วยให้แอปพลิเคชันขอเฉพาะข้อมูลที่จําเป็นได้ เมื่อก่อนหน้านี้แอปพลิเคชันต้องขอข้อมูลมากกว่าอย่างน้อย 2 เท่าสําหรับประเภทข้อมูล 8 และ 16 บิต รูปแบบ unorm8x4-bgra ทําให้โหลดสีของจุดยอดที่เข้ารหัส BGRA ได้ง่ายขึ้นเล็กน้อยในขณะที่ใช้เฉดสีเดิม
อัลกอริทึม X25519 ของ Web Cryptography API
อัลกอริทึม "X25519" มีเครื่องมือสำหรับทำข้อตกลงเกี่ยวกับคีย์โดยใช้ฟังก์ชัน X25519 ที่ระบุไว้ใน [RFC7748] คุณสามารถใช้ตัวระบุอัลกอริทึม "X25519" ในอินเทอร์เฟซ SubtleCrypto เพื่อเข้าถึงการดำเนินการที่ติดตั้งใช้งาน ได้แก่ generateKey, importKey, exportKey, deriveKey และ deriveBits
ช่วงทดลองใช้จากต้นทางใหม่
ใน Chrome 133 คุณจะเลือกใช้การทดลองใหม่ต่อไปนี้ได้
เลือกไม่ใช้การหยุดทำงานชั่วคราวในโหมดประหยัดพลังงาน
การทดลองใช้แบบไม่เลือกใช้นี้ช่วยให้เว็บไซต์เลือกไม่ใช้ลักษณะการระงับในโหมดประหยัดพลังงานซึ่งมาพร้อมกับ Chrome 133 ได้
การเลิกใช้งานและการนำออก
Chrome เวอร์ชันนี้มีการเลิกใช้งานและการนำออกตามที่ระบุไว้ด้านล่าง โปรดไปที่ ChromeStatus.com เพื่อดูรายการการเลิกใช้งานที่วางแผนไว้ การเลิกใช้งานในปัจจุบัน และการนําออกก่อนหน้านี้
Chrome เวอร์ชันนี้จะเลิกใช้งานฟีเจอร์ 1 รายการ
เลิกใช้งานขีดจำกัด WebGPU maxInterStageShaderComponents
maxInterStageShaderComponents limit เลิกใช้งานแล้วเนื่องจากปัจจัยหลายประการ วันที่ที่ตั้งใจจะนำออกใน Chrome 135
- การทำงานซ้ำกับ
maxInterStageShaderVariables: ขีดจำกัดนี้มีประโยชน์คล้ายกับการควบคุมปริมาณข้อมูลที่ส่งผ่านระหว่างระยะของโปรแกรมเปลี่ยนรูปแบบอยู่แล้ว - ความคลาดเคลื่อนเล็กน้อย: แม้ว่าวิธีคํานวณขีดจํากัด 2 รายการจะแตกต่างกันเล็กน้อย แต่ความแตกต่างเหล่านี้ก็เล็กน้อยและจัดการได้อย่างมีประสิทธิภาพภายในขีดจํากัด
maxInterStageShaderVariables - ลดความซับซ้อน: การนํา
maxInterStageShaderComponentsออกจะช่วยปรับปรุงอินเทอร์เฟซ Shader และลดความซับซ้อนสําหรับนักพัฒนาแอป แทนที่จะต้องจัดการขีดจํากัด 2 รายการแยกกันซึ่งมีความแตกต่างเล็กน้อย ผู้ใช้จะมุ่งเน้นที่maxInterStageShaderVariablesที่ครอบคลุมและตั้งชื่อเหมาะสมมากขึ้นได้
Chrome เวอร์ชันนี้จะนําฟีเจอร์ 2 รายการออก
นำกฎ 5 นาทีของ <link rel=prefetch> ออก
ก่อนหน้านี้ เมื่อมีการเรียกข้อมูลล่วงหน้าโดยใช้ <link rel=prefetch> Chrome จะละเว้นความหมายของแคช (ได้แก่ max-age และ no-cache) ของทรัพยากรนั้นสำหรับการเรียกใช้ครั้งแรกภายใน 5 นาที เพื่อหลีกเลี่ยงการเรียกข้อมูลอีกครั้ง ตอนนี้ Chrome ได้นํากรณีพิเศษนี้ออกแล้วและใช้ความหมายของแคช HTTP ปกติ
ซึ่งหมายความว่านักพัฒนาเว็บต้องใส่ส่วนหัวการแคชที่เหมาะสม (Cache-Control หรือ Expires) จึงจะได้รับประโยชน์จาก <link rel=prefetch>
ซึ่งจะส่งผลต่อ <link rel=prerender> ที่ไม่เป็นไปตามมาตรฐานด้วย
นำการเรียกใช้หน้าต้อนรับของ Chrome ที่มีแท็บการตั้งค่าเริ่มต้นในการใช้งานครั้งแรกออก
การรวม chrome://welcome ในพร็อพเพอร์ตี้ first_run_tabs ของไฟล์ initial_preferences จะไม่มีผลใดๆ เรานําหน้านี้ออกเนื่องจากหน้าดังกล่าวซ้ำซ้อนกับประสบการณ์การใช้งานครั้งแรกที่ทริกเกอร์ในแพลตฟอร์มเดสก์ท็อป