Một lần nữa vào năm 2023, tất cả các nhà cung cấp trình duyệt lớn và các bên liên quan khác đều hợp tác với nhau để giải quyết các vấn đề hàng đầu về khả năng tương thích của các trình duyệt.
Vào năm 2023, tất cả các nhà cung cấp trình duyệt lớn và các bên liên quan khác đang hợp tác lại với nhau để giải quyết những vấn đề hàng đầu về khả năng tương thích của trình duyệt. Nỗ lực của chúng ta bắt đầu trên quy mô này nhờ khả năng tương tác 2022. Bạn có thể tìm hiểu những thành quả chúng ta đã cùng nhau đạt được trong bài đăng cuối năm này. Tất cả những người có liên quan đều tin rằng việc này sẽ giúp cải thiện trải nghiệm cho các nhà phát triển web ở khắp mọi nơi. Năm nay, lần đầu tiên chúng tôi công bố quy trình đề xuất và nhận được nhiều đề xuất hữu ích từ các khung, công ty lớn, nhà cung cấp trình duyệt và nhà phát triển ở mọi nơi.
Mảng sản phẩm chuyên về Khả năng tương tác 2023
Lần này, chúng tôi có ít nhất 26 lĩnh vực trọng tâm, được nêu chi tiết trong tài liệu dự án của chúng tôi. Các đề xuất đó, theo thứ tự bảng chữ cái:
- Hình ảnh đường viền trong CSS
- Không gian màu và hàm trong CSS
- Cụm từ tìm kiếm về vùng chứa trong CSS
- Vùng chứa trong CSS
- Lớp học giả lập CSS
- Thuộc tính tuỳ chỉnh trong CSS
- Flexbox
- Phát hiện đặc điểm phông chữ và bảng tên
- Biểu mẫu
- Lưới
- :has()
- Inert
- Ẩn trong CSS
- Hàm toán học trong CSS
- Truy vấn về nội dung nghe nhìn
- Mô-đun trong Web Workers
- Đường dẫn chuyển động trong ảnh động CSS
- Canvas ngoài màn hình
- Sự kiện con trỏ và chuột
- URL
- Web Compat 2023: Một trọng tâm chung cho những lỗi nhỏ gây ra các vấn đề đã biết về khả năng tương thích của trang web
- Bộ mã hoá và giải mã web (video)
- Thành phần web
Bạn có thể tìm thấy đầy đủ thông tin chi tiết về tất cả các khía cạnh trọng tâm tại Kiểm thử nền tảng web dựa trên Tài liệu web MDN. Tuy nhiên, dưới đây là một số phương pháp mà chúng tôi cho rằng có thể bạn sẽ thực sự quan tâm.
Truy vấn về vùng chứa
Truy vấn vùng chứa là yêu cầu hàng đầu của các nhà phát triển trong nhiều năm và vào năm 2022, Chrome và Safari đã chuyển loại truy vấn này. Firefox dự kiến sẽ chuyển truy vấn vùng chứa vào Firefox 110 và các thử nghiệm cho lĩnh vực trọng tâm này giúp đảm bảo rằng các truy vấn vùng chứa hoạt động đáng tin cậy trên nhiều trình duyệt và đúng theo các thông số kỹ thuật.
:has(…)
Lâu nay, nhà phát triển đã yêu cầu cung cấp bộ chọn gốc trong CSS. Lớp giả :has() hỗ trợ nhiều trường hợp sử dụng cho bộ chọn mẹ, cũng như chọn một phần tử đồng cấp trước đó đối với phần tử tham chiếu. Ví dụ: tính năng này giúp bạn có thể tạo kiểu cho một hình có chú thích khác với chú thích không. Tìm hiểu thêm về các trường hợp sử dụng cho has() trong :has(), bộ chọn gia đình.
Thuộc tính tuỳ chỉnh
Các thuộc tính tùy chỉnh CSS, còn được gọi là biến CSS, giúp bạn có thể xác định một giá trị một lần trong biểu định kiểu và sử dụng lại giá trị đó ở nhiều vị trí, giảm sự lặp lại. Ví dụ: bạn có thể xác định màu hoặc kích thước phông chữ chung một lần trong biểu định kiểu và sử dụng kích thước này trên các thành phần. Chức năng hỗ trợ cơ bản cho thuộc tính tuỳ chỉnh đã có trong trình duyệt từ lâu. Khả năng tương tác 2023 tập trung vào quy tắc tại @property. @property đại diện cho việc đăng ký thuộc tính tuỳ chỉnh trong biểu định kiểu, cho phép kiểm tra loại thuộc tính, đặt giá trị mặc định và xác định xem thuộc tính có kế thừa các giá trị hay không. Tìm hiểu thêm trong @property: cung cấp siêu năng lực cho các biến CSS.
Mặt nạ CSS
Tạo mặt nạ CSS cung cấp các phương pháp áp dụng hiệu ứng hình ảnh, bạn có thể thấy trong ứng dụng đồ hoạ bằng cách sử dụng CSS. Việc hỗ trợ cho các thuộc tính tạo mặt nạ không hoàn chỉnh, khiến việc sử dụng tính năng che giấu trở nên khó khăn hơn bình thường. Mảng sản phẩm trọng tâm này sẽ giúp nhà phát triển tự tin sử dụng hiệu ứng sáng tạo trên nhiều trình duyệt. Tìm hiểu thêm về cách áp dụng hiệu ứng cho hình ảnh trong bài viết về tính năng tạo mặt nạ cho hình ảnh này.
OffscreenCanvas
Phần tử <canvas> và Canvas API cung cấp một cách viết tập lệnh để vẽ đồ hoạ lên màn hình. Tuy nhiên, điều này có thể gây ra vấn đề về hiệu suất vì công việc được hoàn tất trên cùng một luồng với hoạt động tương tác của người dùng. OffscreenCanvas cung cấp cho nhà phát triển một canvas được tách riêng với DOM và API Canvas. Nhà phát triển cũng có thể chạy tác vụ kết xuất hình ảnh trong Web Worker, tách biệt với luồng chính. Tìm hiểu thêm về các lợi ích về hiệu suất của OffscreenCanvas.
Sự kiện con trỏ và chuột
Sự kiện con trỏ được kích hoạt khi tương tác với một trang bằng chuột, bút, bút cảm ứng hoặc màn hình cảm ứng. Sự kiện chuột được kích hoạt khi sử dụng chuột, nhưng vì lý do trước đây cũng đối với thao tác chạm. Mảng trọng tâm này bao gồm hành vi của tương tác con trỏ và chuột với các trang, bao gồm cách chúng tương tác với kiểm tra lần nhấn và các vùng cuộn. Trọng tâm của năm 2023 không bao gồm cảm ứng và bút cảm ứng, do không có bài Kiểm thử nền tảng web trong lĩnh vực này.
WebCodecs
WebCodecs API cung cấp các phương thức để nhà phát triển truy cập vào từng khung hình video và các phần âm thanh. Thư viện này cấp quyền truy cập vào các bộ mã hoá và giải mã đã có trong trình duyệt và nhiều giao diện để tương tác với các bộ mã hoá và giải mã đó. Bài viết Xử lý video bằng WebCodecs cho biết cách sử dụng API để giải mã và hiển thị từng khung hình riêng lẻ cho canvas.
Thành phần web
Thành phần web là thuật ngữ chung cho một số công nghệ dùng để tạo các thành phần có thể tái sử dụng, chẳng hạn như Phần tử tuỳ chỉnh và Shadow DOM. Khả năng tương tác 2023 sẽ tập trung vào việc cải thiện khả năng tương tác của các công nghệ nền tảng này.
Trang tổng quan
Theo dõi tiến độ trong suốt cả năm trên trang tổng quan Interop 2023. Tại đây, bạn có thể xem điểm số hiện tại và trạng thái giải quyết những vấn đề trọng tâm này trên mọi công cụ trình duyệt chính.
Điểm của Khu vực trọng điểm được tính toán dựa trên tỷ lệ vượt qua bài kiểm tra. Nếu bạn có ý kiến phản hồi hoặc muốn đóng góp cho cải tiến cho WPT, vui lòng báo cáo vấn đề để yêu cầu cập nhật tập hợp các bài kiểm tra dùng để tính điểm.
