Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

Rachel Andrew Technical Writer

เผยแพร่เมื่อวันที่ 29 ตุลาคม 2026

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

Chrome 155, Chrome 156, Firefox 158, Firefox 159, Safari 27.1 และ Safari 27.2 เปิดตัวเป็นเวอร์ชันเสถียรในเดือนตุลาคม 2026 โพสต์นี้จะพูดถึงฟีเจอร์ใหม่ๆ ที่จะเปิดตัวในเบราว์เซอร์ต่างๆ ในเดือนนี้ โดยมีฟีเจอร์หลักหลายรายการที่พร้อมใช้งานใหม่ใน Baseline

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนกลายเป็น Baseline

Firefox 159 เปิดใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนโดยค่าเริ่มต้น

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนช่วยให้คุณลิงก์ความคืบหน้าของภาพเคลื่อนไหว CSS หรือ API ภาพเคลื่อนไหวของเว็บกับออฟเซ็ตการเลื่อนของคอนเทนเนอร์การเลื่อนได้โดยใช้ scroll-timeline และฟังก์ชัน scroll() หรือลิงก์กับระดับการมองเห็นขององค์ประกอบภายในพอร์ตการเลื่อนได้โดยใช้ view-timeline และฟังก์ชัน view() ซึ่งกำหนดด้วย animation-timeline

ด้วยการรองรับใน Chrome, Safari และตอนนี้ Firefox 159 ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนจึงพร้อมใช้งานใหม่ใน Baseline

Browser Support

Source

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

รีจิสทรีองค์ประกอบที่กำหนดเองที่กำหนดขอบเขตจะกลายเป็น Baseline

Firefox 159 เพิ่มการรองรับรีจิสทรีองค์ประกอบที่กำหนดเองที่กำหนดขอบเขต

ก่อนหน้านี้ องค์ประกอบที่กำหนดเองทั้งหมดต้องลงทะเบียนในรีจิสทรี window.customElements ส่วนกลางเดียว ซึ่งอาจทำให้เกิดการชนกันของชื่อเมื่อรวมคอมโพเนนต์จากไลบรารีหรือทีมต่างๆ ตอนนี้คุณสามารถสร้างอินสแตนซ์ CustomElementRegistry ที่เป็นอิสระโดยใช้คอนสตรัคเตอร์ CustomElementRegistry() และกำหนดขอบเขตคำจำกัดความของอินสแตนซ์นั้นให้กับ Shadow Tree ที่เฉพาะเจาะจงได้แล้ว พร็อพเพอร์ตี้ customElementRegistry ยังใช้ได้กับ Document, Element และ ShadowRoot ด้วย

ด้วยการรองรับใน Chrome, Safari และ Firefox 159 รีจิสทรีองค์ประกอบที่กำหนดเองที่กำหนดขอบเขตจึงพร้อมใช้งานใน Baseline แล้ว

Browser Support

Source

การรองรับรูปภาพ JPEG XL

ทั้ง Chrome 155 และ Firefox 158 จะเปิดใช้การรองรับรูปแบบรูปภาพ JPEG XL (image/jxl) โดยค่าเริ่มต้น

JPEG XL เป็นรูปแบบภาพแรสเตอร์ที่ไม่มีค่าสิทธิซึ่งได้มาตรฐาน ISO/IEC 18181 โดยรองรับการบีบอัดแบบสูญเสียบางส่วนและแบบไม่สูญเสียรายละเอียด, การถอดรหัสแบบโปรเกรสซีฟ, ขอบเขตสีกว้าง, High Dynamic Range (HDR), ความลึกของบิตสูง, ความโปร่งใส และภาพเคลื่อนไหว รวมถึงการแปลงไฟล์ JPEG ที่มีอยู่แบบไม่สูญเสียรายละเอียด Firefox 158 ยังอัปเดตส่วนหัว HTTP Accept เริ่มต้นสำหรับคำขอรูปภาพให้รวม image/jxl ด้วย

ดูข้อมูลเพิ่มเติมได้ในการจัดส่ง JPEG XL ใน Chrome

Browser Support

Source

เลขคณิตที่พิมพ์ CSS กลายเป็น Baseline

Firefox 158 เพิ่มการรองรับเลขคณิตที่พิมพ์ด้วย CSS ในฟังก์ชันทางคณิตศาสตร์ เช่น calc()

เลขคณิตที่พิมพ์ด้วย CSS ช่วยให้คุณหารค่า 2 ค่าของข้อมูลประเภทเดียวกันได้ แม้ว่าจะใช้หน่วยต่างกันก็ตาม เพื่อให้ได้ผลหาร <number> ที่ไม่มีหน่วย คุณสามารถใช้ผลลัพธ์ที่ไม่มีหน่วยนั้นได้โดยตรงในพร็อพเพอร์ตี้ที่ยอมรับตัวเลข (เช่น opacity หรือ line-height) หรือคูณด้วยหน่วยอื่นเพื่อแปลงระหว่างประเภท

เมื่อ Firefox 158 เพิ่มการรองรับที่มีอยู่แล้วใน Chrome และ Safari ตอนนี้เลขคณิตที่พิมพ์ CSS จึงเป็น Baseline ที่พร้อมใช้งานใหม่

Browser Support

`PerformanceResourceTiming.deliveryType`

Firefox 158 เพิ่มการรองรับพร็อพเพอร์ตี้ PerformanceResourceTiming.deliveryType

พร็อพเพอร์ตี้นี้จะระบุวิธีส่งทรัพยากร เช่น แสดงผล "cache" เมื่อมีการแสดงทรัพยากรจากแคช

Browser Support

Source

ฟังก์ชัน CSS `random()`

Chrome 156 เพิ่มการรองรับฟังก์ชัน CSS random()

ฟังก์ชัน random() จะสร้างค่าตัวเลขแบบสุ่มภายในช่วงต่ำสุดและสูงสุดที่ระบุ โดยมีช่วงการฝึกแบบไม่บังคับ โดยค่าเริ่มต้น การเรียก random() แต่ละครั้งจะแสดงผลเป็นค่าสุ่มที่แตกต่างกัน หรือคุณสามารถส่ง <random-key> เป็นอาร์กิวเมนต์แรกเพื่อแชร์ค่าสุ่มในพร็อพเพอร์ตี้หรือองค์ประกอบต่างๆ ได้ ดังนี้

ดูตัวอย่างได้ในบทความ Embracing playful imperfection with the CSS random() function ใน Smashing Magazine

Browser Support

Source

พร็อพเพอร์ตี้ CSS `margin-trim`

Chrome 155 เพิ่มการรองรับพร็อพเพอร์ตี้ CSS margin-trim ในคอนเทนเนอร์บล็อกและคอนเทนเนอร์แบบหลายคอลัมน์

คุณสามารถใช้ margin-trim ในคอนเทนเนอร์เพื่อละเว้นระยะขอบขององค์ประกอบย่อยที่ตรงกับขอบของคอนเทนเนอร์ เพื่อหลีกเลี่ยงระยะห่างเพิ่มเติมก่อนองค์ประกอบย่อยแรกหรือหลังองค์ประกอบย่อยสุดท้ายโดยไม่ต้องลบล้าง :first-child หรือ :last-child

ดูข้อมูลเพิ่มเติมได้ในนำระยะขอบเริ่มต้นและสิ้นสุดออกด้วยพร็อพเพอร์ตี้ margin-trim

Browser Support

Source

รูปแบบตัวนับในบรรทัดที่มีฟังก์ชัน CSS `symbols()`

Chrome 155 เปิดตัวการรองรับฟังก์ชัน CSS symbols()

ฟังก์ชัน symbols() ช่วยให้คุณกำหนดรูปแบบตัวนับแบบไม่ระบุชื่อได้โดยตรงภายใน list-style-type, รูปแบบย่อ list-style, counter() หรือ counters() โดยไม่ต้องประกาศ At-rule @counter-style ที่มีชื่อแยกต่างหาก

Browser Support

Source

พร็อพเพอร์ตี้ CSS `text-decoration-skip-spaces`

Chrome 155 เพิ่มพร็อพเพอร์ตี้ CSS text-decoration-skip-spaces ซึ่งควบคุมว่าเส้นตกแต่งข้อความ เช่น ขีดเส้นใต้ ขีดเส้นบน และขีดทับ จะข้ามอักขระช่องว่างหรือไม่ ซึ่งช่วยให้คุณป้องกันไม่ให้มีการวาดการตกแต่งใต้ช่องว่างนำหน้า ช่องว่างต่อท้าย หรือช่องว่างระหว่างคำได้

Browser Support

คลาสสมมติ `:navigation-source` CSS

Chrome 156 เปิดตัวคลาสเทียม CSS :navigation-source โดยจะจับคู่กับลิงก์ ปุ่ม หรือองค์ประกอบแบบฟอร์มที่เริ่มการนําทาง และเลือกองค์ประกอบนั้นไว้ตลอดการนําทาง

Browser Support

การนำเข้าโมดูลข้อความ JavaScript และการลองโหลดโมดูลที่ล้มเหลวอีกครั้ง

Chrome 155 เพิ่มการรองรับการนำเข้าโมดูลข้อความโดยใช้ import ... with { type: "text" } เช่นเดียวกับ Firefox แอตทริบิวต์การนำเข้า type: "text" จะโหลดเนื้อหาของโมดูลเป้าหมายเป็นสตริง JavaScript

Browser Support

Source

นอกจากนี้ Chrome 156 ยังอัปเดตลักษณะการโหลดโมดูลด้วย เพื่อไม่ให้มีการแคชการโหลดโมดูลที่ไม่สำเร็จอย่างถาวรอีกต่อไป ตอนนี้แอปพลิเคชันสามารถลองโหลดโมดูลที่ล้มเหลวอีกครั้งได้ เช่น โดยการเรียกใช้ import() อีกครั้งหลังจากเครือข่ายขัดข้องชั่วคราว

การอัปเดต WebTransport ใน Chrome และ Firefox

Firefox 158 และ Chrome 156 ต่างก็ขยายWebTransport:

Firefox 158 เพิ่มเมธอด WebTransport.getStats() เพื่อดึงข้อมูลสถิติการเชื่อมต่อและดาตาแกรม รวมถึงพร็อพเพอร์ตี้ WebTransport.supportsReliableOnly แบบคงที่ซึ่งระบุว่าเบราว์เซอร์รองรับเซสชัน WebTransport ผ่านการรับส่งข้อมูลที่เชื่อถือได้เท่านั้นหรือไม่

Browser Support

Source

Chrome 156 เพิ่มการรองรับการส่งส่วนหัวของคำขอ HTTP ที่กำหนดเองใน WebTransportOptions ระหว่างแฮนด์เชค CONNECT เริ่มต้นและการอ่านส่วนหัวการตอบกลับของเซิร์ฟเวอร์จากอินสแตนซ์ WebTransport

ตัวเลือก `Notification` `navigate` ใน Firefox

Firefox 158 เพิ่มการรองรับตัวเลือก navigate ในเครื่องมือสร้าง Notification() และ ServiceWorkerRegistration.showNotification() รวมถึงพร็อพเพอร์ตี้ Notification.navigate ซึ่งเข้าร่วมกับ Safari ตัวเลือกนี้จะระบุ URL สำหรับเบราว์เซอร์เพื่อไปยังหน้าเว็บเมื่อผู้ใช้คลิกการแจ้งเตือนของระบบ

Browser Support

Source

การอัปเดต HTML Sanitizer API ใน Firefox

Firefox 158 เพิ่มตัวเลือกการกำหนดค่า javascriptURLs และ Sanitizer.setJavascriptURLs() ลงใน HTML Sanitizer API ซึ่งจะควบคุมว่าจะนำแอตทริบิวต์ที่มี URL javascript: ออกหรือไม่เมื่อใช้วิธีการแทรก HTML ที่ไม่ปลอดภัย เช่น Element.setHTMLUnsafe()

Browser Support

Firefox 159 ยังอัปเดตเมธอดการล้างข้อมูลที่ปลอดภัย เช่น Element.setHTML() เพื่อตัดองค์ประกอบและแอตทริบิวต์ที่ไม่ต้องการออกระหว่างการแยกวิเคราะห์ แทนที่จะทำหลังจากสร้างแผนผัง DOM เพื่อให้ข้อความที่อยู่ติดกันยังคงอยู่ในโหนดข้อความเดียว

กำลังเปลี่ยนชื่อ `flow-tolerance` เป็น `fit-tolerance` ใน Safari

Safari 27.2 เปลี่ยนชื่อพร็อพเพอร์ตี้ flow-tolerance เป็น fit-tolerance สำหรับเลย์เอาต์เลนตารางกริด (display: grid-lanes) โดยคง flow-tolerance ไว้เป็นชื่อแทนที่เลิกใช้งานแล้ว

Browser Support

เบราว์เซอร์เวอร์ชันเบต้า

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

Chrome 157 เบต้ามีชวเลข corner ของ CSS และชวเลขย่อยของขอบเพื่อตั้งค่า border-radius และ corner-shape ร่วมกัน, text-decoration-inset, text-overflow: <string> และ position-visibility: anchor-valid และ anchor-visible นอกจากนี้ยังรวมถึงการรองรับการแสดงผล HTML ใน Canvas และแอตทริบิวต์ displaymode แบบไอคอนเท่านั้นสำหรับองค์ประกอบความสามารถ <camera>, <microphone> และ <geolocation>

Chrome 158 เวอร์ชันเบต้าเปิดตัวองค์ประกอบ <install> HTML แบบประกาศและ Web Install API (navigator.install()) สำหรับการติดตั้งเว็บแอปแบบข้ามต้นทาง ส่วนเพิ่มเติมของ CSS และ SVG ได้แก่ ตัวเลือกไฮไลต์ที่กำหนดเองแบบสากล ::highlight(*), คลาสเทียมสถานะองค์ประกอบสื่อ (:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked), คีย์เวิร์ดการจัดแนว flow-start และ flow-end รวมถึงรัศมี closest-corner และ farthest-corner สำหรับรูปร่างพื้นฐาน circle() และ ellipse()

Firefox 160 เบต้าอัปเดต WebExtensions runtime.PlatformInfo API เพื่อแสดงผล arch เป็น arm64 แทน aarch64 บนแพลตฟอร์ม ARM64 เพื่อให้สอดคล้องกับ Chrome

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

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนกลายเป็น Baseline

รีจิสทรีองค์ประกอบที่กำหนดเองที่กำหนดขอบเขตจะกลายเป็น Baseline

การรองรับรูปภาพ JPEG XL

เลขคณิตที่พิมพ์ CSS กลายเป็น Baseline

PerformanceResourceTiming.deliveryType

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

พร็อพเพอร์ตี้ CSS margin-trim

รูปแบบตัวนับในบรรทัดที่มีฟังก์ชัน CSS symbols()

พร็อพเพอร์ตี้ CSS text-decoration-skip-spaces

คลาสสมมติ :navigation-source CSS

การนำเข้าโมดูลข้อความ JavaScript และการลองโหลดโมดูลที่ล้มเหลวอีกครั้ง

การอัปเดต WebTransport ใน Chrome และ Firefox

ตัวเลือก Notification navigate ใน Firefox

การอัปเดต HTML Sanitizer API ใน Firefox

กำลังเปลี่ยนชื่อ flow-tolerance เป็น fit-tolerance ใน Safari

เบราว์เซอร์เวอร์ชันเบต้า

`PerformanceResourceTiming.deliveryType`

ฟังก์ชัน CSS `random()`

พร็อพเพอร์ตี้ CSS `margin-trim`

รูปแบบตัวนับในบรรทัดที่มีฟังก์ชัน CSS `symbols()`

พร็อพเพอร์ตี้ CSS `text-decoration-skip-spaces`

คลาสสมมติ `:navigation-source` CSS

ตัวเลือก `Notification` `navigate` ใน Firefox

กำลังเปลี่ยนชื่อ `flow-tolerance` เป็น `fit-tolerance` ใน Safari