Bản cập nhật giữa năm về Compat 2021 – 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 Lưới, vị trí: cố định, tỷ lệ khung hình và chuyển đổi CSS.
Đã đến lúc triển khai bản cập nhật giữa năm cho 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 lĩnh vực trọng tâm chính. Để biết thêm thông tin chi tiết về công việc #compat2021 và cách chúng tôi quyết định các lĩnh vực cần tập trung, hãy xem thông báo trong tháng 3.
Các cải tiến đối với Chromium được thảo luận trong bài đăng này sẽ được áp dụng cho Chrome, Edge và tất cả các trình duyệt dựa trên Chromium.
Cách chúng tôi đo lường sự tiến bộ
Bạn có thể kiểm tra trang tổng quan Tương thích 2021 cho các chương trình kiểm thử nền tảng web để xem số lượt kiểm thử đạt và biểu đồ xu hướng cho các trình duyệt khác nhau.
Số liệu đơn giản về "các lượt kiểm thử đã vượt qua" không thể cho biết toàn bộ tình hình tương thích của trình duyệt. Tuy nhiên, đây chỉ là một trong những tín hiệu để chúng tôi thấy được tiến độ nỗ lực của mình. Khi có ít sự khác biệt giữa các trình duyệt trong kết quả kiểm thử, một tính năng web trên nhiều trình duyệt sẽ có khả năng tương tác cao hơn.
Hộp linh hoạt CSS
Cả 3 công cụ trình duyệt này đều nhận thấy những điểm cải tiến trên flexbox.
Safari 14.1 đã vận chuyển thuộc tính gap cho flexbox. Thuộc tính gap là một cách thuận tiện để đặt khoảng cách giữa các mục. Thuộc tính này thường được dùng trong bố cục Lưới và tính năng hỗ trợ trong bố cục flexbox là một trong những tính năng được yêu cầu nhiều nhất trong Báo cáo về khả năng tương thích của trình duyệt MN. Với bản cập nhật này, thuộc tính gap trong bố cục linh hoạt có sẵn trong tất cả các trình duyệt chính và thách thức về khả năng tương thích hàng đầu đã được giải quyết. Safari 14.1 cũng bao gồm nhiều bản sửa lỗi cho
hình ảnh trong flexbox, giúp loại bỏ nhu cầu tìm giải pháp cũ.
Firefox đã phân tích quá trình kết xuất bảng dưới dạng mục linh hoạt, giúp Firefox tiến gần hơn đến 100% các bài kiểm thử đạt (hiện là 98,5%).
Chromium cũng cố định các bảng dưới dạng các mục linh hoạt.
Trong Chromium 88, cũng có tính năng viết lại hình ảnh dưới dạng mục linh hoạt, giúp giải quyết một số lỗi lâu dài. Cuối cùng, gần đây Chromium đã thêm tính năng hỗ trợ cho các từ khoá căn chỉnh mới: start, end, self-start, self-end, left và right. Bạn có thể dùng thử các từ khoá này trong
Chrome Canary và
Edge Canary.
Lưới CSS
Mức sử dụng Lưới CSS đang tăng trưởng đều đặn, hiện ở mức 9% số lượt xem trang. Cả 3 công cụ trình duyệt chính đều triển khai Lưới CSS và hiện đã vượt qua hơn 89% thử nghiệm nền tảng web có liên quan. Việc thu hẹp khoảng cách về khả năng tương thích là điều quan trọng để giúp tính năng này phát triển ổn định.
Cho đến nay trong năm 2021, Safari đã cải thiện tỷ lệ vượt qua các bài kiểm thử từ 89% lên 93% và Chromium đang nghiên cứu một kiến trúc mới để giải quyết nhiều vấn đề về Lưới CSS hơn, có tên là GridNG. Đây là nỗ lực của đội ngũ Microsoft và đã dẫn đến việc tăng tỷ lệ gần đây từ 94% lên 97% trong các kiểm thử Lưới được nhắm mục tiêu. Bạn sẽ sớm nhận được thông tin cập nhật về GridNG trên blog Edge.
Dịch vụ so sánh giá (CSS) position: sticky
Trong Chromium,
position: sticky cho tiêu đề bảng
đã được khắc phục khi phát hành TablesNG – một nỗ lực trong nhiều năm để tái cấu trúc kết xuất bảng.
Thay đổi này, cùng với một số cuối cùng
bản sửa, đã giúp kênh nhà phát triển Chrome và Edge 93
vượt qua 100% thử nghiệm nhắm mục tiêu.
Ngoài position: sticky,
TablesNG đã giải quyết được 72 lỗi Chromium!
Thuộc tính CSS aspect-ratio
Thuộc tính aspect-ratio giúp bạn dễ dàng đặt tỷ lệ giữa chiều rộng và chiều cao, rất quan trọng đối với thiết kế web thích ứng. Đây cũng là một giải pháp để ngăn chặn việc thay đổi bố cục tích luỹ.
Thuộc tính aspect-ratio hiện được hỗ trợ trong các phiên bản ổn định của Chrome, Edge và Firefox, cũng như trong Safari 15 beta. Khi khả năng hỗ trợ trên nhiều trình duyệt được cải thiện, mức sử dụng sẽ tăng lên.
Mặc dù không có trình duyệt nào đạt 100% thành tích vượt qua bài kiểm thử, nhưng khoảng cách về khả năng tương thích của aspect-ratio là nhỏ nhất trong cả 5 lĩnh vực trọng tâm của Compat 2021. Công cụ này có hơn 90% bài kiểm thử vượt qua tất cả các trình duyệt chính. Về sau, chúng tôi sẽ tiếp tục theo dõi tiến trình bằng cách sử dụng bộ kiểm thử này để biến bộ công cụ này thành một tính năng vững chắc.
Tìm hiểu thêm về cách sử dụng và các lợi ích của thuộc tính aspect-ratio trên web.dev.
Chuyển đổi CSS
Kết quả của các kiểm thử có mục tiêu cho biến đổi CSS đã cải thiện chậm và ổn định, do cả các bản sửa lỗi và điểm cải tiến đối với chính các bài kiểm thử đó.
Nhóm Chromium cũng đang nỗ lực cải thiện khả năng tương tác của transform-style:
preserve-3d và transform :perspective(). Chúng tôi hy vọng sẽ chia sẻ thêm với bạn trong bản cập nhật tiếp theo.
Cải thiện điểm số tổng thể
Kể từ khi công bố vào tháng 3, cả 3 công cụ trình duyệt đều cải thiện điểm số Compat 2021:
- Chrome và Edge Dev giảm từ 86 lên 92.
- Firefox đã tăng từ 83 lên 86.
- Safari thay đổi từ 64 thành 82 trang.
Đáng chú ý, Safari đã thu hẹp khoảng cách về khả năng tương thích thêm 18 điểm, nhờ rất nhiều nỗ lực của những người đóng góp WebKit. Đặc biệt, nhóm tại
Igalia đã đóng góp
cho thuộc tính aspect-ratio và nhiều điểm cải tiến cho Flexbox và Grid, chẳng hạn như gap cho flexbox
và nhiều bản sửa lỗi.
Làm theo tiến trình của Compat 2021
Để theo dõi tiến trình của Compat 2021, hãy theo dõi trang tổng quan, đăng ký danh sách gửi thư của chúng tôi hoặc liên hệ với @chromiumdev. Nếu bạn gặp bất kỳ sự cố nào, hãy nhớ gửi lỗi cho trình duyệt bị ảnh hưởng.