แพลตฟอร์มเว็บใหม่ในเดือนมกราคม

ดูฟีเจอร์ที่น่าสนใจบางส่วนที่มีในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเวอร์ชันเบต้าในช่วงเดือนมกราคม 2024

Rachel Andrew

เบราว์เซอร์เวอร์ชันเสถียร

ในเดือนมกราคม 2024 Firefox 122, Chrome 121 และ Safari 17.3 มีความเสถียร โพสต์นี้จะอธิบายฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ

<hr>ในสกุล<select>

Firefox 122 เพิ่มองค์ประกอบ <hr> เป็นองค์ประกอบย่อยที่อนุญาตขององค์ประกอบ <select> วิธีนี้จะช่วยให้รายการที่เลือกอ่านง่ายพร้อมตัวเลือกมากมาย ขณะนี้เครื่องมือเบราว์เซอร์หลักทั้งหมดรองรับฟีเจอร์นี้แล้ว อย่างไรก็ตาม โปรดทราบว่าขณะนี้ไม่มีเบราว์เซอร์ใดแสดง <hr> ในโครงสร้างการช่วยเหลือพิเศษ

HTMLSelectElement.showPicker

นอกจากนี้สำหรับองค์ประกอบ <select> ใน Firefox ก็เป็นเมธอด showPicker() สำหรับ HTMLSelectElement เช่นกัน ซึ่งเป็นเครื่องมือเลือกที่ปกติแล้วจะแสดงเมื่อมีการเลือกองค์ประกอบ แต่ทริกเกอร์ได้โดยการกดปุ่มหรือการโต้ตอบแบบอื่นๆ ของผู้ใช้

Largest Contentful Paint (LCP) API

นอกจากนี้ Firefox 122 ยังรองรับ LCP API ด้วย โดย Performance API นี้จะให้ข้อมูลการกำกับเวลาเกี่ยวกับสีของรูปภาพหรือข้อความที่ใหญ่ที่สุดก่อนที่ผู้ใช้จะโต้ตอบกับหน้าเว็บ ดูข้อมูลเพิ่มเติมเกี่ยวกับ LCP ในเอกสารประกอบ LCP

พร็อพเพอร์ตี้แถบเลื่อน CSS

Chrome 121 เพิ่มการรองรับพร็อพเพอร์ตี้แถบเลื่อน scrollbar-color และ scrollbar-width ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในบทความการจัดรูปแบบแถบเลื่อน

ภาพเคลื่อนไหว CSS font-palette

คุณสมบัติ font-palette ให้คุณเลือกชุดสีที่ต้องการเพื่อแสดงแบบอักษรสี คุณสมบัตินี้รองรับภาพเคลื่อนไหวแล้ว ดังนั้น การสลับระหว่างจานสีจะกลายเป็นการเปลี่ยนที่ราบรื่นระหว่าง 2 จานสีที่เลือก

วิธีtransfer()และtransferToFixedLength()ของArrayBuffer

Firefox มีเมธอด transfer() และ transferToFixedLength() ของ JavaScript ของ ArrayBuffer เมธอด transfer() จะสร้าง ArrayBuffer ใหม่ที่มีเนื้อหาไบต์เดียวกับ ArrayBuffer ปัจจุบัน จากนั้นจะปลด ArrayBuffer เดิมออก เมธอด transferToFixedLength() ทำงานในลักษณะเดียวกัน แต่สร้างขนาดคงที่ ArrayBuffer

การอัปเดต Speculation Rules API

เว็บไซต์จะใช้ Speculation Rules API เพื่อแจ้ง Chrome ว่าจะแสดงผลหน้าใดล่วงหน้า ผ่านการเขียนโปรแกรม ซึ่งช่วยสร้างประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้นด้วยการลดเวลาในการไปยังส่วนต่างๆ ของหน้าเว็บ

Chrome 121 รองรับกฎเอกสาร ซึ่งเป็นส่วนขยายของไวยากรณ์กฎการคาดเดาที่ช่วยให้เบราว์เซอร์รับรายการ URL สำหรับการโหลดแบบคาดเดาจากองค์ประกอบในหน้าเว็บได้ กฎของเอกสารอาจมีเกณฑ์ที่สามารถใช้ลิงก์เหล่านี้ได้ เมื่อใช้ร่วมกับช่อง "eagerness" ใหม่ คุณจะดึงลิงก์ล่วงหน้าหรือการแสดงผลล่วงหน้าโดยอัตโนมัติในหน้าเว็บได้ทันทีเมื่อวางเมาส์เหนือหรือวางเมาส์เหนือช่องได้

เบราว์เซอร์รุ่นเบต้า

เบราว์เซอร์เวอร์ชันเบต้าช่วยให้คุณเห็นตัวอย่างสิ่งที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรถัดไป ตอนนี้เป็นเวลาที่เหมาะแก่การทดสอบฟีเจอร์ใหม่หรือการนำออก ที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่เราจะเผยแพร่สู่สาธารณะ ส่วนรุ่นเบต้าใหม่ ได้แก่ Firefox 123, Chrome 122 และ Safari 17.4 การเปิดตัวครั้งนี้มาพร้อมฟีเจอร์ที่ยอดเยี่ยมมากมายสำหรับแพลตฟอร์ม ดูรายละเอียดทั้งหมดได้ในบันทึกประจำรุ่น ต่อไปนี้เป็นไฮไลต์บางส่วน

Firefox 123 รุ่นเบต้ามี Dhadow DOM ที่มีการประกาศ

นอกจากนี้ใน Firefox 123 ยังรองรับรหัสสถานะ 103 Early Hints HTTP การตอบสนองสำหรับการโหลดทรัพยากรล่วงหน้า ซึ่งหน้าเว็บอาจต้องใช้ในขณะที่เซิร์ฟเวอร์เตรียมการตอบสนองเต็มรูปแบบ

Safari 17.4 เบต้ามีของดีมากมาย สำหรับ CSS จะมีการรองรับ @scope, align-content ในคอนเทนเนอร์แบบบล็อกและเซลล์ในตาราง และสำหรับองค์ประกอบเทียม ::grammar-error และ ::spelling-error และอีกมากมาย

ในแบบฟอร์ม การรองรับโหมดการเขียนแนวตั้งในตัวควบคุมแบบฟอร์ม, เมธอด showPicker() สำหรับ <input type="date"> และการรองรับ <hr> ภายใน <select> ใน iOS

นอกจากนี้ JavaScript ยังมีฟีเจอร์ใหม่พร้อมการรองรับเมธอด detached(), transfer() และ transferToFixedLength() ของ ArrayBuffer และอื่นๆ อีกมากมาย

Chrome 122 รุ่นเบต้ามีตัวเลือก unsanitized ในเมธอด read() ของ Async Clipboard API เพื่อเรียกดูรูปแบบ HTML ที่ไม่ผ่านการตรวจสอบ สำหรับ JavaScript จะมีเครื่องมือช่วยทำซ้ำแบบใหม่ และเมธอดใหม่สำหรับคลาส Set ในตัว

นอกจากนี้ ใน Chrome 122 ก็มี Storage Buckets API ออกถาวร ทำให้คาดการณ์ได้ง่ายขึ้นว่าเป็นพื้นที่เก็บข้อมูลถาวรเมื่อใช้หน่วยความจำอย่างหนัก