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

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

Rachel Andrew

เผยแพร่: 29 พฤษภาคม 2026

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

Chrome 148, Firefox 151 และ Safari 26.5 เปิดตัวในเวอร์ชันเสถียรในช่วงเดือนพฤษภาคม โพสต์นี้จะมาดูฟีเจอร์ใหม่ๆ มากมาย ในเดือนนี้

:open คลาสสมมติ CSS จะกลายเป็น Baseline

Safari 26.5 ส่วนใหญ่เป็นการเผยแพร่การแก้ไขฟีเจอร์ที่มีอยู่ อย่างไรก็ตาม ยังรวมถึงการรองรับ:open คลาสเสมือนด้วย ซึ่งทำให้ฟีเจอร์นี้ พร้อมใช้งานใน Baseline

:openคลาสจำลองช่วยให้คุณจัดรูปแบบองค์ประกอบที่มีสถานะ "เปิด" และ "ปิด" เมื่อเปิดอยู่ ซึ่งจะมีผลกับองค์ประกอบต่างๆ เช่น <details> และ <dialog> เมื่อเปิดอยู่ รวมถึงองค์ประกอบ <select> และ <input> (เช่น เครื่องมือเลือกสีหรือวันที่) เมื่ออินเทอร์เฟซเครื่องมือเลือกแสดงอยู่ ซึ่งเป็นทางเลือกที่สะอาดและมีความหมายมากกว่าการจัดรูปแบบโดยใช้ แอตทริบิวต์ เช่น details[open]

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 136.
  • Safari: 26.5.

Source

การค้นหาคอนเทนเนอร์แบบชื่อ CSS เท่านั้นจะกลายเป็น Baseline

เมื่อ Chrome 148 เปิดตัวในเดือนนี้ การค้นหาคอนเทนเนอร์ที่มีชื่อเท่านั้นจะ พร้อมใช้งานเป็นฟีเจอร์พื้นฐานแล้ว

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

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 149.
  • Safari: 26.4.

การค้นหาสไตล์คอนเทนเนอร์สำหรับพร็อพเพอร์ตี้ที่กำหนดเองจะกลายเป็นพื้นฐาน

Firefox 151 เปิดตัวการรองรับstyle()ใน @container ซึ่งทำให้คำค้นหาสไตล์คอนเทนเนอร์สำหรับพร็อพเพอร์ตี้ที่กำหนดเองพร้อมใช้งานเป็น Baseline ใหม่

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

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

การโหลดแบบ Lazy Loading สำหรับองค์ประกอบวิดีโอและเสียง

Chrome 148 ขอแนะนำการโหลดเล ซี่ โดยค่าเริ่มต้นสำหรับองค์ประกอบ <video> และ <audio> ที่มีแอตทริบิวต์ loading="lazy"

เช่นเดียวกับองค์ประกอบ <img> และ <iframe> ตอนนี้คุณสามารถสั่งให้เบราว์เซอร์ หน่วงเวลาการโหลดทรัพยากรสื่อจนกว่าจะอยู่ใกล้กับวิวพอร์ตได้แล้ว ซึ่งจะช่วยปรับปรุงประสิทธิภาพการโหลดหน้าเว็บ ประหยัดแบนด์วิดท์ และลดปริมาณการใช้อินเทอร์เน็ตสำหรับผู้ใช้ ดูข้อมูลเพิ่มเติมจากทีมที่ใช้ฟีเจอร์นี้ได้ที่วิธีใช้การโหลดแบบ Lazy สำหรับวิดีโอและเสียง HTML มาตรฐานบนเว็บในปัจจุบัน

Browser Support

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

Source

Document Picture-in-Picture API

Firefox 151 เปิดตัวการรองรับ Document Picture-in-Picture API บน แพลตฟอร์มเดสก์ท็อป

Document Picture-in-Picture API ต่างจาก Picture-in-Picture API มาตรฐานที่ให้คุณดู<video> องค์ประกอบในหน้าต่างที่อยู่ด้านบนสุดเสมอ โดย Document Picture-in-Picture API จะช่วยให้คุณ เปิดหน้าต่างที่อยู่ด้านบนสุดเสมอซึ่งมีเนื้อหา HTML ที่กำหนดเองได้ ซึ่งจะช่วยให้มี การซ้อนทับแบบอินเทอร์แอกทีฟที่สมบูรณ์ เช่น ตารางผู้เข้าร่วมการประชุมทางวิดีโอ แถบเลื่อนราคาหุ้นแบบอินเทอร์แอกทีฟ หรือตัวจับเวลาที่ยังคงอยู่แม้ว่าจะออกจาก หน้าเว็บไปแล้วก็ตาม

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: 151.
  • Safari: not supported.

Source

Web Serial API ขยายการรองรับแพลตฟอร์ม

Firefox 151 เพิ่มการรองรับ Web Serial API ในแพลตฟอร์มเดสก์ท็อป และ Chrome 148 เพิ่มการรองรับใน Android

Web Serial API ช่วยให้เว็บไซต์อ่านและเขียนไปยังอุปกรณ์ซีเรียลได้ เช่น ไมโครคอนโทรลเลอร์ เครื่องพิมพ์ 3 มิติ บอร์ดพัฒนาซอฟต์แวร์ และฮาร์ดแวร์อุปกรณ์ต่อพ่วง ใน Firefox การใช้ Web Serial API กำหนดให้ผู้ใช้ต้องติดตั้งส่วนเสริมสิทธิ์สำหรับเว็บไซต์ที่สร้างขึ้นสังเคราะห์ เพื่อให้มั่นใจว่ามีกลไกที่ปลอดภัยและควบคุมได้ในการจัดการการเข้าถึง

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 151.
  • Safari: not supported.

Source

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

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

Chrome 149 เวอร์ชันเบต้ามีการอัปเดต CSS ที่น่าสนใจ เช่น การตกแต่งช่องว่าง CSS ซึ่งช่วยให้คุณจัดรูปแบบช่องว่างระหว่างรายการ Flex และ Grid ได้ นอกจากนี้ยังรองรับ path() และ shape() รวมถึงฟังก์ชันรูปร่างพื้นฐาน rect() และ xywh() ในพร็อพเพอร์ตี้ shape-outside และ path-length เป็นพร็อพเพอร์ตี้ CSS ในส่วนของ API ตอนนี้เมธอดการเลื่อนแบบเป็นโปรแกรม เช่น scrollTo(), scrollBy() และ scrollIntoView() จะแสดงผล Promise ที่จะแก้ไขเมื่อการเลื่อนแบบสมูทเสร็จสมบูรณ์ และหน้าเว็บที่มีการเชื่อมต่อ WebSocket ที่ใช้งานอยู่จะมีสิทธิ์ใช้การแคชย้อนกลับ/ไปข้างหน้า (BFCache)

Firefox 152 เบต้าเปิดตัวการรองรับพร็อพเพอร์ตี้ field-sizing อย่างเต็มรูปแบบ ซึ่งช่วยให้ตัวควบคุมแบบฟอร์มปรับขนาดให้พอดีกับเนื้อหาได้โดยอัตโนมัติ นอกจากนี้ ยังเพิ่มพร็อพเพอร์ตี้ actions และ maxActions ลงในอินเทอร์เฟซ Notification และรองรับ options.pseudoElement ใน Element.getAnimations()