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

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

Rachel Andrew

เผยแพร่: 31 มีนาคม 2025

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

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

คลาสจำลองใหม่ :has-slotted และ :open

Firefox 136 รองรับคลาสจำลอง :has-slotted ซึ่งใช้เพื่อจัดสไตล์องค์ประกอบใน <template> ที่มีการเพิ่มเนื้อหาลงในองค์ประกอบ <slot> เมื่อแสดงผลคอมโพเนนต์เว็บ

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 136.
  • Safari: not supported.

Source

คลาสจำลอง :open ช่วยให้คุณเลือกองค์ประกอบที่อยู่ในสถานะเปิดได้ ซึ่งมีผลกับองค์ประกอบ <details>, <dialog>, <input> ที่มีเครื่องมือเลือก และองค์ประกอบ <select> เมื่อช่องการเลือกแบบเลื่อนลงเปิดอยู่

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 136.
  • Safari: not supported.

Source

Intl.DurationFormat

Firefox 136 ยังรองรับ Intl.DurationFormat ด้วย ซึ่งจะช่วยให้คุณจัดรูปแบบระยะเวลาโดยคำนึงถึงภาษา ฟีเจอร์นี้จะรวมอยู่ใน Baseline และคุณสามารถดูข้อมูลเพิ่มเติมได้ในหัวข้อIntl.DurationFormat พร้อมให้บริการใน Baseline แล้ว

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: 136.
  • Safari: 16.4.

Source

ค่า plaintext-only ของแอตทริบิวต์ contenteditable

ฟีเจอร์อีกอย่างหนึ่งที่กลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่ใน Firefox เวอร์ชันนี้คือค่า plaintext-only ของแอตทริบิวต์ส่วนกลาง contenteditable อ่านเกี่ยวกับค่านี้ในหัวข้อตอนนี้ค่าแอตทริบิวต์ "plaintext-only" ของ contenteditable เปลี่ยนเป็น "Baseline ใหม่" แล้ว

Browser Support

  • Chrome: 51.
  • Edge: ≤79.
  • Firefox: 136.
  • Safari: ≤13.1.

โหมดการเขียนแนวนอนสำหรับ CSS

Safari 18.4 รองรับ writing-mode: sideways-rl และ writing-mode: sideways-lr ค่าเหล่านี้จะใช้เมื่อคุณต้องการแสดงข้อความในแนวตั้งเพื่อเหตุผลในการนำเสนอ ตอนนี้ควรเปลี่ยนเป็น "Baseline ใหม่พร้อมใช้งาน"

Browser Support

  • Chrome: 132.
  • Edge: 132.
  • Firefox: 43.
  • Safari: 18.4.

ฟังก์ชัน CSS shape()

นอกจากนี้ Safari 18.4 ยังมีฟังก์ชัน shape() ของ CSS ซึ่งช่วยให้ใช้รูปร่างอิสระที่ปรับเปลี่ยนขนาดได้ในส่วน clip-path

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox Technology Preview: supported.
  • Safari: 18.4.

Source

ClipboardItem.support()

Safari 18.4 ใช้เมธอด support() สําหรับ ClipboardItem() ซึ่งจะช่วยให้คุณเห็นว่าระบบรองรับรูปแบบใดบ้างในระหว่างการดำเนินการกับคลิปบอร์ด และตอนนี้ Baseline ใหม่พร้อมให้ใช้งานแล้ว

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 127.
  • Safari: 18.4.

Source

ปิดไฟสำหรับ <dialog>

ฟีเจอร์ที่ยอดเยี่ยมอย่างหนึ่งของ Popover API คือลักษณะการปิดแบบเบา ตอนนี้ลักษณะการทํางานนี้เป็นส่วนหนึ่งของ <dialog> ซึ่งใช้งานใน Chrome 134 โดยมีแอตทริบิวต์ closedby ใหม่ที่ใช้ควบคุมลักษณะการทํางานนี้

Browser Support

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

ตอนนี้ระบบรองรับ Web Locks API ในพื้นที่เก็บข้อมูลที่ใช้ร่วมกันแล้ว

Chrome 134 ผสานรวม Web Locks API ไว้ในพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน วิธีนี้จะช่วยป้องกันสถานการณ์ เช่น กรณีที่การวัดการเข้าถึงข้ามเว็บไซต์อาจทําให้การรายงานซ้ำซ้อน เนื่องจากเงื่อนไขการแข่งขันที่อาจเกิดขึ้นภายในตรรกะ get() และ set()

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

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

Firefox 137 มีเมธอดแบบคงที่ Math.sumPrecise ซึ่งจะแสดงผลรวมของ Iterable (เช่น อาร์เรย์) เวอร์ชันนี้ยังมี Atomics.pause() ด้วย วิธีนี้จะบอกใบ้ให้ CPU ทราบว่าเธรดปัจจุบันอยู่ใน spinlock ขณะที่รอการเข้าถึงทรัพยากรที่แชร์

Chrome 135 มีฟีเจอร์ CSS หลายรายการที่เกี่ยวข้องกับการสร้างภาพสไลด์ รวมถึงองค์ประกอบ <select> ที่ปรับแต่งได้ และแอตทริบิวต์ command และ commandfor