Interop 2025: การปรับปรุงแพลตฟอร์มเว็บอีกปี

เผยแพร่เมื่อวันที่ 13 กุมภาพันธ์ 2025

หลังจากประสบความสำเร็จอย่างยิ่งใหญ่ใน Interop 2024 โครงการนี้กลับมาอีกครั้งในวันนี้พร้อมกลุ่มเป้าหมายใหม่สำหรับปี 2025 แม้ว่าเราจะไม่สามารถรวมคำแนะนำทั้งหมดที่ส่งมาในปีนี้ได้ แต่รายการสุดท้ายนี้ครอบคลุมแพลตฟอร์มเว็บต่างๆ ตั้งแต่ CSS ไปจนถึงฟีเจอร์ที่เกี่ยวข้องกับประสิทธิภาพ

หัวข้อที่เน้นในปี 2025

  • ตำแหน่งโฆษณา Anchor
  • backdrop-filter
  • Core Web Vitals
  • องค์ประกอบ <details>
  • เลย์เอาต์
  • โมดูล
  • Navigation API
  • เหตุการณ์เคอร์เซอร์และเมาส์
  • นําเหตุการณ์ Mutation ออก
  • @scope
  • scrollend เหตุการณ์
  • Storage Access API
  • text-decoration
  • URLPattern
  • View Transition API
  • WebAssembly
  • Web compat
  • WebRTC
  • โหมดการเขียน

นอกจากนี้ ยังมีชุดของประเด็นที่ต้องตรวจสอบเช่นเดียวกับปีก่อนๆ นี่เป็นหัวข้อที่เรามีข้อมูลหรือการทดสอบไม่เพียงพอที่จะรวมไว้เป็นหัวข้อหลัก แต่กลุ่มรู้สึกว่าควรทํางานบางอย่างเพื่อพัฒนาหัวข้อเหล่านี้ให้อยู่ในระดับที่เรารวมไว้ได้

  • การทดสอบการช่วยเหลือพิเศษ
  • การทดสอบ Gamepad API
  • การทดสอบการทำงานบนอุปกรณ์เคลื่อนที่
  • การทดสอบความเป็นส่วนตัว
  • WebVTT

เราตื่นเต้นกับฟีเจอร์ทั้งหมดเหล่านี้และการปรับปรุงที่โปรเจ็กต์ของปีนี้จะนำมาสู่แพลตฟอร์ม และเช่นเดียวกับปีที่ผ่านมา โปรเจ็กต์นี้จะทําให้ข้อมูลทั้งหมดเป็นข้อมูลพื้นฐานใหม่ โพสต์นี้จะแชร์ข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์บางอย่างในรายการ พร้อมลิงก์ไปยังข้อมูลเพิ่มเติม

คุณติดตามข้อมูลได้ในหน้าแดชบอร์ด Interop 2025 ที่ wpt.fyi/interop-2025 และเมื่อสิ่งต่างๆ กลายเป็น "Baseline ใหม่พร้อมใช้งาน" ก็จะปรากฏในรายการ Baseline 2025 ใน webstatus.dev ด้วย

คะแนนเมื่อเริ่มโปรเจ็กต์ - การทํางานร่วมกัน:33, การตรวจสอบ:0, Chrome Canary:91, Edge Dev:88, Firefox Nightly:52, Safari Technology Preview:55
หน้าแดชบอร์ดการทํางานร่วมกัน 2025 (ข้อมูล ณ วันที่ 13 กุมภาพันธ์ 2025)

CSS และ UI

ฟีเจอร์หลายอย่างที่อยู่ใน Interop 2025 คือฟีเจอร์ที่คุณแจ้งว่าสำคัญในแบบสำรวจสถานะของ CSS ปี 2024 ซึ่งจะช่วยให้คุณสร้างประสบการณ์การใช้งานที่มีประสิทธิภาพและสวยงามยิ่งขึ้น

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

Browser Support

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

Source

ฟีเจอร์นี้ช่วยให้คุณยึดองค์ประกอบที่วางตำแหน่งไว้กับจุดยึดได้ ซึ่งจะมีประโยชน์อย่างยิ่งเมื่อแสดงป๊อปอัป

องค์ประกอบที่มีตำแหน่ง

การทำให้ฟีเจอร์นี้เป็นส่วนหนึ่งของ Baseline จะช่วยให้สร้างอินเทอร์เฟซผู้ใช้ได้ง่ายขึ้นมากโดยไม่ต้องอาศัยไลบรารีของบุคคลที่สาม ดูข้อมูลเพิ่มเติมในเอกสารประกอบเกี่ยวกับตำแหน่งของจุดยึด และตำแหน่งของจุดยึด CSS ใน MDN

การเปลี่ยนมุมมองในเอกสารเดียวกัน

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

นอกจากนี้ ในปีนี้ยังมีทรานซิชันของมุมมอง โดยเฉพาะทรานซิชันของมุมมองในเอกสารเดียวกัน และพร็อพเพอร์ตี้ view-transition-class CSS

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมองในการเปลี่ยนมุมมองในเอกสารเดียวกันสําหรับแอปพลิเคชันหน้าเดียวและในเอกสารประกอบ MDN สําหรับการเปลี่ยนมุมมอง

พร็อพเพอร์ตี้ backdrop-filter

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

พร็อพเพอร์ตี้ backdrop-filter ใช้งานได้แล้วตั้งแต่เดือนกันยายน 2024 ซึ่งช่วยให้คุณสร้างเอฟเฟกต์ที่อยู่เบื้องหลังเนื้อหาได้ เช่น เบลอหรือสร้างเอฟเฟกต์ที่คุณอาจคิดว่ามีเฉพาะในแอปพลิเคชันกราฟิกเท่านั้น

แม้ว่าจะทำงานร่วมกันได้ส่วนใหญ่ แต่คุณจะเห็นจากการทดสอบที่ดำเนินการไม่สำเร็จสำหรับ backdrop-filter ว่า มีข้อบกพร่องและปัญหาในการใช้งานเหล่านั้น แม้ว่าปัญหาเหล่านี้อาจไม่ใช่ปัญหาสำหรับทุกคน แต่เราทราบดีว่าผู้ใช้จำนวนมากพบปัญหาเหล่านี้ เราจึงอยากทำให้ฟีเจอร์นี้ทำงานได้อย่างมีประสิทธิภาพ

องค์ประกอบ <details>

องค์ประกอบ <details> คือวิดเจ็ตการเปิดเผยข้อมูลซึ่งสามารถขยายเพื่อแสดงเนื้อหาเพิ่มเติม องค์ประกอบ <details> เป็นแบบพื้นฐานที่พร้อมให้บริการในวงกว้าง อย่างไรก็ตาม มีฟีเจอร์ที่เกี่ยวข้องจำนวนหนึ่งที่เพิ่งเพิ่มเข้ามาซึ่งทำให้ <details> มีประโยชน์มากขึ้น

  • องค์ประกอบสมมติ ::marker และ ::details-content ของ CSS
  • ใช้ content-visibility เพื่อเปิด/ปิดเนื้อหาแทน display
  • การขยายองค์ประกอบ <details> โดยอัตโนมัติเมื่อพบรายการที่ตรงกันในการค้นหาในหน้า
  • แอตทริบิวต์ hidden="until-found" ซึ่งจะซ่อนองค์ประกอบจนกว่าจะพบโดยใช้การค้นหาในหน้าเว็บของเบราว์เซอร์ หรือจนกว่าผู้ใช้จะไปยังองค์ประกอบนั้นโดยตรงโดยติดตามข้อมูลโค้ด URL

กฎ @@scope ของ CSS

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

@scope at-rule ช่วยให้คุณกําหนดขอบเขตตัวเลือกไปยังต้นไม้ย่อยของ DOM หรือแม้แต่เลือกระหว่างขอบเขตบนและล่างในต้นไม้ ตัวอย่างเช่น CSS ต่อไปนี้จะเลือกเฉพาะองค์ประกอบ <img> ภายในองค์ประกอบที่มีคลาส .card

@scope (.card) {
  img {
    border-color: green;
  }
}

ในตัวอย่างถัดไปจะใช้ขอบเขตบนและขอบเขตล่าง ระบบจะเลือกองค์ประกอบ <img> เฉพาะในกรณีที่อยู่ตรงกลางองค์ประกอบที่มีคลาส .card และอยู่นอกองค์ประกอบที่มีคลาส .card__content

@scope (.card) to (.card__content) {
  img {
    border-color: green;
  }
}

ดูตัวอย่างเพิ่มเติมเกี่ยวกับวิธีใช้ @scope ได้ในจำกัดการเข้าถึงตัวเลือกด้วย @scope ของ CSS และ@scope เอกสารประกอบใน MDN

กิจกรรม scrollend

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

หากไม่มีเหตุการณ์ scrollend ก็จะไม่มีวิธีที่น่าเชื่อถือในการตรวจจับว่าการเลื่อนเสร็จสมบูรณ์แล้ว วิธีที่ดีที่สุดคือใช้ setTimeout() เพื่อตรวจสอบว่าการสไลด์หยุดไประยะหนึ่งหรือไม่ ซึ่งทำให้ดูเหมือนเหตุการณ์การเลื่อนหยุดชั่วคราวมากกว่าเหตุการณ์การเลื่อนสิ้นสุด

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

เมื่อใช้เหตุการณ์ scrollend เบราว์เซอร์จะประเมินสิ่งต่างๆ ที่ยากๆ ทั้งหมดให้คุณ

document.onscrollend = event => {
  // ...
}

ดูตัวอย่างเพิ่มเติมใน Scrollend ซึ่งเป็นเหตุการณ์ JavaScript ใหม่ และเอกสารประกอบ MDN สำหรับ scrollend

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

พร็อพเพอร์ตี้ text-decoration เป็นตัวย่อของ text-decoration-line, text-decoration-color, text-decoration-style และ text-decoration-thickness ถือว่าเป็นพร็อพเพอร์ตี้พื้นฐานที่พร้อมใช้งานในวงกว้าง แต่พร็อพเพอร์ตี้แบบย่อที่ไม่มีคำนำหน้าเพียงรายการเดียวที่ใช้งานได้ใน Safari คือ text-decoration-line ซึ่งเราจะดำเนินการแก้ไขในปี 2025

โหมดการเขียน

พร็อพเพอร์ตี้ writing-mode ของ CSS มีค่าที่เป็นไปได้หลายค่า ซึ่งหลายค่าออกแบบมาเพื่อวางเลย์เอาต์สคริปต์ที่แสดงในแนวตั้ง อย่างไรก็ตาม บางครั้งคุณอาจต้องการจัดวางข้อความในแนวตั้งเพื่อเป็นส่วนหนึ่งของการออกแบบ ไม่ใช่เพื่อเหตุผลด้านภาษา ค่า sideways-lr และ sideways-rl ออกแบบมาเพื่อวัตถุประสงค์นี้ แต่มีปัญหาด้านความเข้ากันได้ของเบราว์เซอร์ ปัญหานี้ควรได้รับการแก้ไขภายในปี 2025

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

นอกจากนี้ ระบบจะรวมพร็อพเพอร์ตี้ CSS เชิงตรรกะ overflow-inline และ overflow-block ไว้ด้วย ซึ่งช่วยให้คุณควบคุมสิ่งที่จะเกิดขึ้นเมื่อเนื้อหาเกินขอบกล่องได้ ไม่ว่าจะใช้โหมดการเขียนใดก็ตาม

Browser Support

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

Source

Core Web Vitals

Web Vitals ช่วยให้คุณวัดประสบการณ์ของเว็บไซต์และระบุโอกาสในการปรับปรุงได้ โครงการริเริ่ม Web Vitals มีจุดมุ่งหมายเพื่อลดความซับซ้อนของภาพรวม และช่วยให้เว็บไซต์มุ่งเน้นที่เมตริกที่มีความสำคัญมากที่สุดอย่าง Core Web Vitals

Interop 2025 ประกอบด้วยเมตริก Largest Contentful Paint (LCP) และ Interaction to Next Paint (INP) โดยใช้ LargestContentfulPaint API และ Event Timing API ในเบราว์เซอร์ต่างๆ เมตริก Cumulative Layout Shift (CLS) ไม่ได้อยู่ในขอบเขต

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API (สําหรับ INP)

Browser Support

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

Source

WebAssembly (Wasm)

WebAssembly API ช่วยให้คุณโหลดโค้ด WebAssembly ซึ่งเป็นรูปแบบคำสั่งไบนารีแบบพกพา ซึ่งจะช่วยให้คุณทําสิ่งต่างๆ ได้ เช่น เรียกใช้แอปพลิเคชันบล็อกทั้งแอป รวมถึงข้อกําหนดทั้งหมดของเซิร์ฟเวอร์ในเบราว์เซอร์

ปีนี้เราจะมุ่งเน้นที่ฟีเจอร์ต่อไปนี้

  • สตริงในตัวของ JavaScript: เพื่อทําให้ฟังก์ชันสตริงในตัวของ WebAssembly แสดงผลชุดย่อยของ JavaScript String API เพื่อให้เรียกใช้ได้โดยไม่ต้องใช้โค้ดกาว JavaScript
  • การผสานรวมบัฟเฟอร์ที่ปรับขนาดได้: เพื่อผสานรวม WebAssembly เข้ากับโค้ด JavaScript ที่ใช้บัฟเฟอร์ที่ปรับขนาดได้

การนำฟีเจอร์ออก

ปีนี้โปรเจ็กต์ดังกล่าวจะนําออกจากแพลตฟอร์ม เราเลิกใช้งานเหตุการณ์ Mutation และแทนที่ด้วย Mutation Observer API ที่มีประสิทธิภาพมากขึ้นและพร้อมใช้งานใน Baseline จำนวนมาก Chrome นำเหตุการณ์เหล่านี้ออกแล้วใน Chrome 126 และเป้าหมายของเราคือนำเหตุการณ์เหล่านี้ออกจากเบราว์เซอร์ทั้งหมด

หากต้องการทําความเข้าใจประวัติและสาเหตุที่ระบบนําเหตุการณ์เหล่านี้ออก โปรดอ่านหัวข้อระบบจะนำเหตุการณ์ Mutation ออกจาก Chrome

ดูข้อมูลเพิ่มเติม

ดูคำอธิบายของฟีเจอร์ทั้งหมดได้ใน README ของโปรเจ็กต์ นอกจากนี้ โปรดอ่านโพสต์จากบริษัทอื่นๆ ที่ทำงานเกี่ยวกับ Interop 2025