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

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

Rachel Andrew

รุ่นต่างๆ ของเบราว์เซอร์ที่เสถียร

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

แอคคอร์ดพิเศษที่มีแอตทริบิวต์ name สำหรับ <details>

Firefox 130 รองรับแอตทริบิวต์ name ขององค์ประกอบ <details> กลุ่มนี้ <details> ซึ่งมีได้เพียงองค์ประกอบเดียวภายในกลุ่มเท่านั้นที่สามารถเปิดที่ ซึ่งจะช่วยให้คุณสร้างแอคคอร์เดียนพิเศษได้โดยไม่ต้องใช้ JavaScript

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

  • Chrome: 120
  • Edge: 120
  • Firefox: 130
  • Safari: 17.2

เคลื่อนไหวเป็นอัตโนมัติ (และอื่นๆ)

Chrome 129 เพิ่มพร็อพเพอร์ตี้ interpolate-size ของ CSS และฟังก์ชัน calc-size()

พร็อพเพอร์ตี้ CSS interpolate-size ช่วยให้หน้าเว็บเลือกใช้ภาพเคลื่อนไหวและ การเปลี่ยนคีย์เวิร์ดการกำหนดขนาดตามหลัก CSS เช่น auto, min-content และ fit-contentในกรณีที่คีย์เวิร์ดเหล่านั้นทำให้เป็นภาพเคลื่อนไหวได้

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

  • Chrome: 129
  • Edge: ไม่รองรับ
  • Firefox: ไม่สนับสนุน
  • Safari: ไม่รองรับ

แหล่งที่มา

ฟังก์ชัน calc-size() ของ CSS เป็นฟังก์ชัน CSS ที่คล้ายกับ calc() อย่างไรก็ตาม ยังสนับสนุนการดำเนินการกับคีย์เวิร์ดที่ปรับขนาดที่สนับสนุนเพียง 1 คำเท่านั้น คีย์เวิร์ดด้านขนาดที่รองรับ ได้แก่ auto, min-content, max-content และ fit-content

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

  • Chrome: 129
  • ขอบ: 129
  • Firefox: ไม่สนับสนุน
  • Safari: ไม่รองรับ

แหล่งที่มา

ดูข้อมูลเพิ่มเติมในAnimate to height: auto; (และคำค้นหาการปรับขนาดอื่นๆ ที่เกี่ยวข้อง) ใน CSS

จัดรูปแบบระยะเวลาใน JavaScript

นอกจากนี้ใน Chrome 129 คือ Intl.DurationFormat ซึ่งจะให้วิธีการจัดรูปแบบ เช่น "1 ชม. 40 นาที 30 วินาที" ซึ่งรองรับหลายภาษา

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

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

แหล่งที่มา

WebCodecs API

API ของตัวแปลงรหัสเว็บ รองรับการทำงานบนเดสก์ท็อปใน Firefox 130 ทำให้ เพื่อให้นักพัฒนาซอฟต์แวร์มีสิทธิ์เข้าถึงเฟรมแต่ละเฟรมของสตรีมวิดีโอได้ในระดับต่ำ เป็นส่วนๆ ของเสียง อินเทอร์เฟซใหม่ ได้แก่ VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame และ VideoColorSpace API นี้ไม่เหมือน ทำให้เกณฑ์ใหม่พร้อมใช้งาน เนื่องจาก Firefox สำหรับ Android ยังไม่รองรับ แต่ก็มีการสนับสนุน Firefox Nightly สำหรับ Android

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

  • Chrome: 94.
  • ขอบ: 94
  • Firefox: 130
  • Safari: 16.4

แหล่งที่มา

การค้นหารูปแบบ CSS สำหรับพร็อพเพอร์ตี้ที่กำหนดเอง

Safari 18 รองรับฟีเจอร์ใหม่ๆ มากมาย รวมถึงการค้นหารูปแบบ CSS การค้นหารูปแบบจะสร้างรูปแบบที่ใช้ซ้ำได้ และนำไปใช้เป็น กลุ่ม เช่น เมื่อคุณมีคอมโพเนนต์ที่ใช้ซ้ำได้ซึ่งมีหลายรูปแบบ

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

  • Chrome: 111.
  • Edge: 111
  • Firefox: ไม่สนับสนุน
  • Safari: 18.

แหล่งที่มา

ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาสไตล์ CSS

การเปลี่ยนมุมมองเอกสารเดียวกัน

Safari 18 ยังรองรับการเปลี่ยนมุมมองเอกสารเดียวกันสำหรับ SPA ด้วย ซึ่งจะช่วยให้คุณสร้างการเปลี่ยนภาพระหว่างสถานะต่างๆ ของแอปได้

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

  • Chrome: 111
  • Edge: 111
  • Firefox: ไม่รองรับ
  • Safari: 18.

แหล่งที่มา

ดูข้อมูลเพิ่มเติมเกี่ยวกับ การเปลี่ยนมุมมองเอกสาร

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

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

Firefox 131 มีโปรแกรมช่วยทำซ้ำ JavaScript ใหม่ และ เปิดใช้คุกกี้ซึ่งมีสถานะการแบ่งพาร์ติชันอิสระ (CHIPS) แล้ว

Chrome 130 รองรับ box-decoration-break: clone ทั้งสำหรับใช้งานในหน้า การกระจาย Fragment (เลย์เอาต์แบบเส้น) และบล็อก Fragment (Fragment ที่สร้างขึ้นสำหรับ การพิมพ์และแบบหลายคอลัมน์) นอกจากนี้ยังมีการรายงานข้อผิดพลาดที่ดีขึ้นใน IndexedDB และแอตทริบิวต์ connected ใหม่สำหรับอินเทอร์เฟซเว็บซีเรียล SerialPort

Safari 18.1 เป็นเวอร์ชันการแก้ไขข้อบกพร่องของฟีเจอร์ที่มีอยู่