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

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

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

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

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

Browser Support

  • 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 ในกรณีที่ใช้คีย์เวิร์ดเหล่านั้นสร้างภาพเคลื่อนไหวได้

Browser Support

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

Source

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

Browser Support

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

Source

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

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

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

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

WebCodecs API

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

Browser Support

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Source

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

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

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

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

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

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

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

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

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