Xin nhắc lại rằng trong 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 sẽ 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 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 sẽ lại làm việc cùng nhau để giải quyết những vấn đề hàng đầu về khả năng tương thích với trình duyệt. Nỗ lực đã bắt đầu trên quy mô này với Interop 2022. Bạn có thể tìm hiểu những gì chúng ta đã cùng nhau đạt được trong bài đăng cuối năm. Tất cả những người tham gia đề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à các nhà phát triển ở khắp nơi.
Các lĩnh vực trọng tâm của Interop năm 2023
Lần này, chúng tôi có ít nhất 26 lĩnh vực trọng tâm, được trình bày chi tiết trong tài liệu dự án của mình. Các chú thích này được sắp xếp 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
- Truy vấn vùng chứa trong CSS
- Vùng chứa trong CSS
- Lớp học giả mạo CSS
- Thuộc tính tuỳ chỉnh trong CSS
- Flexbox
- Phát hiện tính năng phông chữ và bảng quảng cáo
- Biểu mẫu
- Lưới
- :has()
- Cố định
- Tạo mặt 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 Worker
- Đườ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: Lĩnh vực trọng tâm tổng hợp dành cho các 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 trong bài kiểm tra Kiểm thử nền tảng web dựa trên Tài liệu web MN. Tuy nhiên, chúng tôi cho rằng có thể bạn sẽ thực sự quan tâm đến một vài tính năng sau đây.
Truy vấn vùng chứa
Truy vấn vùng chứa luôn là yêu cầu hàng đầu của các nhà phát triển trong nhiều năm. Vào năm 2022, Chrome và Safari đã cung cấp truy vấn này. Firefox mong muốn gửi truy vấn vùng chứa trong 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 truy vấn vùng chứa hoạt động đáng tin cậy trên nhiều trình duyệt và theo các thông số kỹ thuật.
:has(...)
Từ lâu, các nhà phát triển đã yêu cầu cung cấp bộ chọn gốc trong CSS. Lớp giả :has() giúp bạn có thể sử dụng 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 đó liên quan đến phần tử tham chiếu. Ví dụ: công cụ 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 hình không có chú thích. Tìm hiểu thêm về các trường hợp sử dụng cho has() trong phần :has(), bộ chọn gia đình.
Thuộc tính tuỳ chỉnh
Thuộc tính tuỳ chỉnh CSS, còn 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í, nhờ đó giảm tình trạng lặp lại. Ví dụ: bạn có thể xác định màu hoặc cỡ chữ phổ biến một lần trong biểu định kiểu và sử dụng màu này trong các thành phần. Tính năng hỗ trợ cơ bản cho thuộc tính tuỳ chỉnh đã có trong các trình duyệt từ lâu. Interop 2023 tập trung vào quy tắc @property. @property đại diện cho việc đăng ký thuộc tính tùy 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à liệu thuộc tính có kế thừa giá trị hay không. Tìm hiểu thêm tại @property: cung cấp siêu năng lực cho biến CSS.
Tạo mặt nạ CSS
Tạo mặt nạ cho CSS cung cấp các phương pháp để áp dụng hiệu ứng hình ảnh, chẳng hạn như bạn có thể thấy trong ứng dụng đồ hoạ bằng cách sử dụng CSS. Hỗ trợ cho các thuộc tính tạo mặt nạ khác nhau không đồng đều, khiến việc tạo mặt nạ khó sử dụng hơn mức cần thiết. Trọng tâm này sẽ giúp các nhà phát triển tự tin sử dụng hiệu ứng mẫu quảng cá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 che 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 chuỗi với 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à Canvas API. Nhà phát triển cũng có thể chạy các tác vụ kết xuất 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. Các sự kiện với chuột được kích hoạt khi sử dụng chuột, nhưng cũng đối với lý do trước đây đối với thao tác chạm. Khu vực trọng tâm này đề cập đến hành vi tương tác con trỏ và chuột với các trang, bao gồm cả cách các trang tương tác với các khu vực thử nghiệm lượt truy cập và cuộn. Trọng tâm của năm 2023 không bao gồm thao tác chạm và bút cảm ứng, do còn thiếu nội dung Kiểm thử nền tảng web ở mảng này.
WebCodecs
API WebCodecs cung cấp các phương thức cho nhà phát triển để truy cập vào từng khung hình và đoạn âm thanh riêng lẻ. Lớp này cho phép truy cập vào các bộ mã hoá và giải mã đã có sẵn trong trình duyệt và nhiều giao diện để tương tác với chúng. Bài viết Xử lý video bằng WebCodecs cho biết cách sử dụng API để giải mã và kết xuất từng khung hình vào một canvas.
Thành phần web
Thành phần web là một thuật ngữ bao quát một số công nghệ được dùng để tạo các thành phần có thể sử dụng lại, chẳng hạn như Phần tử tuỳ chỉnh và DOM bóng. Phiên bản Interop 2023 sẽ tập trung vào việc cải thiện khả năng tương tác của những 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 xử lý các vấn đề trọng tâm này trên mọi công cụ trình duyệt chính.
Điểm Vùng trọng điểm được tính 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 góp phần cải thiện cho WPT, vui lòng gửi vấn đề để yêu cầu cập nhật nhóm thử nghiệm dùng để tính điểm.
