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

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

Rachel Andrew

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

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

Chrome 146, Firefox 149 และ Safari 26.4 เปิดตัวในเวอร์ชันเสถียรในช่วงเดือนมีนาคม โพสต์นี้จะพูดถึงฟีเจอร์ใหม่ๆ ที่จะเปิดตัวบนแพลตฟอร์มในเดือนนี้

เงื่อนไขการค้นหาคอนเทนเนอร์ที่ไม่บังคับ

ทั้ง Firefox 149 และ Safari 26.4 รองรับการค้นหา@container แบบชื่อเท่านั้นที่ไม่มีเงื่อนไข ซึ่งจะช่วยให้คุณจับคู่กับคอนเทนเนอร์ตามชื่อของคอนเทนเนอร์เท่านั้น ทำให้การจัดรูปแบบองค์ประกอบตามบริบทของคอนเทนเนอร์เป็นเรื่องง่ายขึ้นโดยไม่ต้องระบุข้อจำกัดด้านขนาดหรือสไตล์

ภาพเคลื่อนไหวที่ทริกเกอร์เมื่อเลื่อน

Chrome 146 เพิ่มการควบคุมภาพเคลื่อนไหวตามตำแหน่งการเลื่อน ฟีเจอร์นี้ช่วยให้ คุณสร้างการโต้ตอบแบบประกาศด้วย CSS โดยส่งงานไปยัง Worker Thread และปรับปรุงประสิทธิภาพ นอกจากนี้ ยังมีอินเทอร์เฟซ JavaScript สำหรับภาพเคลื่อนไหวบนเว็บ ด้วย ดูข้อมูลเพิ่มเติมได้ที่ ภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อน CSS จะพร้อมใช้งานเร็วๆ นี้

Browser Support

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

พร็อพเพอร์ตี้ trigger-scope

Chrome 146 มาพร้อมกับภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อนและพร็อพเพอร์ตี้ trigger-scope ซึ่งจะช่วยให้คุณจำกัดระดับการมองเห็นชื่อทริกเกอร์ของภาพเคลื่อนไหวได้ จึงช่วยแยกการโต้ตอบจากภาพเคลื่อนไหวไปยังทริกเกอร์และหลีกเลี่ยง การขัดแย้งของชื่อส่วนกลาง

Browser Support

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

ค่า hint ของป๊อปโอเวอร์

ตอนนี้ Firefox 149 รองรับค่า hint สำหรับแอตทริบิวต์ส่วนกลาง popover แล้ว ป๊อปโอเวอร์ที่มีค่า hint จะไม่ปิดป๊อปโอเวอร์ auto เมื่อแสดง แต่จะปิดป๊อปโอเวอร์ hint อื่นๆ ซึ่งช่วยให้ควบคุมลักษณะการทำงานของป๊อปโอเวอร์ได้ละเอียดยิ่งขึ้น

Browser Support

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

เลนตารางกริด

Safari 16.4 รองรับ display: grid-lanes ซึ่งเป็นค่าของ display ที่เปิดใช้เลย์เอาต์สไตล์เมสันรี

Browser Support

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

ฟังก์ชันทางคณิตศาสตร์ในแอตทริบิวต์ sizes

Safari 26.4 เพิ่มการรองรับการใช้ฟังก์ชันทางคณิตศาสตร์ min(), max() และ clamp() ในแอตทริบิวต์ sizes ขององค์ประกอบ <img> ซึ่งจะช่วยให้การโหลดรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณามีความยืดหยุ่นมากขึ้น

การจัดลำดับการวนซ้ำ JavaScript

ตอนนี้ทั้ง Chrome 146 และ Safari 26.4 รองรับการจัดลำดับตัววนซ้ำแล้ว โดยได้เปิดตัว Iterator.concat(...items) เพื่อสร้างตัววนซ้ำด้วยการจัดลำดับตัววนซ้ำที่มีอยู่ ตอนนี้ฟีเจอร์นี้พร้อมใช้งานใน Baseline Newly แล้ว

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 147.
  • Safari: 26.4.

Source

อินเทอร์เฟซ CloseWatcher

Firefox 149 เพิ่มการรองรับอินเทอร์เฟซ CloseWatcher ซึ่งจะช่วยให้ นักพัฒนาแอปสามารถใช้คอมโพเนนต์ที่ปิดได้โดยใช้กลไก ดั้งเดิมของอุปกรณ์ เช่น ปุ่ม Esc ใน Windows หรือปุ่มย้อนกลับใน Android ในลักษณะเดียวกับกล่องโต้ตอบและป๊อปโอเวอร์ในตัว

Browser Support

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

Source

การเปิดตัวเบราว์เซอร์เวอร์ชันเบต้า

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

Chrome 147 เบต้า

Chrome 147 เบต้ามี contrast-color() ซึ่งเป็นฟังก์ชัน CSS ที่แสดงผลเป็นสีดำหรือสีขาว ขึ้นอยู่กับสีที่ให้คอนทราสต์สูงสุดเมื่อเทียบกับสีอาร์กิวเมนต์ นอกจากนี้ ยังมีborder-shapeและการเปลี่ยนฉากมุมมองที่กำหนดขอบเขตขององค์ประกอบด้วย

Firefox 150 เบต้าเพิ่มคีย์เวิร์ด revert-rule CSS customeElementRegistry สำหรับองค์ประกอบและ DocumentOrShadowRoot และ light-dark() สำหรับรูปภาพ