Khi bước vào nửa cuối năm, đây là thời điểm thích hợp để xem xét cách Interop 2024 cải thiện khả năng tương tác trên web trong năm nay.
Bắt đầu từ đâu
Vào đầu năm, Chrome có điểm hỗ trợ trình duyệt thử nghiệm là 83.
Hiện tại, điểm số đó là 90, với điểm số cho các trình duyệt ổn định là 85 kể từ khi phát hành Chrome 126 vào tháng 6. Điểm số tổng thể về khả năng tương tác thử nghiệm đã tăng lên 10 điểm và bài đăng này chia sẻ một số tính năng đã góp phần vào điểm số đó.
Cửa sổ bật lên
Cửa sổ bật lên đã trở thành một phần của tính năng Mới có trong Baseline vào tháng 4 năm 2024. Cửa sổ bật lên rất thú vị vì có rất nhiều tính năng giao diện người dùng mà bạn cần xây dựng, chẳng hạn như trình đơn, chú giải công cụ, lớp phủ để lựa chọn và hướng dẫn giao diện người dùng. Đây là các loại cửa sổ bật lên. Trước khi có cửa sổ bật lên, việc tạo bất kỳ tính năng nào trong số này đều liên quan đến nhiều mã tuỳ chỉnh. Mã để đảm bảo không mở nhiều phần tử cùng một lúc hoặc để bật tính năng đóng nhẹ khi người dùng nhấp vào bên ngoài phần tử. Bạn cũng có thể gặp khó khăn với z-index
để đảm bảo một thành phần trên giao diện người dùng luôn nằm ở trên phần còn lại của giao diện.
Tất cả các tính năng này và nhiều tính năng khác đều có trong Popover API, giúp tiết kiệm thời gian phát triển và tạo ra các giao diện hiệu quả và dễ tiếp cận hơn. Ví dụ: mã sau đây tạo một cửa sổ bật lên có tính năng đóng nhẹ, tính năng này sẽ tự động đóng các cửa sổ bật lên khác khi mở.
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>
Tìm hiểu thêm trong bài viết Popover API ra mắt trong Baseline. Nhiều ứng dụng đã thấy được lợi ích của Popover. Tokopedia đã có thể giảm đáng kể lượng mã React bằng cách tận dụng tính năng này, sử dụng polyfill cho các trình duyệt không hỗ trợ.
Thuộc tính tuỳ chỉnh nâng cao bằng @property
Quy tắc CSS @property
cho phép bạn tạo các thuộc tính tuỳ chỉnh nâng cao, với nhiều thông tin chi tiết hơn so với tên và giá trị có trong các thuộc tính tuỳ chỉnh tiêu chuẩn.
Đặt cú pháp được phép để xác định loại dữ liệu mà thuộc tính này chứa, ví dụ: màu sắc, số hoặc độ dài. Sau đó, hãy đặt thuộc tính có kế thừa hay không và giá trị ban đầu.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Quy tắc @property
hiện cải thiện điểm thử nghiệm cho Firefox, giúp tăng điểm ổn định khi Firefox 128 ra mắt vào cuối tháng này. Báo cáo này cũng sẽ xuất hiện trong báo cáo Điểm chuẩn mới có.
Tìm hiểu thêm trong bài viết @property: trao siêu năng lực cho các biến CSS.
Thuộc tính font-size-adjust
Thuộc tính font-size-adjust
CSS cho phép bạn sửa đổi kích thước của chữ thường so với kích thước của chữ hoa. Điều này rất hữu ích trong trường hợp phông chữ dự phòng có thể xảy ra, vì nó giúp đảm bảo phông chữ dự phòng vẫn có thể đọc được, đặc biệt là ở kích thước phông chữ nhỏ.
Thuộc tính font-size-adjust
hiện được đưa vào điểm số thử nghiệm cho Chrome. Tuy nhiên, thuộc tính này sẽ làm tăng điểm số ổn định khi được phát hành cùng với Chrome 127 trong tháng này. Báo cáo này cũng sẽ xuất hiện trong phần Baseline Newly Available (Mới có trong Baseline).
text-wrap: balance
Việc sử dụng text-wrap: balance
sẽ hướng dẫn trình duyệt tìm ra cách ngắt dòng cân bằng nhất cho văn bản. Ví dụ: thuộc tính này đặc biệt hữu ích cho tiêu đề, ngăn tiêu đề được gói thành một từ duy nhất trên dòng hai.
Gần đây, Safari đã hỗ trợ tính năng này, trong khi các trình duyệt khác đang cố gắng khắc phục các bài kiểm thử không thành công để đảm bảo tính năng này hoạt động tốt trên tất cả trình duyệt.
Ngoài việc các tính năng chính này có thể tương tác với nhau, chúng tôi cũng đã cải tiến nhiều tính năng khác. Mỗi lần kiểm thử thành công đại diện cho một vấn đề về khả năng tương tác mà bạn sẽ không gặp phải. Chúng tôi rất mong được biết chúng ta có thể đạt được điểm số 100% đó vào cuối năm hay không.