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

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

Rachel Andrew

เผยแพร่: 2 ตุลาคม 2026

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

นี่เป็นเดือนแรกของการเผยแพร่ Chrome และ Firefox ทุกๆ 2 สัปดาห์ ซึ่งหมายความว่า Chrome 153, Chrome 154, Firefox 155, Firefox 156, Firefox 157 และ Safari 27 จะเปิดตัวในเวอร์ชันเสถียรในช่วงเดือนกันยายน 2026 โพสต์นี้จะพูดถึงฟีเจอร์ใหม่ๆ ที่เปิดตัวในเบราว์เซอร์ต่างๆ รวมถึงฟีเจอร์จำนวนมากที่เข้าถึง Baseline Newly available

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

Firefox 155 เพิ่มการรองรับฟังก์ชันคณิตศาสตร์ CSS progress() ทำให้ฟังก์ชันนี้พร้อมใช้งานใน Baseline Newly

ฟังก์ชัน progress() จะแสดงผล <number> ที่แสดงตำแหน่งของการคำนวณหนึ่งๆ ระหว่างค่าเริ่มต้นและค่าสิ้นสุด โดยปกติแล้ว ผลลัพธ์จะอยู่ระหว่าง 0 กับ 1 ซึ่งทำให้มีประโยชน์ในการกำหนดขนาด ความทึบ หรือสีแบบลื่นไหลตามขนาดของคอนเทนเนอร์หรือวิวพอร์ต ทั้ง Firefox 155 และ Safari 27 ยังรองรับตัวเลือกคีย์เวิร์ด no-clamp ด้วย ซึ่งจะช่วยให้ค่าความคืบหน้าที่แสดงผลขยายออกไปต่ำกว่า 0 หรือสูงกว่า 1 ได้

.card {
  opacity: progress(100vw, 320px, 1200px);
}

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: 155.
  • Safari: 26.

Source

สีอัลฟ่าสัมพัทธ์ที่มี alpha() จะกลายเป็นสีพื้นฐาน

ทั้ง Firefox 155 และ Safari 27 ต่างก็เพิ่มการรองรับฟังก์ชันสีสัมพัทธ์ alpha() จาก CSS Color 5

ฟังก์ชัน alpha() จะใช้สีต้นทางและแสดงสีนั้นโดยมีช่องอัลฟ่า (ความโปร่งใส) ที่ปรับแล้ว พร้อมทั้งรักษาช่องสีและพื้นที่สีไว้ 

.overlay {
  background-color: alpha(var(--brand-color) / 50%);
}

เมื่อ Chrome 151, Firefox 155 และ Safari 27 รองรับ alpha() แล้ว ฟังก์ชันนี้จึงพร้อมใช้งานเป็น Baseline Newly

Browser Support

  • Chrome: 151.
  • Edge: 151.
  • Firefox: 155.
  • Safari: 27.

Source

revert-rule คีย์เวิร์ด CSS จะกลายเป็นพื้นฐาน

Safari 27 เพิ่มการรองรับคีย์เวิร์ด revert-rule ทั่วทั้ง CSS

ขณะที่ revert จะย้อนกลับการเรียงซ้อนไปยังต้นทางของผู้ใช้หรือ User-Agent และ revert-layer จะย้อนกลับไปยังเลเยอร์การเรียงซ้อนก่อนหน้า revert-rule จะย้อนกลับค่าของพร็อพเพอร์ตี้เป็นค่าที่พร็อพเพอร์ตี้จะมีหากไม่มีกฎสไตล์ปัจจุบัน revert-rule พร้อมใช้งานแล้วใน Chrome, Firefox และตอนนี้ Safari 27

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 150.
  • Safari: 27.

Source

ค่า <image> ใน light-dark() จะกลายเป็นค่าพื้นฐาน

Safari 27 เพิ่มการรองรับการใช้ค่า <image> ภายในฟังก์ชัน CSS light-dark()

ก่อนหน้านี้ light-dark() ใช้ได้เฉพาะค่า <color> แต่ตอนนี้สามารถสลับระหว่างรูปภาพ 2 รูป เช่น รูปภาพ url() หรือการไล่ระดับสี CSS โดยอิงตามธีมสว่างหรือธีมมืดที่ใช้งานอยู่ color-scheme ตอนนี้ <image> values ใน light-dark() พร้อมใช้งานเป็น Baseline Newly available แล้ว โดยรองรับใน Chrome, Firefox และ Safari 27

Browser Support

  • Chrome: 150.
  • Edge: 150.
  • Firefox: 150.
  • Safari: 27.

การยึดตำแหน่งการเลื่อนด้วย overflow-anchor จะกลายเป็นพื้นฐาน

Safari 27 เปิดใช้การยึดตำแหน่งเลื่อนและเพิ่มการรองรับพร็อพเพอร์ตี้ overflow-anchor CSS

การยึดตำแหน่งเลื่อนจะปรับตำแหน่งเลื่อนโดยอัตโนมัติเมื่อ DOM เปลี่ยนแปลง เหนือวิวพอร์ตที่มองเห็นได้ ซึ่งอาจทำให้เนื้อหาเลื่อนไปมาขณะที่ผู้ใช้ กำลังอ่านหรือโต้ตอบกับหน้าเว็บ คุณสามารถใช้ overflow-anchor: none เพื่อ เลือกไม่ให้องค์ประกอบที่เฉพาะเจาะจงทำหน้าที่เป็นโหนดยึด เมื่อ Safari 27 เข้าร่วมกับ Chrome และ Firefox แล้ว ตอนนี้การตรึงการเลื่อนจึงเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานแล้ว

Browser Support

  • Chrome: 56.
  • Edge: 79.
  • Firefox: 66.
  • Safari: 27.

Source

font-width พร็อพเพอร์ตี้และตัวอธิบาย @font-face จะกลายเป็นเกณฑ์พื้นฐาน

CSS Fonts 4 แทนที่ font-stretch ด้วย font-width เป็นชื่อต้นฉบับสำหรับการเลือกแบบอักษรปกติ แบบอักษรย่อ หรือแบบอักษรขยาย โดยยังคงใช้ font-stretch เป็นชื่อแทนเดิม

Firefox 155 เพิ่มการรองรับพร็อพเพอร์ตี้ font-width ของ CSS, font-width ตัวอธิบาย @font-face และ CSSStyleDeclaration.fontWidth นอกจากนี้ Chrome 154 ยัง เพิ่มตัวอธิบาย font-width ในกฎ @font-face และพร็อพเพอร์ตี้ width ในออบเจ็กต์ FontFace ด้วย font-width พร้อมให้บริการแล้วในตอนนี้ โดยทำงานร่วมกับการรองรับที่มีอยู่แล้วใน Safari

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 155.
  • Safari: 18.4.

Source

sizes="auto" สำหรับรูปภาพที่โหลดแบบ Lazy Loading จะกลายเป็น Baseline

Safari 27 เพิ่มการรองรับคีย์เวิร์ด auto ในแอตทริบิวต์ sizes ในองค์ประกอบ <img> ที่ใช้ loading="lazy"

เมื่อคุณระบุ sizes="auto" (หรือลิสต์ sizes ที่ขึ้นต้นด้วย auto) เบราว์เซอร์จะใช้ความกว้างของเลย์เอาต์ที่แสดงผลของรูปภาพที่โหลดแบบ Lazy Loading เพื่อเลือกแหล่งที่มาของรูปภาพที่เหมาะสมที่สุดจาก srcset sizes="auto" พร้อมใช้งานแล้วใน Baseline ใหม่ โดยรองรับใน Chrome, Firefox และตอนนี้ Safari 27

Browser Support

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

Source

การวนซ้ำแบบไม่พร้อมกันและReadableStreamออบเจ็กต์ที่โอนได้จะกลายเป็น Baseline

Safari 27 มีการอัปเดตหลายอย่างใน ReadableStream ดังนี้

  • รองรับการทำซ้ำแบบไม่พร้อมกันในออบเจ็กต์ ReadableStream โดยใช้ลูป for await...of และ ReadableStream.prototype.values()
  • รองรับการโอนReadableStreamออบเจ็กต์ระหว่างบริบทโดยใช้ postMessage()
  • รองรับเมธอดแบบคงที่ ReadableStream.from() เพื่อสร้าง ReadableStream จากออบเจ็กต์ที่วนซ้ำได้หรือออบเจ็กต์ที่วนซ้ำแบบอะซิงโครนัส (รองรับใน Firefox ด้วย)

ตอนนี้สตรีมที่วนซ้ำแบบไม่พร้อมกันและออบเจ็กต์ ReadableStream ที่โอนได้ พร้อมใช้งานใน Safari 27 แล้ว

Browser Support

  • Chrome: 124.
  • Edge: 124.
  • Firefox: 110.
  • Safari: 27.

AnimationEvent.animation และ TransitionEvent.animation กลายเป็น Baseline

Safari 27 เพิ่มพร็อพเพอร์ตี้ animation ลงใน AnimationEvent และพร็อพเพอร์ตี้ animation ลงใน TransitionEvent

พร็อพเพอร์ตี้นี้จะแสดงผลออบเจ็กต์ Animation ที่เชื่อมโยงกับเหตุการณ์ภาพเคลื่อนไหว CSS หรือเหตุการณ์การเปลี่ยน ซึ่งช่วยให้ตรวจสอบหรือควบคุมภาพเคลื่อนไหว ได้โดยตรงจากเครื่องมือตรวจหาเหตุการณ์ ตอนนี้พร็อพเพอร์ตี้นี้พร้อมใช้งานใน Baseline แล้ว เนื่องจาก Chrome, Firefox และ Safari 27 รองรับพร็อพเพอร์ตี้นี้

Browser Support

  • Chrome: 151.
  • Edge: 151.
  • Firefox: 152.
  • Safari: 27.

Source

ตัวเลือก maxAge ใน cookieStore.set() จะกลายเป็นพื้นฐาน

Safari 27 เพิ่มการรองรับตัวเลือก maxAge เมื่อตั้งค่าคุกกี้ด้วย cookieStore.set() ซึ่งช่วยให้คุณระบุอายุของคุกกี้เป็นระยะเวลาในหน่วยวินาทีแทนที่จะ คำนวณการประทับเวลา expires แบบสัมบูรณ์ maxAge ตัวเลือกนี้พร้อมใช้งานแล้วใน Chrome, Firefox และ Safari 27

Browser Support

  • Chrome: 145.
  • Edge: 145.
  • Firefox: 148.
  • Safari: 27.

<select>ที่ปรับแต่งได้ใน Safari 27

Safari 27 เพิ่มการรองรับ<select>เมนูที่ปรับแต่งได้โดยใช้ appearance: base-selectและองค์ประกอบ <selectedcontent> ซึ่งจะเข้าร่วมกับ Chrome

การเลือกใช้ <select> และองค์ประกอบเสมือน ::picker(select) ใน appearance: base-select จะเปลี่ยนการควบคุมไปเป็นการแสดงผลพื้นฐานที่จัดรูปแบบได้ ซึ่งช่วยให้มีเนื้อหา HTML แบบริชมีเดียภายในองค์ประกอบ <option> และการจัดรูปแบบที่กำหนดเองสำหรับ ปุ่มและเครื่องมือเลือกแบบเลื่อนลง

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: behind a flag.
  • Safari: 27.

องค์ประกอบประกาศ <camera> และ <microphone> ใน Chrome

Chrome 153 เปิดตัวองค์ประกอบความสามารถ HTML <camera> และ <microphone>

<camera> และ <microphone> สร้างขึ้นจากองค์ประกอบ <usermedia> เพื่อให้การควบคุมแบบประกาศที่ผู้ใช้เปิดใช้งานโดยเฉพาะสำหรับการขอสิทธิ์เข้าถึงการจับภาพวิดีโอหรือเสียงแบบความสามารถเดียวโดยไม่ต้องทริกเกอร์ข้อความแจ้งขอสิทธิ์ที่สคริปต์เริ่มต้นเมื่อการโหลดหน้าเว็บ

Browser Support

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

Iterator JavaScript และPromiseส่วนเพิ่มเติม

Chrome 153 เพิ่ม Iterator.prototype.join() พร้อมกับการทำซ้ำร่วมกันโดยใช้ Iterator.zip() และ Iterator.zipKeyed()

Browser Support

  • Chrome: 153.
  • Edge: 153.
  • Firefox: 148.
  • Safari Technology Preview: supported.

Source

Firefox 155 ใช้ Promise.allKeyed() และ Promise.allSettledKeyed() ซึ่งยอมรับออบเจ็กต์พจนานุกรมของ Promise และเปลี่ยนเป็นออบเจ็กต์ที่มี คีย์เดียวกัน

Browser Support

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

Source

ข้อมูลอัปเดต WebTransport ใน Firefox 155

Firefox 115 ขยายการใช้งาน WebTransport ดังนี้

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: 155.
  • Safari: 26.4.

Source

Service Worker Static Routing API ใน Safari 27

Safari 27 เพิ่มการรองรับ Service Worker Static Routing API ผ่าน InstallEvent.addRoutes()

API นี้ช่วยให้ Service Worker ลงทะเบียนกฎการกำหนดเส้นทางแบบประกาศได้ในเวลาติดตั้ง เพื่อให้คำขอที่ตรงกันข้ามสามารถข้ามการเริ่มต้น Service Worker และดึงข้อมูลจากเครือข่ายหรือแคชได้โดยตรง ซึ่งจะช่วยปรับปรุงประสิทธิภาพการนำทาง

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: 27.

Source

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

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

Chrome 155 เวอร์ชันเบต้ารวม CSS margin-trim, symbols() และ text-decoration-skip-spaces พร้อมรองรับการถอดรหัส JPEG XL (image/jxl) การนำเข้าโมดูลข้อความ (import ... with { type: "text" }) และ การรองรับการออก Digital Credentials API

Chrome 156 เวอร์ชันเบตารวมฟังก์ชัน CSS random(), พร็อพเพอร์ตี้แบบย่อของ CSS corner , คอนเทนเนอร์เลื่อนแกนเดียว, scroll-snap-type: pair, พร็อพเพอร์ตี้ image-animation และคลาสเสมือน :animated-image, คลาสเสมือนของสถานะองค์ประกอบสื่อ (:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked), การประเมินโมดูลที่เลื่อนออกไป (import defer) รวมถึงองค์ประกอบ HTML <install> และ Web Install API

Safari 27.2 เบต้าเพิ่มการรองรับการจัดแนวการล้น safe และ unsafe เมื่อจับคู่กับ normal, เปิดใช้การจัดแนว safe ในกล่องที่มีตำแหน่งคงที่และองค์ประกอบ ::picker(select) และเปลี่ยนชื่อ flow-tolerance เป็น fit-tolerance สำหรับ display: grid-lanes