Lần đầu tiên, tất cả các nhà cung cấp trình duyệt lớn và các bên liên quan khác đã cùng nhau giải quyết những vấn đề hàng đầu về khả năng tương thích của trình duyệt được các nhà phát triển web xác định. Phiên bản Interop 2022 sẽ cải thiện trải nghiệm phát triển cho web ở 15 lĩnh vực chính. Trong bài viết này, hãy tìm hiểu cách chúng tôi trình bày nội dung này, trọng tâm của dự án là gì, cách đo lường mức độ thành công và cách bạn có thể theo dõi tiến độ.
Mọi việc đều bắt đầu vào năm 2019
Năm 2019, Mozilla, Google và những công ty khác đã bắt đầu nỗ lực lớn để tìm hiểu các vấn đề mà nhà phát triển gặp phải, thông qua bản khảo sát Đánh giá nhu cầu của nhà phát triển MN và Báo cáo chuyên sâu về khả năng tương thích với trình duyệt. Các báo cáo này cung cấp cho chúng tôi thông tin chi tiết và hữu ích để giải quyết những thách thức hàng đầu đối với nhà phát triển trên nền tảng web, đồng thời giúp chúng tôi nỗ lực hết mình trong năm 2021.
Ngoài ra, Compat 2021 đã dẫn đến việc tạo ra một nền tảng vững chắc cho các tính năng mạnh mẽ như lưới CSS (mức sử dụng tăng 12% và tăng trưởng đều đặn) và CSS flexbox (mức sử dụng 77%), bao gồm cả thuộc tính gap trong flexbox, giải quyết vấn đề hàng đầu của nhà phát triển khi áp dụng các phương pháp bố cục mới.
Vào cuối năm 2021, chúng tôi vui mừng đạt được điểm số hơn 90% cho tất cả phương pháp triển khai!
Interop 2022 là gì?
Interop 2022 là một điểm chuẩn được những người đại diện của 3 cách triển khai trình duyệt chính thống nhất và được phát triển thông qua quy trình chỉ định công khai và xem xét với sự đánh giá của những người hỗ trợ Apple, Bocoup, Google, Igalia, Microsoft và Mozilla.
Điểm chuẩn này tập trung vào 15 khía cạnh mà các nhà phát triển xác định là đặc biệt rắc rối khi thiếu thông tin hoặc gặp vấn đề về khả năng tương thích trên các trình duyệt. Tất cả các nhà cung cấp trình duyệt đều đồng ý tập trung vào những lĩnh vực này và tất cả mọi người liên quan đều rất hào hứng bắt đầu cải thiện trải nghiệm phát triển cho web một cách tốt hơn.
15 lĩnh vực cần tập trung
Các tính năng sau đây sẽ là trọng tâm của Interop 2022. Chúng bao gồm 10 khu vực mới, cộng với 5 khu vực được chuyển từ Compat 2021. Các lĩnh vực trọng tâm mới là:
Lớp tầng
Lớp phủ tầng cung cấp cho nhà phát triển web nhiều quyền kiểm soát hơn đối với tầng. Chúng cung cấp một cách để nhóm các bộ chọn thành các lớp, mỗi lớp có những đặc điểm riêng. Điều này có nghĩa là bạn không cần đặt hàng cẩn thận bộ chọn hoặc tạo bộ chọn hết sức cụ thể để thay thế các quy tắc CSS cơ sở.
Không gian màu và hàm màu CSS
Để sử dụng các hàm màu trong một hệ thống thiết kế, hiện tại bạn cần dựa vào Sass, PostCSS hoặc calc() trên các giá trị HSL. Các hàm màu được tích hợp trong CSS có nghĩa là màu sắc có thể được cập nhật động, còn hệ màu mới loại bỏ giới hạn đối với gam màu sRGB và các giới hạn về nhận thức của HSL.
CSS cấp màu 5 có 2 hàm được xác định để hỗ trợ việc tuỳ chỉnh giao diện động trên nền tảng web:
color-mix(): Lấy hai màu và trả về kết quả trộn chúng trong một hệ màu được chỉ định theo một lượng nhất định.color-contrast(): Chọn trong danh sách các màu, màu có độ tương phản cao nhất so với một màu đơn được chỉ định.
Các hàm này hỗ trợ hệ màu mở rộng (LAB, LCH và P3). Ngoài HSL và sRGB, chúng còn mặc định sử dụng hệ màu LCH đồng nhất.
Đơn vị khung nhìn mới
Các vấn đề khó khăn khi xử lý kích thước khung nhìn là một vấn đề nổi bật trong cả Báo cáo về khả năng tương thích của trình duyệt MN năm 2020 và cuộc khảo sát mới về Trạng thái CSS năm 2021. Giá trị CSS và đơn vị cấp 4 thêm các đơn vị mới cho kích thước khung nhìn động lớn nhất, nhỏ nhất và nhỏ nhất, lv*, sv* và dv*. Các đơn vị này sẽ giúp bạn dễ dàng tạo bố cục lấp đầy khung nhìn hiển thị trên thiết bị di động trong khi vẫn xem xét thanh địa chỉ.
Ngoài ra, nhóm phụ trách các nhà cung cấp hỗ trợ Interop 2022 sẽ cộng tác nghiên cứu và cải thiện trạng thái tương tác của các tính năng đo lường khung nhìn hiện có, bao gồm cả đơn vị vh hiện có.
Thao tác cuộn
Báo cáo khảo sát về thao tác cuộn năm 2021 xác nhận rằng rất khó triển khai các tính năng cuộn và khả năng tương thích với chức năng cuộn, cũng như có nhiều khía cạnh cần cải thiện. Chúng tôi sẽ tập trung vào thao tác cuộn nhanh, hành vi cuộn và hành vi cuộn qua để giúp thao tác cuộn nhất quán và mượt mà hơn trên các nền tảng.
Chúng tôi cũng đang tìm hiểu các đề xuất mới về tính năng chụp nhanh.
Lưới con
Giá trị subgrid của grid-template-columns và grid-template-rows có nghĩa là mục lưới đã áp dụng display: grid có thể kế thừa định nghĩa theo dõi từ phần của lưới mẹ mà nó được đặt trên đó.
Ví dụ: 3 thành phần thẻ sau đây có một tiêu đề và chân trang được căn chỉnh với các đầu trang và chân trang của thẻ liền kề, mặc dù mỗi thẻ có một lưới độc lập. Mẫu này hiệu quả vì mỗi thẻ là một mục trải dài ba hàng trong lưới mẹ, sau đó sử dụng lưới con để kế thừa các hàng đó vào thẻ.
Cũng được bao gồm
- Vùng chứa CSS (thuộc tính
contain) - Phần tử
<dialog> - Bảng điều khiển biểu mẫu
- Kiểu chữ và mã hoá: bao gồm
font-variant-alternates,font-variant-position, đơn vịicvà mã hoá văn bản CJK - Web Compat, trong đó tập trung vào sự khác biệt giữa các trình duyệt đã gây ra vấn đề về khả năng tương thích trang web ảnh hưởng đến người dùng cuối
Các khía cạnh sau đây đã có nhiều bước tiến trong dự án Compat 2021, nhưng vẫn còn khả năng cải thiện. Do đó, các vấn đề đó đã được đưa vào Interop 2022 để có thể giải quyết các vấn đề còn lại.
- Tỷ lệ khung hình
- Hộp linh hoạt
- Lưới
- Vị trí cố định
- Biến đổi
Nỗ lực điều tra
Ngoài 15 lĩnh vực trọng tâm, Interop 2022 còn có 3 hoạt động điều tra. Đây là những lĩnh vực có vấn đề và cần cải thiện, nhưng khi trạng thái hiện tại của thông số kỹ thuật hoặc kiểm thử chưa đủ tốt để có thể chấm điểm tiến độ bằng cách sử dụng kết quả kiểm thử:
- Chỉnh sửa,
contenteditablevàexecCommand - Sự kiện con trỏ và chuột
- Đo lường khung nhìn
Các nhà cung cấp trình duyệt và các bên liên quan khác sẽ cùng hợp tác nhằm cải thiện các thử nghiệm và thông số kỹ thuật cho những khía cạnh này để có thể đưa vào các phiên bản lặp lại trong tương lai.
Đo lường mức độ thành công và theo dõi tiến trình
Trang tổng quan web-platform-test hiện tại sẽ được dùng để theo dõi tiến trình trong 15 lĩnh vực trọng tâm. Một nhóm thử nghiệm đã được xác định cho mỗi lĩnh vực. Sau đó, các trình duyệt sẽ được tính điểm dựa trên các thử nghiệm này, cho điểm từng khía cạnh và điểm tổng thể cho tất cả 15 khu vực.
Để theo dõi và theo dõi tiến trình, hãy tham khảo trang tổng quan của Interop 2022. Trong năm nay, bạn có thể theo dõi và xem nền tảng mà bạn xây dựng đang cải thiện như thế nào.
Tất cả những điều này sẽ có ảnh hưởng gì đến nhà phát triển?
Mục tiêu của những nỗ lực tương tác trong nhiều năm này, dưới dạng Compat 2021, Interop 2022 và hơn thế nữa, là thừa nhận và giải quyết đầy đủ các điểm phiền hà mà các nhà phát triển đã trải qua trong nhiều năm. Và không phải là nỗ lực của một trình duyệt mà là sự cộng tác mạnh mẽ giữa tất cả các nhà cung cấp trình duyệt lớn và bạn bè nhằm cải thiện nền tảng web trên mọi mặt.
Thực chất, mục tiêu là làm cho nền tảng web trở nên hữu ích và đáng tin cậy hơn cho các nhà phát triển để họ có thể dành nhiều thời gian hơn trong việc xây dựng những trải nghiệm web tuyệt vời thay vì giải quyết các tính không nhất quán của trình duyệt.
Hãy chia sẻ với chúng tôi cảm nhận của bạn
Nếu bạn có ý kiến phản hồi về những điểm cải tiến trong Compat 2021 hoặc về bất kỳ tính năng nào có trong Interop 2022, chúng tôi rất muốn nghe ý kiến của bạn. Tính năng nào sau đây sẽ tạo ra sự khác biệt lớn nhất cho công việc của bạn? Bạn thực sự hào hứng về điều gì? Báo cáo vấn đề về kho lưu trữ GitHub hoặc cho chúng tôi biết trên Twitter.
Tìm hiểu thêm về Interop 2022 từ: