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

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

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

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

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

Browser Support

  • Chrome: 122.
  • Edge: 122.
  • Firefox: 131.
  • Safari: not supported.

Source

ข้อความที่ตัดตอนมา

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

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 131.
  • Safari: 18.2.

Source

Cookies Having Independent Partitioned State (CHIPS)

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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 131.
  • Safari: not supported.

Source

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

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

Browser Support

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

Source

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

Browser Support

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

Source

fetchPriority

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

Browser Support

  • Chrome: 130.
  • Edge: 130.
  • Firefox: 132.
  • Safari: 18.2.

Source

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

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

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

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

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

Browser Support

  • Chrome: 130.
  • Edge: 130.
  • Firefox: not supported.
  • Safari: not supported.

Source

การแก้ไขการช่วยเหลือพิเศษใน 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 เพื่อให้คุณระบุส่วนหัวและส่วนท้ายที่กำหนดเองได้เมื่อพิมพ์จากเว็บ