Interop 2025: một năm nữa để cải thiện nền tảng web

Ngày xuất bản: 13 tháng 2 năm 2025

Sau thành công vang dội của Interop 2024, dự án này sẽ trở lại với một nhóm các lĩnh vực tập trung mới cho năm 2025. Mặc dù không thể đưa vào mọi đề xuất được đưa ra trong năm nay, nhưng danh sách cuối cùng bao gồm nhiều nền tảng web, từ CSS đến các tính năng liên quan đến hiệu suất.

Các lĩnh vực trọng tâm cho năm 2025

  • Vị trí neo
  • backdrop-filter
  • Các chỉ số quan trọng về trang web
  • Phần tử <details>
  • Bố cục
  • Mô-đun
  • Navigation API
  • Sự kiện con trỏ và chuột
  • Xoá sự kiện thay đổi
  • @scope
  • scrollend sự kiện
  • Storage Access API
  • text-decoration
  • URLPattern
  • API chuyển đổi thành phần hiển thị
  • WebAssembly
  • Khả năng tương thích với web
  • WebRTC
  • Chế độ ghi

Ngoài ra, giống như các năm trước, chúng tôi sẽ điều tra một số lĩnh vực. Đây là những khía cạnh mà chúng tôi không có đủ thông tin hoặc kiểm thử để đưa vào làm tâm điểm, nhưng nhóm cảm thấy cần phải làm một số việc để đưa các khía cạnh này đến giai đoạn mà chúng tôi có thể đưa vào.

  • Kiểm thử khả năng hỗ trợ tiếp cận
  • Kiểm thử API tay điều khiển trò chơi
  • Kiểm thử thiết bị di động
  • Kiểm thử quyền riêng tư
  • WebVTT

Chúng tôi rất hào hứng về tất cả các tính năng này và những điểm cải tiến mà dự án năm nay sẽ mang lại cho nền tảng. Và giống như năm ngoái, dự án này sẽ cung cấp một loạt các tính năng mới trong Baseline. Bài đăng này chia sẻ thêm thông tin về một số tính năng trong danh sách, kèm theo đường liên kết đến thông tin để tìm hiểu thêm.

Bạn có thể theo dõi trên trang tổng quan Interop 2025 tại wpt.fyi/interop-2025 và khi các tính năng trở thành Baseline Newly available (Mới có trong Baseline), các tính năng đó cũng sẽ xuất hiện trong danh sách Baseline 2025 trên webstatus.dev.

Điểm số khi bắt đầu dự án – Khả năng tương tác:33, Điều tra:0, Chrome Canary:91, Edge Dev:88, Firefox Nightly:52, Bản dùng thử công nghệ Safari:55.
Trang tổng quan về Interop 2025 (kể từ ngày 13 tháng 2 năm 2025).

CSS và giao diện người dùng

Một số tính năng có trong Interop 2025 là những tính năng mà bạn đã đánh dấu là quan trọng trong bản khảo sát Trạng thái CSS 2024. Các tính năng này sẽ giúp bạn tạo ra trải nghiệm người dùng đẹp mắt và hiệu quả hơn.

Vị trí neo

Browser Support

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

Source

Tính năng này cho phép bạn neo một phần tử được định vị vào một neo, đặc biệt hữu ích khi hiển thị cửa sổ bật lên.

Một neo có phần tử được định vị.

Việc đưa tính năng này vào Baseline sẽ giúp bạn dễ dàng tạo giao diện người dùng hơn mà không cần phải dựa vào thư viện của bên thứ ba. Tìm hiểu thêm trong tài liệu về việc đặt neo và trên MDN – Vị trí đặt neo CSS.

Chuyển đổi chế độ xem trong cùng một tài liệu

Browser Support

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

Source

Ngoài ra, năm nay còn có các hiệu ứng chuyển đổi khung hiển thị, cụ thể là hiệu ứng chuyển đổi khung hiển thị trong cùng một tài liệu và thuộc tính CSS view-transition-class.

Tìm hiểu thêm về hiệu ứng chuyển đổi chế độ xem trong phần Hiệu ứng chuyển đổi chế độ xem trong cùng một tài liệu cho ứng dụng một trang và trong tài liệu MDN về hiệu ứng chuyển đổi chế độ xem.

Thuộc tính backdrop-filter

Browser Support

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

Source

Thuộc tính backdrop-filter đã có sẵn trong Baseline New kể từ tháng 9 năm 2024. API này cho phép bạn tạo hiệu ứng phía sau nội dung. Ví dụ: làm mờ hoặc tạo hiệu ứng mà bạn có thể chỉ thấy trong ứng dụng đồ hoạ.

Mặc dù hầu hết đều có khả năng tương tác, nhưng bạn có thể thấy từ các lần kiểm thử không thành công cho backdrop-filter rằng có lỗi và vấn đề trong các lần triển khai đó. Mặc dù những vấn đề này có thể không phải là vấn đề của mọi người, nhưng chúng tôi biết rằng nhiều người trong số bạn gặp phải những vấn đề này. Chúng tôi rất mong tính năng này hoạt động hiệu quả.

Phần tử <details>

Phần tử <details> là một tiện ích thông tin công bố có thể mở rộng để hiển thị thêm nội dung. Bản thân phần tử <details> là Đường cơ sở được cung cấp rộng rãi. Tuy nhiên, gần đây, một số tính năng liên quan đã được thêm vào giúp <details> hữu ích hơn.

  • Phần tử giả lập CSS ::marker::details-content.
  • Sử dụng content-visibility để bật/tắt nội dung thay vì display.
  • Tự động mở rộng phần tử <details> bằng các kết quả trùng khớp tìm kiếm trên trang.
  • Thuộc tính hidden="until-found" ẩn một phần tử cho đến khi tìm thấy phần tử đó bằng tính năng tìm kiếm trong trang của trình duyệt hoặc phần tử đó được điều hướng trực tiếp bằng cách theo một mảnh URL.

Quy tắc tại @scope CSS

Browser Support

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

Source

Quy tắc tại @scope cho phép bạn đặt phạm vi bộ chọn thành một cây con của DOM hoặc thậm chí chọn giữa ranh giới trên và dưới trong cây. Ví dụ: CSS sau đây chỉ chọn các phần tử <img> bên trong một phần tử có lớp .card.

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

Trong ví dụ tiếp theo, chúng ta sẽ sử dụng giới hạn trên và giới hạn dưới. Phần tử <img> chỉ được chọn nếu nằm giữa phần tử có lớp .card và nằm ngoài phần tử có lớp .card__content.

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

Tìm thêm ví dụ về cách bạn có thể sử dụng @scope trong phần Giới hạn phạm vi của bộ chọn bằng quy tắc tại @scope CSS và trong tài liệu về @scope trên MDN.

Sự kiện scrollend

Browser Support

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

Source

Nếu không có sự kiện scrollend, sẽ không có cách nào đáng tin cậy để phát hiện một thao tác cuộn đã hoàn tất. Cách tốt nhất bạn có thể làm là sử dụng setTimeout() để kiểm tra xem thao tác cuộn có dừng trong một khoảng thời gian hay không. Điều này khiến sự kiện này giống như sự kiện cuộn đã tạm dừng, chứ không phải sự kiện cuộn đã kết thúc.

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

Với sự kiện scrollend, trình duyệt sẽ thực hiện tất cả các bước đánh giá khó khăn này cho bạn.

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

Xem thêm ví dụ trong Scrollend, một sự kiện JavaScript mới và cũng trong tài liệu MDN về scrollend.

Thuộc tính text-decoration

Browser Support

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

Source

Thuộc tính text-decoration là viết tắt của text-decoration-line, text-decoration-color, text-decoration-styletext-decoration-thickness. Đây được coi là Đường cơ sở có sẵn rộng rãi, tuy nhiên trong Safari, thuộc tính viết tắt không có tiền tố duy nhất hoạt động là text-decoration-line. Đây là vấn đề sẽ được giải quyết trong năm 2025.

Chế độ ghi

Thuộc tính writing-mode CSS có một số giá trị có thể có, nhiều giá trị trong số đó được thiết kế để bố trí các tập lệnh hiển thị theo chiều dọc. Tuy nhiên, đôi khi bạn muốn bố trí văn bản theo chiều dọc như một phần của thiết kế, thay vì vì lý do hỗ trợ ngôn ngữ. Các giá trị sideways-lrsideways-rl được thiết kế cho việc này, nhưng lại có khả năng tương thích kém với trình duyệt. Vấn đề này sẽ được khắc phục trong năm 2025.

Browser Support

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

Source

Ngoài ra, các thuộc tính CSS logic overflow-inlineoverflow-block cũng được đưa vào. Các thuộc tính này cho phép kiểm soát những gì xảy ra khi nội dung tràn ra khỏi hộp, bất kể chế độ ghi.

Browser Support

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

Source

Các chỉ số quan trọng về trang web

Các chỉ số quan trọng về trang web có thể giúp bạn đánh giá trải nghiệm trên trang web của mình và xác định các cơ hội cải thiện. Sáng kiến Web Vitals nhằm đơn giản hoá tình hình và giúp các trang web tập trung vào những chỉ số quan trọng nhất, đó là Các chỉ số quan trọng về trang web.

Interop 2025 bao gồm các chỉ số Thời gian hiển thị nội dung lớn nhất (LCP)Lượt tương tác đến nội dung hiển thị tiếp theo (INP) bằng cách triển khai API LargestContentfulPaintAPI Thời gian sự kiện trên các trình duyệt. Chỉ số Điểm số tổng hợp về mức thay đổi bố cục (CLS) không thuộc phạm vi.

LCP API

Browser Support

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

Source

API Thời gian xảy ra sự kiện (dành cho INP)

Browser Support

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

Source

WebAssembly (Wasm)

WebAssembly API cho phép bạn tải mã WebAssembly, một định dạng hướng dẫn nhị phân có thể di chuyển. Bạn có thể làm những việc như chạy toàn bộ ứng dụng blog, bao gồm cả tất cả các yêu cầu về máy chủ, trong trình duyệt!

Năm nay, chúng tôi sẽ tập trung vào các tính năng sau:

  • Hàm chuỗi tích hợp sẵn JavaScript: để các hàm chuỗi tích hợp sẵn WebAssembly phản ánh một tập hợp con của API Chuỗi JavaScript để có thể gọi hàm này mà không cần mã kết nối JavaScript.
  • Tích hợp vùng đệm có thể đổi kích thước: để tích hợp WebAssembly vào mã JavaScript sử dụng vùng đệm có thể đổi kích thước.

Xoá tính năng

Năm nay, dự án này sẽ bị xoá khỏi nền tảng. Sự kiện sự thay đổi không còn được dùng nữa và được thay thế bằng Mutation Observer API (API Trình quan sát sự thay đổi) có hiệu suất cao hơn nhiều và có sẵn trên nhiều nền tảng. Chrome đã xoá các sự kiện này trong Chrome 126 và trọng tâm của chúng tôi là xoá các sự kiện này khỏi tất cả trình duyệt.

Để tìm hiểu về quá trình phát triển và lý do các sự kiện này bị xoá, hãy đọc bài viết Sự kiện đột biến sẽ bị xoá khỏi Chrome.

Tìm hiểu thêm

Bạn có thể xem nội dung mô tả danh sách đầy đủ các tính năng trong README của dự án. Ngoài ra, hãy đọc các bài đăng của các công ty khác đang làm việc trên Interop 2025.