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

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

ในเดือนตุลาคม 2024 Firefox 131, Firefox 132, Safari 18.1 และ Chrome 130 ได้เริ่มมีความเสถียรแล้ว โพสต์นี้จะอธิบายฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ

เครื่องมือช่วยตัวดำเนินการแบบซิงโครนัส

Firefox 131 เพิ่มการรองรับตัวช่วยตัวดำเนินการแบบซิงโครนัส เช่น Iterator.prototype.forEach() และ Iterator.prototype.map() ตัวช่วยเหล่านี้อนุญาตให้มีการดำเนินการที่เหมือนอาร์เรย์ใน Iterator โดยไม่ต้องสร้างออบเจ็กต์อาร์เรย์ขั้นกลาง รวมถึงชุดข้อมูลขนาดใหญ่มากที่ไม่สามารถสร้างอาร์เรย์ระดับกลางได้

การรองรับเบราว์เซอร์

  • Chrome: 122
  • ขอบ: 122
  • Firefox: 131
  • Safari: ไม่รองรับ

แหล่งที่มา

ส่วนย่อยของข้อความ

นอกจากนี้ Firefox 131 ยังรองรับข้อความที่ตัดตอน รวมถึงองค์ประกอบสมมติ CSS ::target-text ด้วย

การรองรับเบราว์เซอร์

  • Chrome: 89.
  • Edge: 89
  • Firefox: 131
  • Safari Technology Preview: รองรับ

แหล่งที่มา

Cookies Having Independent Partitioned State (CHIPS)

Firefox 131 มี CHIPS ซึ่งให้คุณเลือกคุกกี้ลงในพื้นที่เก็บข้อมูลที่แบ่งพาร์ติชันโดยใช้คำสั่ง partitioned ของส่วนหัว HTTP Set-Cookie

การรองรับเบราว์เซอร์

  • Chrome: 114
  • Edge: 114
  • Firefox: 131
  • Safari: ไม่รองรับ

แหล่งที่มา

การอัปเดตสื่อ

ใน Firefox รุ่นที่สองในช่วงเดือนตุลาคมคือชุดฟีเจอร์สื่อทั้งหมด ที่มาพร้อมกับฟีเจอร์ "พื้นฐานใหม่" Firefox 132 มีวิธีHTMLVideoElement requestVideoFrameCallback() และ cancelVideoFrameCallback()

การรองรับเบราว์เซอร์

  • Chrome: 83
  • Edge: 83
  • Firefox: 132
  • Safari: 15.4

แหล่งที่มา

รวมถึงเมธอด MediaStreamTrack.getCapabilities() ด้วย

การรองรับเบราว์เซอร์

  • Chrome: 59
  • Edge: 12.
  • Firefox: 132
  • Safari: 11.

แหล่งที่มา

fetchPriority

Fetch Priority API จะระบุลําดับความสําคัญแบบสัมพัทธ์ของทรัพยากรสําหรับเบราว์เซอร์ เบราว์เซอร์นี้มีการรองรับใน Firefox 132 ซึ่งหมายความว่า API ที่เป็นประโยชน์นี้เปลี่ยนเป็น "คุณลักษณะพื้นฐานใหม่" แล้ว

ดูข้อมูลเพิ่มเติมในหัวข้อเพิ่มประสิทธิภาพการโหลดทรัพยากรด้วย Fetch Priority API

การรองรับเบราว์เซอร์

  • Chrome: 102
  • Edge: 102
  • Firefox: 132
  • Safari: 17.2.

แหล่งที่มา

รองรับ box-decoration-break อย่างเต็มรูปแบบ

Chrome 130 รองรับพร็อพเพอร์ตี้ box-decoration-break ของ CSS แบบเต็มโดยไม่ต้องใส่คำนำหน้า ซึ่งรวมถึงค่า clone สําหรับการแยกส่วนในบล็อกและในบรรทัด

การรองรับเบราว์เซอร์

  • Chrome: 130
  • Edge: 130
  • Firefox: 32.
  • Safari: 7.

แหล่งที่มา

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ในพร็อพเพอร์ตี้ box-decoration-break ใน Chrome 130

กฎการประกาศที่ซ้อนกัน

Chrome 130 และ Firefox 132 รองรับการประกาศที่ฝังของ CSS ซึ่งหมายความว่าระบบจะแยกวิเคราะห์ CSS ที่ฝังอย่างถูกต้องตามที่อธิบายไว้ในการฝัง CSS ได้รับการปรับปรุงด้วย CSSNestedDeclarations

การรองรับเบราว์เซอร์

  • Chrome: 130
  • Edge: 130
  • Firefox: 132
  • Safari: ไม่รองรับ

แอตทริบิวต์ connected ซีเรียลบนเว็บและเหตุการณ์การเชื่อมต่อ RFCOMM

Chrome 130 เพิ่มแอตทริบิวต์ SerialPort.connected แบบบูลีน แอตทริบิวต์จะแสดงผลเป็น "จริง" หากพอร์ตอนุกรมเชื่อมต่อกันตามตรรกะ

เมื่อใช้ฟีเจอร์นี้ พอร์ตอนุกรม RFCOMM ของบลูทูธจะส่งเหตุการณ์เหล่านี้เมื่อพอร์ตเชื่อมต่อหรือยกเลิกการเชื่อมต่อตามตรรกะ

ฟีเจอร์นี้มีไว้เพื่อให้แอปพลิเคชันตรวจจับได้เมื่อพอร์ตอนุกรม Bluetooth RFCOMM พร้อมใช้งานโดยไม่ต้องเปิดพอร์ต

ดูข้อมูลเพิ่มเติมในการอัปเดต RFCOMM บลูทูธในหมายเลขซีเรียลเว็บ

การรองรับเบราว์เซอร์

  • Chrome: 130
  • Edge: ไม่รองรับ
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

การแก้ไขการช่วยเหลือพิเศษใน Safari

เวอร์ชัน Safari 18.1 เปิดตัวต่อจาก Safari 18 อย่างรวดเร็ว และแก้ไขปัญหาการช่วยเหลือพิเศษหลายประการ โดยเฉพาะกับ display: contents

การเปิดตัวเบราว์เซอร์รุ่นเบต้า

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

Firefox 133 รองรับอินเทอร์เฟซ ImageDecoder, ImageTrackList และ ImageTrack ของ WebCodecs API ซึ่งช่วยให้สามารถถอดรหัสรูปภาพจากเธรดหลักและเธรดสำหรับงานได้

นอกจากนี้ Firefox 133 ยังรองรับ WorkerNavigator.permissions ด้วย

Chrome 131 มีการสืบทอดการไฮไลต์ของ CSS ซึ่ง CSS ไฮไลต์คลาสเทียม เช่น ::selection และ ::highlight จะรับพร็อพเพอร์ตี้ผ่านเชนไฮไลต์เทียมแทนเชนองค์ประกอบ ผลลัพธ์ที่ได้คือรูปแบบที่ใช้งานง่ายขึ้นสำหรับการรับค่าของพร็อพเพอร์ตี้ในไฮไลต์

นอกจากนี้ Chrome 131 ยังรองรับ@pageกล่องระยะขอบของสื่อแบบแบ่งหน้า CSS เพื่อให้คุณระบุส่วนหัวและส่วนท้ายที่กำหนดเองได้เมื่อพิมพ์จากเว็บ