Compat 2021: Loại bỏ 5 vấn đề hàng đầu liên quan đến khả năng tương thích trên web

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.

Philip Jägenstedt
Philip Jägenstedt
X GitHub Trang chủ
Robert Nyman

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 trên 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à:

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.

Ảnh kéo dãn bàn cờ.
Hình ảnh có kích thước không chính xác do có lỗi.
Bàn cờ.
Hình ảnh đã được định kích thước 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

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:

Bản minh hoạ hoạt hình về cờ vua của Chen Huệ Jing.

Tại sao lại được ưu tiên

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:

Chromium với "TablesNG"
Tắc kè
WebKit

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

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:

Sử dụng khoảng đệm trên cùng
.container {
  width: 100%;
  padding-top: 56.25%;
}
Sử dụng tỷ lệ khung hình
.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

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:

Hiệu ứng lật thẻ trong Chromium (bên trái), Gecko (ở giữa) và WebKit (bên phải). Bản minh hoạ của David Baron từ lỗi nhận xét.

Tại sao lại được ưu tiên

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.

Trang tổng quan tương thích phiên bản 2021
Trang tổng quan Compat 2021 (ảnh chụp màn hình vào ngày 16/11/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 để 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!