Hãy khám phá một số tính năng có thể tương tác trong năm 2022.
Chúng ta đã kết thúc một năm nữa, và đã đến lúc xem xét những cải tiến do trình duyệt thực hiện khi chúng ta làm việc cùng nhau để cải thiện khả năng tương tác của nền tảng web. Bạn có thể xem những việc đã bắt đầu trong bài đăng của chúng tôi vào tháng 3 năm nay, khi sáng kiến này được ra mắt.
Điểm tổng thể vào cuối năm cho thấy sự cải thiện đáng kể trên tất cả các công cụ.
Trong bài đăng này, hãy tìm hiểu những tiến bộ đã đạt được trong năm 2022. Ngoài các tính năng trên dòng tiêu đề, tất cả các công cụ còn có nhiều điểm cải tiến nhỏ hơn. Chúng tôi đã khắc phục các vấn đề nhỏ có thể gây ra sự không thống nhất giữa các công cụ và vướng mắc trong quá trình phát triển. Việc nhìn thấy các tính năng lớn có sẵn trên nhiều trình duyệt chắc chắn rất thú vị, nhưng đôi khi những điều nhỏ bé lại gây ra nhiều vấn đề nhất và thật tuyệt khi thấy chúng đã được cải thiện như thế nào.
Lớp tầng
Các lớp tầng cho phép bạn quản lý tầng bằng cách nhóm các bộ chọn thành các lớp. Đây là loại tính năng chỉ trở nên hữu ích khi được hỗ trợ ở mọi nơi. Tất cả công cụ chính hiện đều hỗ trợ lớp tầng và điểm số trên tất cả trình duyệt phản ánh khả năng tương tác của tính năng, chỉ còn một vài bài kiểm thử nữa là có thể hoàn tất cho Firefox.
Phần tử hộp thoại
Phần tử hộp thoại cho phép tạo các hộp thoại theo phương thức và không theo phương thức. Đây là một mẫu phổ biến trên web và việc sử dụng phần tử này sẽ cung cấp cho bạn khả năng hữu dụng và khả năng tiếp cận mà bạn sẽ phải phát triển và kiểm thử khi tạo các thành phần của riêng mình. Trong bài viết Xây dựng thành phần hộp thoại, Adam Argyle giải thích cách xây dựng dựa trên yếu tố này để xây dựng nhiều loại hộp thoại.
Lưới phụ
Vào đầu năm 2022, trình duyệt duy nhất hỗ trợ giá trị subgrid cho grid-template-rows và grid-template-columns là Firefox. Trong năm 2022, Safari đã được hỗ trợ và tính năng này đang trong quá trình phát triển cho Chrome. Sắp tới hạn chót cuối năm để có khả năng tương tác, thiết bị này sắp ra mắt.
Đơn vị khung nhìn
Đơn vị khung nhìn là tính năng duy nhất đạt 100% số lần vượt qua kiểm thử trên tất cả các công cụ. Điều này bao gồm các khái niệm về khung nhìn nhỏ và lớn, có tính đến việc thay đổi kích thước khung nhìn trên thiết bị di động khi các phần tử trên giao diện người dùng của thiết bị xuất hiện và biến mất. Bạn có thể tìm hiểu thêm về các đơn vị này trong bài đăng các đơn vị khung nhìn lớn, nhỏ và động.
Hỗ trợ trình duyệt
- 108
- 108
- 101
- 15,4
Màu 4
Tập hợp hoạt động màu này cho phép CSS không chỉ chỉ định màu ở các gam có độ phân giải cao hơn (ví dụ: display p3, rec2020), mà còn cung cấp các hàm màu mới mà mỗi hàm có các tiện ích riêng để làm việc với màu. Các hệ màu mới là lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65: hãy thử các màu này trong Canary ngay hôm nay khi cờ này được bật. Những thay đổi này cũng áp dụng cho tô chuyển tiếp, cho phép tác giả chỉ định không gian màu mà tô chuyển tiếp sử dụng. Cờ này cũng cho phép hỗ trợ color-mix(), cho phép bạn kết hợp 2 màu với nhau trong không gian tuỳ ý. Hàm color-mix() cũng nằm sau một cờ trong Safari và Firefox. Nhiều màu hơn, màu sắc đẹp hơn, độ dốc tốt hơn và công cụ hiệu quả hơn.
Khả năng tương tác năm 2023
Tôi hy vọng bạn có thể hài lòng khi biết rằng chúng tôi không có ý định dừng hoạt động vào cuối năm 2022, và Thử nghiệm tương tác năm 2023 đã đạt được kết quả tốt trong giai đoạn lập kế hoạch ban đầu. Vào năm mới, chúng tôi sẽ có thể công bố các tính năng đã được lựa chọn và hy vọng có thêm một năm nữa để hoạt động phát triển cho web trở nên dễ dàng hơn.
Hình ảnh chính của Ian Schneider.