Bản cập nhật cuối năm về Compat 2021 – một nỗ lực loại bỏ các vấn đề về khả năng tương thích với trình duyệt trong 5 khía cạnh trọng tâm chính: CSS Flexbox, CSS Grid, vị trí: cố định, tỷ lệ khung hình và chuyển đổi CSS.
Năm nay đang đến gần và đã đến lúc cập nhật lần cuối về Compat 2021 – một nỗ lực loại bỏ các vấn đề về khả năng tương thích với trình duyệt trong 5 khía cạnh trọng tâm chính.
>90%
điểm số trong tất cả các trình duyệt
Kể từ lần cập nhật gần đây nhất, chúng tôi đã nhận thấy có những điểm cải tiến trên tất cả các trình duyệt. Tất cả trình duyệt đều bắt đầu với điểm kiểm tra thấp hơn nhiều vào đầu năm, nhưng hiện tại tất cả trình duyệt đều đã vượt qua điểm số 90%! Điều này có nghĩa là nền tảng web đã cải thiện đáng kể khả năng tương tác của 5 khía cạnh trọng tâm.
Sự đóng góp cho công cụ trình duyệt không chỉ của nhà cung cấp trình duyệt mà còn của những người khác trong cộng đồng web. Đối với dự án này, chúng tôi đặc biệt muốn cảm ơn Igalia vì đã tham gia và tiếp tục nỗ lực để cải thiện điểm số. Igalia đã góp phần cải thiện cả 5 khía cạnh trọng tâm của Compat 2021.
Trên wpt.fyi (trang tổng quan về kết quả kiểm thử), giờ đây, có một chế độ xem kết quả kiểm thử được lọc hiển thị tất cả các hoạt động kiểm thử có trong Compat 2021, cũng như các chế độ xem cho Chrome, Firefox và Safari để so sánh kết quả với lần cập nhật gần đây nhất của chúng tôi vào tháng 7.
Hãy cùng tìm hiểu những điểm cải tiến trong từng khía cạnh!
Hộp linh hoạt CSS
flex-basis: content hiện đang được triển khai trên tất cả trình duyệt, với các cách triển khai bắt đầu trong
Chromium và
WebKit. (Giá trị content đã được Gecko hỗ trợ.)
Trong Chromium, vấn đề về kích thước flexbox sẽ được khắc phục, phù hợp với thông số kỹ thuật và hành vi của Gecko. Ngoài ra, trong Gecko, một số vấn đề ảnh hưởng đến Compat 2021 đã được khắc phục, bao gồm cả vấn đề về chiều cao phần trăm trên các mục linh hoạt. Cuối cùng, trong WebKit, chúng tôi hiện hỗ trợ thêm nhiều giá trị thuộc tính căn chỉnh (left, right, self-start, Self-end, start, end) và thực hiện nhiều điểm cải tiến cho vị trí tuyệt đối, đồng thời cải thiện kết quả thử nghiệm flexbox trong Compat 2021.
Lưới CSS
Việc sử dụng Lưới CSS trên web tiếp tục tăng lên, như bạn có thể thấy trong cả Niên giám web năm 2021 và các chỉ số về việc sử dụng của Chrome.
Việc ra mắt GridNG trong Chrome và Edge 93 đã giải quyết nhiều vấn đề thường xuyên xảy ra với Grid, kết thúc 38 vấn đề ấn tượng trong công cụ theo dõi lỗi của Chromium. Cùng với nhiều điểm cải tiến nhỏ hơn tiếp theo, điểm số Compat cho 2021 cho Lưới trong Chromium đã tăng từ 3% đến 97%. Công việc này do nhóm Edge của Microsoft phụ trách.
Lỗi vị trí tuyệt đối ảnh hưởng đến Lưới đã được khắc phục trong Gecko và nhiều bản sửa lỗi đã xuất hiện trong WebKit, giúp cải thiện 1% cho Firefox và cải thiện 3% cho Safari trong các bài kiểm thử Lưới.
Dịch vụ so sánh giá (CSS) position: sticky
Trong lần cập nhật gần đây nhất, chúng tôi nhận thấy position: sticky là khu vực đầu tiên mà mọi trình duyệt (trong trường hợp này là Chrome và Edge) đạt 100% vượt qua bài kiểm thử. Giờ đây, sau một số bản sửa lỗi trong quá trình triển khai của WebKit, Safari cũng đạt điểm số 100% cho các kiểm tra này. Hầu hết những điểm cải tiến này
đã được đưa vào Safari 15.
Thuộc tính CSS aspect-ratio
Khả năng hỗ trợ trên nhiều trình duyệt để xác định tỷ lệ khung hình (tỷ lệ chiều rộng/chiều cao) của các thành phần tiếp tục được cải thiện, với điểm số của Compat 2021 lần lượt đạt 99%, 97% và 95% cho Chrome/Edge, Firefox và Safari. Hầu hết những điểm cải tiến không nằm ở chính thuộc tính aspect-ratio, mà là cách các thuộc tính width và height được liên kết với một giá trị aspect-ratio mặc định cho các phần tử. Tính năng này được triển khai cho nhiều phần tử trong WebKit và <canvas> cho Chromium.
Chuyển đổi CSS
Hiện chúng tôi đã hỗ trợ transform: perspective(none) trong
Chromium,
Gecko và
WebKit. Điều này sẽ giúp bạn dễ dàng tạo ảnh động giữa không có phối cảnh và không có phối cảnh.
Trong Chromium, transform-style: preserve-3d (cho phép các phần tử con tham gia vào cùng một cảnh 3D) và thuộc tính perspective (áp dụng biến đổi phối cảnh cho các phần tử con) hiện được căn chỉnh với thông số kỹ thuật bằng cách chỉ áp dụng cho các phần tử con.
Sự gia tăng lớn về điểm số của các phép biến đổi CSS trên tất cả các trình duyệt chủ yếu là nhờ những điểm cải tiến đối với bộ kiểm thử, trong đó, chúng tôi đã khắc phục hoặc xoá các phép kiểm thử không chính xác. Điều này giúp bạn dễ dàng hiểu được các vấn đề còn lại về khả năng tương tác và tránh hồi quy trong tương lai.
Kết luận
Chúng tôi rất biết ơn mọi người đã cố gắng đạt được điểm số cao trong năm nay với nhiều cải tiến về điểm số cũng như cơ sở hạ tầng kiểm thử tốt hơn. aspect-ratio là một tính năng được các nhà phát triển web yêu cầu từ lâu và hiện được hỗ trợ trong mọi trình duyệt. Việc sử dụng flexbox, lưới và position: sticky đều đang ngày càng phát triển. Các tính năng này hiện được hỗ trợ tốt hơn trên các trình duyệt nhờ nhiều điểm cải tiến trong năm 2021.
Tiếp theo là gì? Chúng tôi rất vui khi tiếp tục hợp tác với các nhà cung cấp trình duyệt khác và cộng đồng rộng lớn hơn trong lần tiếp theo nỗ lực này. Chúng tôi đã bắt đầu nghiên cứu và thảo luận về các khía cạnh trọng tâm cho năm 2022. Vui lòng chú ý theo dõi thông báo sắp tới.
Nếu bạn có ý kiến phản hồi hoặc câu hỏi, vui lòng liên hệ với chúng tôi trên Twitter theo địa chỉ @ChromiumDev.