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

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

Rachel Andrew

เผยแพร่เมื่อวันที่ 30 มิถุนายน 2025

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

ในเดือนมิถุนายน 2025 Firefox 140 และ Chrome 138 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะกล่าวถึงฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บด้วยรุ่นเหล่านี้

หนี < และ > ในแอตทริบิวต์เมื่อแปลง HTML เป็นอนุกรม

ทั้ง Chrome 138 และ Firefox 140 มีการเปลี่ยนแปลงนี้เพื่อป้องกันการโจมตีที่จะมีการแปลง HTML เป็นอนุกรมแล้วแทรกกลับเข้าไปใน DOM การเปลี่ยนแปลงนี้รวมอยู่ในเวอร์ชันเบต้าของ Safari 26 ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุผลที่ต้องทำการเปลี่ยนแปลงนี้

CSS Custom Highlight API

Firefox 140 ใช้ CSS Custom Highlight API ซึ่งจะช่วยให้คุณกำหนดและจัดรูปแบบช่วงข้อความที่กำหนดเองในเอกสารได้ คล้ายกับองค์ประกอบจำลอง CSS อื่นๆ สำหรับการไฮไลต์ เช่น ::grammar-error

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 140.
  • Safari: 17.2.

Source

นอกจาก JavaScript API แล้ว ชิ้นงานยังมี::highlight องค์ประกอบจำลองของ CSS ซึ่งใช้เพื่อใช้สไตล์กับไฮไลต์ที่ลงทะเบียน แม้ว่าตอนนี้ฟีเจอร์นี้จะทำงานร่วมกันได้แบบกว้างแล้ว แต่ปัญหาบางอย่างเกี่ยวกับองค์ประกอบจำลอง ::highlight ทำให้ฟีเจอร์นี้ยังไม่พร้อมใช้งานในเวอร์ชันพื้นฐาน

Cookie Store API เป็น Asynchronous API สําหรับการจัดการคุกกี้ และรองรับตั้งแต่ Firefox 140 ตอนนี้เบราว์เซอร์ทุกรุ่นรองรับ API นี้ในระดับพื้นฐานแล้ว แต่โปรดดูข้อมูลเกี่ยวกับส่วนต่างๆ ที่ยังไม่ทำงานร่วมกันได้ในแผนภูมิความเข้ากันได้บน MDN

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 140.
  • Safari: 18.4.

Source

การนำเหตุการณ์ Mutation ออก

Interop 2025 มีการนำออกในปีนี้ เหตุการณ์ Mutation แบบเดิม เช่น DOMSubtreeModified, DOMNodeInserted และ DOMNodeRemoved จะคอยดูการเปลี่ยนแปลงใน DOM และเรียกใช้การเรียกกลับของ Listener เหตุการณ์เมื่อเกิดการเปลี่ยนแปลง DOM เราเลิกใช้งานเหตุการณ์การเปลี่ยนแปลงเหล่านี้แล้วเพื่อหันมาใช้ MutationObserver API ซึ่งมีประสิทธิภาพมากกว่าและเกิดข้อผิดพลาดน้อยกว่า

Firefox 140 นำเหตุการณ์เหล่านี้ออกแล้ว ซึ่งถูกนำออกจาก Chrome ไปแล้ว

Browser Support

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

Source

ฟังก์ชัน CSS ใน Chrome 138

Chrome 138 มีฟังก์ชัน CSS ครบชุด โดยฟังก์ชันบางอย่างเป็นฟังก์ชันใหม่ในแพลตฟอร์ม ส่วนฟังก์ชันอื่นๆ กลายเป็นฟังก์ชันพื้นฐานเมื่อรวมอยู่ใน Chrome

ฟังก์ชันที่เกี่ยวข้องกับเครื่องหมาย abs() และ sign() เปลี่ยนเป็น "พื้นฐาน" ซึ่งพร้อมใช้งานใน Chrome เวอร์ชัน 138

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 118.
  • Safari: 15.4.

Source

ฟังก์ชันใหม่ในแพลตฟอร์มคือ progress()

Chrome 138 ยังมี sibling-index() และ sibling-count() ด้วย ซึ่งสามารถใช้เป็นจำนวนเต็มในค่าพร็อพเพอร์ตี้ CSS เพื่อจัดสไตล์องค์ประกอบโดยอิงตามตำแหน่งขององค์ประกอบนั้นๆ เมื่อเทียบกับองค์ประกอบอื่นๆ ในรายการเดียวกัน หรือจำนวนองค์ประกอบทั้งหมดในรายการเดียวกันตามลำดับ

AI API ในตัวสําหรับการแปล การตรวจจับภาษา และการสรุป

Chrome 138 มี JavaScript AI API ในตัว 3 รายการ Translator and Language Detector API ช่วยให้คุณตรวจจับภาษาที่เขียนข้อความ และแปลข้อความเป็นภาษาต่างๆ ได้ โดยจะใช้โมเดล AI ภายในของเบราว์เซอร์เอง และดำเนินการนี้ในอุปกรณ์

Browser Support

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

Summarizer API จะสรุปข้อความบนอุปกรณ์อีกครั้งโดยใช้โมเดล AI ภายในของเบราว์เซอร์

Browser Support

  • Chrome: 138.
  • Edge: behind a flag.
  • Firefox: not supported.
  • Safari: not supported.

การรองรับการวางแนวเฟรมวิดีโอใน WebCodecs

Chrome 138 ยังเพิ่มค่า rotation: int และ flip: bool ลงในอินเทอร์เฟซต่างๆ ที่เกี่ยวข้องกับวิดีโอใน WebCodecs เพื่อให้นักพัฒนาซอฟต์แวร์ทำงานกับแหล่งที่มาของเฟรมที่มีการวางแนวได้

เบราว์เซอร์รุ่นเบต้า

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

Safari 26 สัญญาว่าจะเป็นแอปที่อัดแน่นไปด้วยฟีเจอร์สำหรับเบราว์เซอร์ สำหรับ CSS นั้น รองรับ overflow-block และ overflow-inline, ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน การจัดตำแหน่งจุดยึด ฟังก์ชัน progress() ของ CSS และอื่นๆ อีกมากมาย นอกจากนี้ ยังรองรับ AudioEncoder และ AudioDecoder API, URLPattern API, Digital Credentials API, Trusted Types และ WebAuthn Signal API ด้วย

Chrome 139 มีฟังก์ชันที่กำหนดเองของ CSS, การกำหนดรูปทรงของมุม และพร็อพเพอร์ตี้ caret-animation รวมถึง Web Speech API ในอุปกรณ์, ส่วนขยายขอบเขตเว็บแอป และrequest-closeคําสั่ง invoker

Firefox 141 เพิ่มอาร์กิวเมนต์ options.source สำหรับ showPopover() และ togglePopover() เพื่อสร้างความสัมพันธ์ระหว่างป๊อปอัปกับผู้เรียกใช้ รวมถึงรองรับพร็อพเพอร์ตี้ font-variant-emoji ของ CSS ด้วย