Hãy khám phá một số tính năng đã có khả năng tương tác trong năm 2022.
Chúng ta đã đến cuối năm nữa và đã đến lúc xem xét những cải tiến mà 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 mọi việc đã bắt đầu như thế nào 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 triển khai.
Đ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 cùng tìm hiểu về những bước tiến trong năm 2022. Ngoài những tính năng trên tiêu đề này, tất cả công cụ đều 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ấn đề khiến bạn gặp phải sự cố trong quá trình phát triển. Thật tuyệt vời khi được thấy các tính năng lớn có sẵn trên nhiều trình duyệt, nhưng đôi khi chính những vấn đề nhỏ mới gây ra vấn đề nhất và thật tuyệt khi biết chúng đã được cải thiện bao nhiêu.
Lớp tầng
Lớp phân 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 phân tầng và điểm số trên tất cả các trình duyệt phản ánh khả năng tương tác của tính năng này, chỉ còn một vài bài kiểm thử nữa là đạt cho Firefox.
Thành phần hộp thoại
Phần tử hộp thoại cho phép tạo các hộp thoại phụ và các hộp thoại phụ. Đâ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 truy cập mà bạn phải phát triển và kiểm tra 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 tạo dựa trên phần tử này để tạo nhiều loại hộp thoại.
Lưới con
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 được phát triển trong Chrome. Vì không còn khả năng tương tác, nhưng tính năng này đang trong quá trình thực hiện.
Đơn vị khung nhìn
Đơn vị khung nhìn là tính năng duy nhất đạt 100% các bài kiểm thử vượt qua 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 đơ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 các tác vụ màu này cho phép CSS không chỉ chỉ định màu trong các gam màu 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 đều có các tiện ích độc đáo để làm việc với màu. Các không gian 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 với 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 hệ màu sử dụng tô chuyển tiếp. Cờ này cũng hỗ trợ color-mix(), cho phép bạn kết hợp hai màu với nhau trong một không gian tuỳ ý. Hàm color-mix() cũng nằm sau 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ác công cụ tốt hơn.
Interop 2023
Tôi hy vọng bạn sẽ 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à hiện tại Interop 2023 đã hoàn thành tốt bước lập kế hoạch ban đầu. Trong năm mới, chúng tôi sẽ có thể công bố các tính năng đã được chọn và mong đợi thêm một năm giúp việc phát triển web trở nên dễ dàng hơn.
Hình ảnh chính của Ian Schneider.