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

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

เผยแพร่: 1 ตุลาคม 2025

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

Chrome 140, Chrome 141, Safari 26 และ Firefox 143 ที่เปิดตัวในเวอร์ชันเสถียรในช่วงเดือนกันยายน โพสต์นี้จะมาดูว่าแพลตฟอร์มเว็บมีอะไรน่าตื่นเต้นบ้างในเดือนนี้

ฟีเจอร์ CSS ใหม่ใน Safari 26

การเปิดตัว Safari รุ่นล่าสุดมีอะไรน่าสนใจมากมาย โปรดอ่านบทความฉบับสมบูรณ์ในฟีเจอร์ WebKit ใน Safari 26.0 ไฮไลต์เด่นบางส่วนสำหรับ CSS ได้แก่ ฟีเจอร์ต่อไปนี้

การวางตำแหน่งโฆษณา Anchor

Safari ได้เปิดตัวการรองรับการจัดตำแหน่ง CSS Anchor ซึ่งเป็นส่วนหนึ่งของ Interop 2025 ซึ่งช่วยให้คุณเชื่อมโยงองค์ประกอบกับจุดยึดได้ และมีประโยชน์อย่างยิ่งเมื่อใช้ร่วมกับป๊อปโอเวอร์

Browser Support

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

Source

text-wrap: pretty

ค่า pretty ของ text-wrap จะขอให้เบราว์เซอร์ปรับปรุงการจัดตัวอักษร เช่น ลดผลกระทบของขอบที่ไม่สม่ำเสมอและช่องว่างที่ยาวในข้อความ และป้องกันไม่ให้บรรทัดสุดท้ายสั้น

Browser Support

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

Source

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

นอกจากนี้ Safari ยังรองรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน ซึ่งช่วยให้คุณเชื่อมโยง ภาพเคลื่อนไหวกับระยะทางที่ผู้ใช้เลื่อนได้

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

ค่าและฟังก์ชันใหม่

Safari เป็นเบราว์เซอร์แรกที่เพิ่มการรองรับฟังก์ชัน contrast-color() ซึ่งช่วยให้คุณขอให้เบราว์เซอร์เลือกสีที่มีคอนทราสต์มากที่สุดเมื่อเทียบกับสีอื่นได้

Browser Support

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

Source

progress() ฟังก์ชันทางคณิตศาสตร์จะแสดงผลตัวเลขที่ระบุความคืบหน้าระหว่างค่าอื่นๆ 2 ค่า

Browser Support

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

ตอนนี้รองรับพร็อพเพอร์ตี้ align-self และ justify-self สำหรับการวางตำแหน่งแบบสัมบูรณ์แล้ว

Browser Support

  • Chrome: 122.
  • Edge: 122.
  • Firefox: 134.
  • Safari: not supported.

ระบบรองรับพร็อพเพอร์ตี้เชิงตรรกะ overflow-block และ overflow-inline และสามารถใช้แทน overflow-x และ overflow-y ได้

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 69.
  • Safari: 26.

Source

ตอนนี้ Safari รองรับ margin-trim แล้วด้วย

Browser Support

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

Source

องค์ประกอบเสมือน ::details-content

Firefox 143 เพิ่มการรองรับ ::details-content ซึ่งช่วยให้คุณจัดรูปแบบเนื้อหาขององค์ประกอบ <details> ได้

Browser Support

  • Chrome: 131.
  • Edge: 131.
  • Firefox: 143.
  • Safari: 18.4.

Source

รองรับการจัดรูปแบบเครื่องหมายที่สร้างขึ้นด้วยเนื้อหาที่สร้างขึ้น

นอกจากนี้ Firefox 143 ยังรองรับตัวเลือก ::before::marker และ ::after::marker ด้วย ซึ่งช่วยให้คุณจัดรูปแบบ ::marker เมื่อสร้างโดยใช้::beforeหรือ::after องค์ประกอบเสมือน

Browser Support

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

Digital Credentials API

Safari 26 และ Chrome 141 รองรับ Digital Credentials API ซึ่งช่วยให้เว็บไซต์ขอข้อมูลที่ตรวจสอบได้เกี่ยวกับผู้ใช้ผ่านข้อมูลเข้าสู่ระบบดิจิทัล เช่น ใบขับขี่หรือบัตรประจำตัวประชาชนที่จัดเก็บไว้ในกระเป๋าเงินดิจิทัลได้อย่างเลือกสรร

Browser Support

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

API รูปแบบ URL จะกลายเป็น Baseline Newly available

URL Pattern API ช่วยให้คุณใช้ มาตรฐานรูปแบบ URL เพื่อจับคู่ URL โดยใช้นิพจน์ทั่วไปได้ โดยฟีเจอร์นี้เปิดตัวใน Safari 26 และตอนนี้พร้อมใช้งานเป็นฟีเจอร์พื้นฐานแล้ว

Browser Support

  • Chrome: 95.
  • Edge: 95.
  • Firefox: 142.
  • Safari: 26.

Source

ตอนนี้ Uint8Array ไปยังและจาก base64 และเลขฐานสิบหกพร้อมใช้งานแล้วใน Baseline Newly available

Base64 เป็นวิธีทั่วไปในการแสดงข้อมูลไบนารีที่กำหนดเองเป็น ASCII JavaScript มี Uint8Arrays สำหรับข้อมูลไบนารี อย่างไรก็ตาม ไม่มีกลไกในตัวที่จะเข้ารหัสข้อมูลดังกล่าวเป็น base64 หรือรับข้อมูล base64 แล้วสร้าง Uint8Array ที่สอดคล้องกัน ฟีเจอร์นี้จะเพิ่มความสามารถและวิธีการแปลงระหว่างสตริงเลขฐานสิบหกกับ Uint8Arrays Chrome 140 จะกลายเป็น Baseline Newly available

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: 133.
  • Safari: 18.2.

Source

พร็อพเพอร์ตี้ caret-animation

พร็อพเพอร์ตี้ CSS caret-animation เปิดตัวใน Chrome 140 และมีค่าที่เป็นไปได้ 2 ค่า ได้แก่ auto และ manual auto หมายถึงค่าเริ่มต้นของเบราว์เซอร์ (กะพริบ) และ manual หมายความว่านักพัฒนาแอปควบคุมภาพเคลื่อนไหวของเคอร์เซอร์ นอกจากนี้ ผู้ใช้ที่รู้สึกรำคาญหรือมีปฏิกิริยาในทางลบต่อภาพที่กะพริบหรือกระพริบตาจะปิดใช้การกะพริบได้ด้วยสไตล์ชีตของผู้ใช้

Browser Support

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

Source

ARIA Notify API

ตั้งแต่ Chrome 141 เป็นต้นไป ariaNotify จะมี JavaScript API ที่ช่วยให้ผู้สร้างเนื้อหาสั่งให้โปรแกรมอ่านหน้าจออ่านอะไรได้ ซึ่งช่วยปรับปรุงความน่าเชื่อถือและการควบคุมของนักพัฒนาแอปเมื่อเทียบกับส่วนที่ใช้งานจริงของ ARIA ทำให้ประกาศการเปลี่ยนแปลงที่ไม่เกี่ยวข้องกับการอัปเดต DOM ได้

ตัวเลือก IndexedDB getAllRecords() และ direction สำหรับ getAll() และ getAllKeys()

ฟีเจอร์นี้ใน Chrome 141 จะเพิ่มเมธอด getAllRecords() ลงใน IDBObjectStore IndexedDB และ IDBIndex นอกจากนี้ ยังเพิ่มพารามิเตอร์ทิศทางไปยัง getAll() และ getAllKeys() ด้วย ฟังก์ชันการทำงานนี้ช่วยให้รูปแบบการอ่านบางอย่างเร็วขึ้นอย่างมากเมื่อเทียบกับทางเลือกที่มีอยู่เดิมของการทำซ้ำด้วยเคอร์เซอร์

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

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

Safari 26.1 เป็นรุ่นที่เน้นการแก้ไขข้อบกพร่องเป็นหลัก โดยมีการแก้ไขการวางตำแหน่ง Anchor และการเปลี่ยนแปลงอื่นๆ Firefox 144 จะเปิดตัวการเปลี่ยนมุมมองสำหรับแอปหน้าเว็บเดียว (SPA) นี่เป็นหนึ่งในขอบเขตที่มุ่งเน้นสำหรับ Interop 2025 และหมายความว่าฟีเจอร์นี้ จะกลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่

นอกจากนี้ Firefox 144 ยังมีเมธอด moveBefore() ในอินเทอร์เฟซ Element, DocumentFragment และ Document ด้วย ซึ่งจะช่วยให้คุณย้ายองค์ประกอบย่อยที่อยู่ใต้โดยตรงของออบเจ็กต์ได้ก่อนองค์ประกอบย่อยอื่นๆ ของออบเจ็กต์