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 hợp tác để giải quyết các vấn đề hàng đầu về tính tương thích của các trình duyệt mà các nhà phát triển web đã xác định được. Khả năng tương tác 2022 sẽ cải thiện trải nghiệm phát triển web theo 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 đạt được mục tiêu này, dự án tập trung vào điều gì, cách đo lường mức độ thành công và cách theo dõi tiến độ.
Tất cả bắt đầu từ năm 2019
Năm 2019, Mozilla, Google và những công ty khác đã bắt đầu nỗ lực lớn nhằm tìm hiểu các vấn đề khó khăn, dưới dạng khảo sát Đánh giá nhu cầu của nhà phát triển MDN 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 cho các nhà phát triển liên quan đến nền tảng web, đồng thời góp phần thúc đẩy nỗ lực triển khai Compat năm 2021.
Ngoài ra, Compat 2021 đã 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 12% và tăng trưởng ổn định) và CSS flexbox (mức sử dụng 77%), bao gồm cả thuộc tính gap trong flexbox, giải quyết một điểm phiền hà hàng đầu cho nhà phát triển khi áp dụng phương pháp bố cục mới.
Chúng tôi rất vui mừng đạt được điểm số hơn 90% trên tất cả các lượt triển khai vào cuối năm 2021!
Khả năng tương tác 2022 là gì?
Interop 2022 là một điểm chuẩn mà đại diện của 3 phương pháp triển khai trình duyệt chính thống nhất, được phát triển thông qua quá trình đề cử công khai và xem xét dựa trên thông tin của những người ủng hộ Apple, Bocoup, Google, Igalia, Microsoft và Mozilla.
Điểm chuẩn tập trung vào 15 khía cạnh (được các nhà phát triển xác định là đặc biệt rắc rối khi bị thiếu hoặc có vấn đề về khả năng tương thích trên nhiều trình duyệt. Tất cả nhà cung cấp trình duyệt đã đồng ý tập trung vào các lĩnh vực này và tất cả mọi người liên quan đều háo hức bắt đầu làm cho trải nghiệm phát triển cho web tốt hơn đáng kể.
15 khía cạnh trọng tâm
Các tính năng sau đây sẽ là trọng tâm của Khả năng tương tác 2022. Các bản cập nhật này bao gồm 10 khu vực mới, cộng với 5 khu vực được chuyển sang từ phiên bản Compat năm 2021. Các lĩnh vực trọng tâm mới là:
Lớp tầng
Lớp tầng mang lại 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 bộ chọn thành các lớp, mỗi lớp có đặc điểm riêng. Điều này có nghĩa là bạn không cần phải cẩn thận khi dùng bộ chọn đơn đặt hàng hoặc tạo các bộ chọn thật cụ thể để thay thế các quy tắc CSS cơ sở.
Hệ 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() cho các giá trị HSL. Các hàm màu được tích hợp vào CSS có nghĩa là màu có thể được cập nhật một cách linh động, và hệ màu mới loại bỏ hạn chế đối với gam màu sRGB cũng như các giới hạn cảm nhận của HSL.
Có hai chức năng được xác định trong CSS Màu cấp 5 cho phép tuỳ chỉnh giao diện linh hoạt hơn trên nền tảng web:
color-mix(): Nhận hai màu và trả về kết quả khi kết hợp các màu đó trong một hệ màu cụ thể theo một lượng màu nhất định.color-contrast(): Chọn trong danh sách màu có 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ợ không gian màu mở rộng (LAB, LCH và P3) và ngoài HSL và sRGB, chúng mặc định sử dụng hệ màu đồng nhất LCH.
Đơn vị khung nhìn mới
Những khó khăn liên quan đến việc định kích thước khung nhìn nổi bật trong cả Báo cáo về khả năng tương thích với trình duyệt MDN năm 2020 và bài khảo sát mới về Tình trạng 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 lớn nhất, nhỏ nhất và động, lv*, sv* và dv*. Các đơn vị này sẽ giúp tạo bố cục lấp đầy khung nhìn hiển thị trên thiết bị di động dễ dàng hơn trong khi vẫn tính đến thanh địa chỉ.
Ngoài ra, nhóm hỗ trợ nhiều nhà cung cấp phía sau Interop 2022 sẽ cùng nhau nghiên cứu và cải thiện khả năng 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 cuộn năm 2021 xác nhận rằng các tính năng cuộn và khả năng tương thích với tính năng cuộn rất khó triển khai, đồng thời có nhiều khía cạnh cần cải thiện. Chúng ta sẽ tập trung vào hành vi cuộn nhanh, scroll-behavior và hành vi cuộn quá mức để 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 khám phá các đề xuất mới về tính năng di chuyển nút chụp nhanh.
Lưới phụ
Giá trị subgrid của grid-template-columns và grid-template-rows có nghĩa là một mục trong lưới đã được áp dụng display: grid có thể kế thừa định nghĩa theo dõi từ phần lưới mẹ đặt trên đó.
Ví dụ: 3 thành phần thẻ sau đây có đầu trang và chân trang được căn chỉnh với đầu trang và chân trang của thẻ liền kề, mặc dù mỗi thẻ đều có một lưới độc lập. Mẫu này hoạt động vì mỗi thẻ là một mục trải dài 3 hàng của lưới mẹ, sau đó sử dụng lưới con để kế thừa những 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> - Thao tác đ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, 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 của trang web ảnh hưởng đến người dùng cuối
Các khía cạnh sau đây đã có tiến bộ vượt bậc thông qua dự án Compat 2021, nhưng vẫn còn khả năng cải thiện. Do đó, các bản cập nhật này đã đượ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
- Flexbox
- 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 khía cạnh 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 thử nghiệm chưa đủ tốt để có thể ghi điểm tiến trình bằng kết quả thử nghiệm:
- 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ẽ hợp tác để cải thiện các thử nghiệm và thông số kỹ thuật cho các lĩnh vực này, để họ có thể được đưa vào vòng lặp nỗ lực này 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 hiện có về kiểm thử trên nền tảng web sẽ được dùng để theo dõi tiến trình trong 15 khía cạnh trọng tâm. Chúng tôi đã xác định một nhóm thử nghiệm cho mỗi lĩnh vực. Sau đó, trình duyệt được chấm điểm dựa trên các bài kiểm tra này, cho đó điểm cho từng phần và tổng điểm cho tất cả 15 khu vực.
Để nắm bắt và theo dõi tiến trình, hãy tham khảo Trang tổng quan về khả năng tương tác năm 2022. Trong suốt 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ó ý nghĩa gì đối với nhà phát triển?
Mục tiêu của những nỗ lực về khả năng tương tác trong nhiều năm này (dưới dạng Compat 2021, Interop 2022 và nhiều tính năng khác) là công nhận và giải quyết hoàn toàn những khó khăn mà các nhà phát triển gặp phải trong nhiều năm qua. Và đó không phải là nỗ lực chỉ trên một trình duyệt mà là sự cộng tác mạnh mẽ giữa tất cả nhà cung cấp trình duyệt chính và bạn bè nhằm cải thiện nền tảng web trên toàn diện.
Về bản chất, mục tiêu là làm cho nền tảng web trở nên hữu dụng và đáng tin cậy hơn đối với nhà phát triển để họ có thể dành nhiều thời gian hơn vào việc xây dựng những trải nghiệm web tuyệt vời thay vì phải tìm cách giải quyết những điểm không thống nhất của trình duyệt.
Hãy cho chúng tôi biết suy nghĩ 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 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 nhất đối với tác phẩm 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ề khả năng tương tác 2022 qua: