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

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

Rachel Andrew

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

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

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

View Transitions API สำหรับแอปหน้าเว็บเดียว

Firefox 144 รองรับการเปลี่ยนภาพมุมมองในเอกสารเดียวกัน ซึ่งรวมถึงการรองรับสิ่งต่อไปนี้

• :active-view-transition คลาสเสมือน
• พร็อพเพอร์ตี้ view-transition-class
• พร็อพเพอร์ตี้ view-transition-name
• องค์ประกอบเสมือน ::view-transition
• องค์ประกอบเสมือน ::view-transition-group()
• องค์ประกอบเสมือน ::view-transition-image-pair()
• องค์ประกอบเสมือน ::view-transition-new()
• องค์ประกอบเสมือน ::view-transition-old()

ซึ่งทำให้การเปลี่ยนมุมมองเอกสารเดียวกันเป็น Baseline ที่พร้อมใช้งานใหม่

แอตทริบิวต์ command และ commandfor ในองค์ประกอบ <button>

Firefox 144 รองรับ command และ commandfor ดูข้อมูลเพิ่มเติมเกี่ยวกับ แอตทริบิวต์เหล่านี้ได้ในการเปิดตัว command และ commandfor

moveBefore() วิธี

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

ดูข้อมูลเพิ่มเติมได้ที่รักษาสถานะระหว่างการเปลี่ยนแปลง DOM ด้วย moveBefore()

:target-before และ:target-after คลาสเสมือน

Chrome 142 เพิ่ม Pseudo-classes ที่ตรงกับเครื่องหมายการเลื่อนที่อยู่ก่อนหรือหลังเครื่องหมายที่ใช้งานอยู่ (ตรงกับ :target-current) ภายในกลุ่มเครื่องหมายการเลื่อนเดียวกัน ตามที่กำหนดโดยลำดับของโครงสร้างแบบเรียบ

• :target-before: ตรงกับเครื่องหมายการเลื่อนทั้งหมดที่อยู่ก่อนเครื่องหมายที่ใช้งานอยู่ในลำดับของโครงสร้างแบบแบนภายในกลุ่ม
• :target-after: ตรงกับเครื่องหมายการเลื่อนทั้งหมดที่อยู่หลังเครื่องหมายที่ใช้งานอยู่ในลำดับของโครงสร้างแบบแบนภายในกลุ่ม

ไวยากรณ์ช่วงสำหรับการค้นหาคอนเทนเนอร์ของสไตล์และ if()

Chrome 142 ปรับปรุงการค้นหาสไตล์ CSS และฟังก์ชัน if() โดยเพิ่มการรองรับไวยากรณ์ช่วง

ซึ่งจะขยายการค้นหาสไตล์ให้ครอบคลุมมากกว่าการจับคู่ค่าที่ตรงกันทุกประการ (เช่น style(--theme: dark)) นักพัฒนาซอฟต์แวร์สามารถใช้ตัวดำเนินการเปรียบเทียบ (เช่น > และ <) เพื่อเปรียบเทียบพร็อพเพอร์ตี้ที่กำหนดเอง ค่าตามตัวอักษร (เช่น 10px หรือ 25%) และค่าจากฟังก์ชันการแทนที่ เช่น attr() และ env() ทั้ง 2 ฝั่งต้องแปลงเป็นประเภทข้อมูลเดียวกันเพื่อให้การเปรียบเทียบถูกต้อง โดยจำกัดเฉพาะประเภทตัวเลขต่อไปนี้ <length>, <number>, <percentage>, <angle>, <time>, <frequency> และ <resolution>

ผู้กระตุ้นความสนใจ (แอตทริบิวต์ interestfor)

นอกจากนี้ Chrome 142 ยังเพิ่มแอตทริบิวต์ interestfor ลงในองค์ประกอบ <button> และ <a> ด้วย แอตทริบิวต์นี้จะเพิ่มลักษณะการทำงาน "ความสนใจ" ให้กับองค์ประกอบ เมื่อผู้ใช้แสดงความสนใจในองค์ประกอบ ระบบจะทริกเกอร์การดำเนินการในองค์ประกอบเป้าหมาย เช่น แสดงป๊อปโอเวอร์

User Agent จะตรวจหาเมื่อผู้ใช้แสดงความสนใจในองค์ประกอบผ่านวิธีการต่างๆ เช่น การวางเคอร์เซอร์เหนือองค์ประกอบ การกดปุ่มลัดพิเศษบนแป้นพิมพ์ หรือการกดองค์ประกอบบนหน้าจอสัมผัสค้างไว้ เมื่อแสดงหรือสูญเสียความสนใจ InterestEvent จะทำงานในเป้าหมาย ซึ่งมีการดำเนินการเริ่มต้นสำหรับป๊อปโอเวอร์ เช่น การแสดงและซ่อนป๊อปโอเวอร์

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

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

Firefox 145 มีพร็อพเพอร์ตี้ source ของอินเทอร์เฟซ ToggleEvent และเมธอดแบบคงที่ Atomics.waitAsync()

Chrome 145 มีการค้นหาคอนเทนเนอร์สำรองที่ยึดตาม CSS ซึ่งจะทำให้เกิด @container anchored(fallback) เพื่อจัดรูปแบบองค์ประกอบลูกหลานของ องค์ประกอบที่วางตำแหน่งโดยยึดจุดยึดตามค่า position-try-fallbacks ที่ใช้