Google đang làm việc với các nhà cung cấp trình duyệt và đối tác trong ngành khác để khắc phục 5 vấn đề hàng đầu về khả năng tương thích với trình duyệt cho các nhà phát triển web: CSS flexbox, CSS Grid, position: sticky, aspect-ratio và chuyển đổi CSS.
Google đang hợp tác với các nhà cung cấp trình duyệt và đối tác trong ngành khác để khắc phục 5 vấn đề hàng đầu về khả năng tương thích với trình duyệt cho các nhà phát triển web. Các lĩnh vực trọng tâm là CSS flexbox, Lưới CSS, position: sticky, aspect-ratio và các phép biến đổi CSS. Hãy xem phần Cách bạn có thể đóng góp và theo dõi để tìm hiểu cách tham gia.
Thông tin khái quát
Khả năng tương thích trên web luôn là một thách thức lớn đối với các nhà phát triển. Trong vài năm qua, Google và các đối tác khác, bao gồm cả Mozilla và Microsoft, đã tìm hiểu thêm về những vấn đề hàng đầu mà các nhà phát triển web gặp phải, nhằm thúc đẩy công việc và ưu tiên giải quyết vấn đề. Dự án này liên quan đến hoạt động Mức độ hài lòng của nhà phát triển (DevSAT) của Google và bắt đầu ở quy mô lớn hơn bằng việc tạo các khảo sát DNA (Đánh giá nhu cầu của nhà phát triển) trong năm 2019 và 2020 cũng như một nỗ lực nghiên cứu chuyên sâu được trình bày trong Báo cáo về khả năng tương thích của trình duyệt MN 2020. Chúng tôi đã nghiên cứu thêm trên nhiều kênh, chẳng hạn như các cuộc khảo sát về Trạng thái của CSS và Trạng thái của JS.
Mục tiêu vào năm 2021 là loại bỏ các vấn đề về khả năng tương thích của trình duyệt trong 5 khía cạnh trọng tâm chính để các nhà phát triển có thể tự tin xây dựng các giải pháp này làm nền tảng đáng tin cậy. Nỗ lực này được gọi là #Compat 2021.
Chọn hoạt động cần chú trọng
Mặc dù về cơ bản, tất cả nền tảng web đều có các vấn đề về khả năng tương thích với trình duyệt, nhưng trọng tâm của dự án này là tập trung vào một số ít vấn đề có vấn đề nhất có thể được cải thiện đáng kể, qua đó loại bỏ những vấn đề hàng đầu đối với nhà phát triển.
Dự án tương thích sử dụng nhiều tiêu chí ảnh hưởng đến những khía cạnh cần ưu tiên, trong đó có một số tiêu chí:
- Mức sử dụng tính năng. Ví dụ: flexbox được sử dụng trong 75% tổng số lượt xem trang và tỷ lệ sử dụng đang tăng mạnh trong Lưu trữ HTTP.
- Số lượng lỗi (trong Chromium, Gecko, WebKit) và đối với Chromium, số lượng sao các lỗi đó.
Kết quả khảo sát:
- Khảo sát ADN của MMDN
- Báo cáo về khả năng tương thích của trình duyệt MN
- Trạng thái của CSS các tính năng đã biết và được sử dụng nhiều nhất
Kết quả kiểm thử từ web-platform-tests. Ví dụ: flexbox trên wpt.fyi.
Tôi có thể dùng các tính năng được tìm kiếm nhiều nhất của người dùng không.
5 lĩnh vực trọng tâm hàng đầu trong năm 2021
Năm 2020, Chromium bắt đầu công việc giải quyết các vấn đề hàng đầu được nêu trong bài viết Cải thiện khả năng tương thích của trình duyệt Chromium vào năm 2020. Năm 2021, chúng tôi sẽ bắt đầu nỗ lực hơn nữa để tiến xa hơn nữa. Google và Microsoft đang cùng nhau giải quyết các vấn đề hàng đầu trong Chromium, cùng với Igalia. Igalia, những người thường xuyên đóng góp cho Chromium và WebKit, và là nhà bảo trì cổng WebKit chính thức dành cho các thiết bị được nhúng, đã hỗ trợ và tham gia rất nhiều vào các nỗ lực tương thích này, cũng như sẽ giúp giải quyết và theo dõi các sự cố đã xác định.
Sau đây là những lĩnh vực mà chúng tôi cam kết khắc phục trong năm 2021.
Hộp linh hoạt CSS
CSS flexbox
được sử dụng rộng rãi
trên web và vẫn còn một số thách thức lớn đối với nhà phát triển. Ví dụ: cả Chromium và WebKit đều gặp vấn đề với vùng chứa linh hoạt auto-height dẫn đến hình ảnh có kích thước không chính xác.
Ảnh của Alireza Mahmoudi.
Bài đăng trên blog flexbox Cats của Igalia sẽ đi sâu hơn vào những vấn đề này và xem thêm nhiều ví dụ khác.
Lý do ưu tiên
- Khảo sát: Vấn đề hàng đầu trong Báo cáo về khả năng tương thích của trình duyệt MNN, được biết và sử dụng nhiều nhất trong Trạng thái của CSS
- Kiểm tra: đạt 85% đạt trong tất cả các trình duyệt
- Mức sử dụng: 75% lượt xem trang, tăng mạnh trong Lưu trữ HTTP
Lưới CSS
CSS Grid là thành phần cốt lõi cho bố cục web hiện đại, thay thế nhiều kỹ thuật và giải pháp thay thế cũ. Khi mức độ sử dụng ngày càng tăng, tính năng này cần phải trở nên vững chắc để không bao giờ có được sự khác biệt giữa các trình duyệt. Một khía cạnh còn thiếu là tính năng tạo ảnh động cho bố cục lưới, được hỗ trợ trong Gecko nhưng không hỗ trợ Chromium hoặc WebKit. Khi được hỗ trợ, các hiệu ứng như sau sẽ có thể hoạt động:
Lý do ưu tiên
- Khảo sát: Bản cập nhật trong Báo cáo về khả năng tương thích của trình duyệt MNN, nổi tiếng nhưng ít được dùng hơn trong Trạng thái của CSS
- Kiểm tra: đạt 75% trong tất cả các trình duyệt
- Mức sử dụng: 8% và tăng ổn định, Lưu trữ HTTP tăng trưởng nhẹ
Vị trí CSS: cố định
Vị trí cố định cho phép nội dung nằm cố định ở cạnh của khung nhìn và thường dùng cho các tiêu đề luôn hiện ở phía trên cùng của khung nhìn. Mặc dù được hỗ trợ trong mọi trình duyệt, nhưng có một số trường hợp sử dụng phổ biến là tính năng này không hoạt động như mong đợi. Ví dụ: Chromium không hỗ trợ tiêu đề bảng cố định, mặc dù hiện được hỗ trợ sau một cờ, nhưng kết quả không nhất quán trên các trình duyệt:
Xem bản minh hoạ tiêu đề bảng cố định của Rob Flack.
Lý do ưu tiên
- Khảo sát: Được biết đến/sử dụng nhiều trong Trạng thái của CSS và được nêu nhiều lần trong Báo cáo về khả năng tương thích với trình duyệt MN
- Số bài kiểm thử: 66% đạt trong tất cả các trình duyệt
- Mức sử dụng: 8%
Thuộc tính tỷ lệ khung hình CSS
Thuộc tính CSS aspect-ratio mới giúp bạn dễ dàng duy trì tỷ lệ chiều rộng/chiều cao nhất quán cho các phần tử, nhờ đó không cần phải tiến hành padding-top tấn công phổ biến:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Vì đây là trường hợp sử dụng phổ biến nên phương pháp này dự kiến sẽ được sử dụng rộng rãi, đồng thời chúng tôi muốn đảm bảo rằng API này hoạt động ổn định trong tất cả các trường hợp phổ biến và trên các trình duyệt.
Lý do ưu tiên
- Khảo sát: Đã nổi tiếng nhưng chưa được sử dụng rộng rãi tại Tiểu bang CSS
- Thử nghiệm: 27% đạt trong tất cả các trình duyệt
- Mức sử dụng: 3% và dự kiến sẽ tăng lên
Chuyển đổi CSS
Chuyển đổi CSS đã được hỗ trợ trên tất cả các trình duyệt trong nhiều năm và được sử dụng rộng rãi trên web. Tuy nhiên, vẫn còn nhiều khía cạnh mà chúng không hoạt động giống nhau trên các trình duyệt, đáng chú ý là với ảnh động và chuyển đổi 3D. Ví dụ: hiệu ứng lật thẻ có thể rất không nhất quán trên các trình duyệt:
Lý do ưu tiên
- Khảo sát: Rất nổi tiếng và được sử dụng trong Trạng thái CSS
- Kiểm thử: 55% đạt trong tất cả các trình duyệt
- Mức sử dụng: 80%
Cách đóng góp và theo dõi
Hãy theo dõi và chia sẻ mọi nội dung cập nhật mà chúng tôi đăng trên @ChromiumDev hoặc danh sách gửi thư công khai, Compat 2021. Hãy đảm bảo rằng bạn có lỗi hoặc gửi báo cáo về lỗi cho các vấn đề bạn đang gặp phải. Nếu có lỗi, hãy liên hệ qua các kênh nêu trên.
Chúng tôi sẽ thường xuyên cập nhật tiến trình này trên web.dev. Bạn cũng có thể theo dõi tiến trình cho từng lĩnh vực trọng tâm trong Trang tổng quan tương thích 2021.
Chúng tôi hy vọng nỗ lực phối hợp này giữa các nhà cung cấp trình duyệt nhằm cải thiện độ tin cậy và khả năng tương tác sẽ giúp bạn tạo ra những điều tuyệt vời trên web!