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