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

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

Rachel Andrew

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

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

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

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

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

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

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

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

พร็อพเพอร์ตี้ interpolate-size ของ CSS ช่วยให้หน้าเว็บเลือกใช้ภาพเคลื่อนไหวและการเปลี่ยนรูปแบบของคีย์เวิร์ดการปรับขนาดตามค่าเริ่มต้นของ 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
  • Edge: 129
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

แหล่งที่มา

ดูข้อมูลเพิ่มเติมใน ภาพเคลื่อนไหวเป็นความสูง: auto; (และคีย์เวิร์ดการกำหนดขนาดเฉพาะอื่นๆ) ใน CSS

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

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

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

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

แหล่งที่มา

WebCodecs API

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

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

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

แหล่งที่มา

การค้นหาสไตล์ CSS สําหรับพร็อพเพอร์ตี้ที่กําหนดเอง

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

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

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

แหล่งที่มา

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

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

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

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

  • Chrome: 111
  • ขอบ: 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 ใหม่สําหรับอินเทอร์เฟซ Web Serial SerialPort

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