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

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

Rachel Andrew

เผยแพร่: 24 เมษายน 2026

การเปิดตัวเบราว์เซอร์เวอร์ชันเสถียร

Chrome 147 และ Firefox 150 เปิดตัวในเวอร์ชันเสถียรในช่วงเดือนเมษายน ไม่มีการเปิดตัว Safari เวอร์ชันเสถียรในเดือนนี้ โพสต์นี้จะพูดถึงฟีเจอร์ใหม่ๆ มากมายในเดือนนี้

ฟังก์ชัน CSS contrast-color() จะกลายเป็นฟังก์ชันพื้นฐาน

การเปิดตัว Chrome 147 พร้อมฟังก์ชัน contrast-color() ทำให้ฟีเจอร์การช่วยเหลือพิเศษที่มีประโยชน์นี้พร้อมใช้งานในเครื่องมือหลักทั้งหมด จึงทำให้ฟีเจอร์นี้เป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่

ฟังก์ชันนี้จะรับค่าสีและแสดงผลเป็นสีดำหรือสีขาว ขึ้นอยู่กับสีที่ให้คอนทราสต์สูงสุดเมื่อเทียบกับสีที่ระบุ ซึ่งจะช่วยให้มั่นใจได้ว่าข้อความของคุณเป็นไปตามข้อกำหนดด้านคอนทราสต์สำหรับการช่วยเหลือพิเศษ

Browser Support

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

Source

ตอนนี้คุณสมบัติช่วงภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนเป็นเกณฑ์พื้นฐานแล้ว

Firefox 150 รองรับพร็อพเพอร์ตี้ animation-range-start และ animation-range-end รวมถึงชวเลข animation-range ซึ่งจะทำให้พร็อพเพอร์ตี้เหล่านี้เป็น Baseline Newly available

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: not supported.
  • Safari: 26.

Source

ariaNotify() วิธี

Firefox 150 เพิ่มการรองรับเมธอด ariaNotify() ใน Document และ Element วิธีนี้ช่วยให้ผู้สร้างเนื้อหาสามารถจัดคิว สตริงข้อความเพื่อให้โปรแกรมอ่านหน้าจอประกาศได้

ซึ่งเป็นทางเลือกที่เชื่อถือได้และถูกหลักการยศาสตร์มากกว่าสำหรับรีเจียนแบบสดของ ARIA โดยเฉพาะอย่างยิ่งสำหรับการประกาศที่ไม่ได้เชื่อมโยงกับการอัปเดต DOM

Browser Support

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

Source

ขนาดอัตโนมัติสำหรับรูปภาพที่โหลดแบบ Lazy Loading

ตอนนี้ Firefox 150 รองรับคีย์เวิร์ด "auto" สำหรับแอตทริบิวต์ sizes ขององค์ประกอบ <img> แล้ว ซึ่งช่วยให้รูปภาพที่โหลดแบบ Lazy Loading ใช้ขนาดเลย์เอาต์รูปภาพที่คำนวณแล้วเพื่อเลือกแหล่งที่มาที่ดีที่สุดจาก srcset ซึ่งจะช่วยลดความซับซ้อนในการตั้งค่ารูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

Browser Support

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

Source

การเปลี่ยนฉากมุมมองที่กำหนดขอบเขตขององค์ประกอบ

Chrome 147 จะแสดง element.startViewTransition() ในองค์ประกอบ HTML ที่กำหนดเอง ซึ่งช่วยให้การเปลี่ยนภาพมีขอบเขตเป็นองค์ประกอบที่เฉพาะเจาะจงได้ ซึ่งหมายความว่า องค์ประกอบเสมือนจะได้รับผลกระทบจากคลิปและการเปลี่ยนรูปแบบขององค์ประกอบระดับบน และการเปลี่ยนภาพหลายรายการ สามารถทำงานพร้อมกันได้

พร็อพเพอร์ตี้ CSS border-shape

Chrome 147 เปิดตัวพร็อพเพอร์ตี้ border-shape ซึ่งช่วยให้คุณสร้าง เส้นขอบที่ไม่ใช่สี่เหลี่ยมผืนผ้าด้วยรูปทรงต่างๆ เช่น รูปหลายเหลี่ยมหรือวงกลมได้

แอตทริบิวต์เส้นทาง <textPath> SVG

Chrome 147 เพิ่มการรองรับแอตทริบิวต์ path ในองค์ประกอบ <textPath> SVG ซึ่งช่วยให้คุณกำหนดรูปเรขาคณิตของเส้นทางข้อความแบบอินไลน์ได้

Browser Support

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

การรองรับการโหลดล่วงหน้าของโมดูลสำหรับ JSON และสไตล์

Chrome 147 เพิ่มการรองรับประเภทโมดูล JSON และสไตล์เป็น<link rel="modulepreload">ปลายทาง

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: 26.2.

Math.sumPrecise

Chrome 147 ใช้ข้อเสนอ TC39 สำหรับ Math.sumPrecise ซึ่งแสดงผล ผลรวมที่แน่นอนของค่าใน Iterable ตอนนี้วิธีนี้เป็น Baseline Newly available แล้ว

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 137.
  • Safari: 26.2.

Source

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

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

Chrome 148 เบต้ามีคําค้นหาคอนเทนเนอร์แบบชื่อเท่านั้นใน CSS การโหลดเลย์ซีสําหรับองค์ประกอบวิดีโอและเสียง และฟังก์ชัน at-rule() สําหรับการตรวจหาฟีเจอร์ใน @supports

Firefox 151 เบต้ามีคําค้นหาสไตล์คอนเทนเนอร์ CSS

เบต้าของ Safari 26.5 รองรับ:openคลาสเสมือน<details>ในองค์ประกอบ <dialog>, <select> และ <input> รวมถึงการแก้ไขปัญหาจำนวนมาก