Khi bước vào nửa cuối năm, đây là thời điểm tuyệt vời để tìm hiểu xem Khả năng tương tác trên web trong năm nay đã được cải thiện bằng khả năng tương tác 2024.
Nơi chúng tôi bắt đầu
Vào đầu năm, Chrome có điểm số hỗ trợ trình duyệt thử nghiệm là 83.
![Trang tổng quan có điểm số-Interop: 65, Điều tra: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Bản xem trước công nghệ Safari: 79.](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=vi)
![Trang tổng quan có điểm số-Interop: 75, Điều tra: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Bản xem trước công nghệ Safari: 88.](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=vi)
Hôm nay, điểm số đó là 90, với điểm số cho các trình duyệt ổn định là 85 tính đến bản phát hành Chrome 126 vào tháng 6. Tổng điểm khả năng tương tác thử nghiệm đã tăng 10 điểm. Bài đăng này chia sẻ một số tính năng đã góp phần đ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 chương trình Baseline mới ra mắt vào tháng 4 năm 2024. Cửa sổ bật lên là
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, ví dụ:
trình đơn, chú thích, lớp phủ để chọn và giao diện người dùng giảng dạy—là các loại
cửa sổ bật lên. Trước khi 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ã để đảm bảo nhiều phần tử không mở cùng một lúc hoặc để bật
đóng nhanh khi người dùng nhấp vào bên ngoài phần tử. Bạn cũng có thể phải
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 vượt qua các phần tử còn lại
giao diện.
Tất cả những tính năng này và nhiều tính năng khác có trong API Cửa sổ bật lên, giúp tiết kiệm thời gian phát triển cũng như giúp tạo ra nhiều giao diện hiệu quả và dễ truy cập hơn. Cho ví dụ: mã sau đây tạo ra một cửa sổ bật lên có tính năng đóng đèn, do đó 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 truy cập vào Baseline. Nhiều các ứng dụng khác đã thấy được các lợi ích của Cửa sổ bật lên. Tokopedia đã 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 đoạn mã polyfill cho các trình duyệt không hỗ trợ.
Thuộc tính tuỳ chỉnh nâng cao với @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
chi tiết hơn tên và giá trị có sẵn trong thuộc tính tuỳ chỉnh chuẩn.
Đặt cú pháp được phép để xác định loại dữ liệu mà thuộc tính này lưu giữ
ví dụ như màu, số hoặc độ dài. Sau đó, đặt giá trị cho thuộc tính
kế thừa và một giá trị ban đầu.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Quy tắc @property
hiện đang cải thiện điểm số thử nghiệm cho Firefox,
nâng cao điểm số ổn định khi Firefox 128 được giao vào cuối tháng này. Chiến dịch này cũng tham gia
Đường cơ sở mới ra mắt.
Tìm hiểu thêm trong @property: cung cấp siêu năng lực cho các biến CSS.
Thuộc tính font-size-adjust
Thuộc tính CSS font-size-adjust
cho phép bạn sửa đổi kích thước của chữ thường
tương ứng với kích thước của chữ hoa. Điều này hữu ích trong các trường hợp
vị trí dự phòng phông chữ có thể xảy ra, vì điều này giúp đảm bảo phông chữ dự phòng vẫn
dễ đọc, đặc biệt là ở cỡ chữ nhỏ.
Tài sản font-size-adjust
hiện có trong điểm thử nghiệm
cho Chrome. Tuy nhiên, tính năng này sẽ tăng điểm số ổn định khi được phát hành bằng
Chrome 127 tháng này. Nền tảng này cũng tham gia chương trình Baseline Newly Available.
text-wrap: số dư
Việc sử dụng text-wrap: balance
sẽ hướng dẫn trình duyệt tìm ra tỷ lệ cân bằng tốt nhất
xuống dòng tự động cho văn bản. Điều này đặc biệt hữu ích cho tiêu đề, ngăn chặn
tiêu đề gói vào một từ duy nhất trên dòng 2.
Safari gần đây đã hỗ trợ tính năng này và các trình duyệt khác đang nỗ lực khắc phục không thể kiểm thử để đảm bảo tính năng này hoạt động tốt trên tất cả các trình duyệt.
Ngoài các tính năng chính này có thể tương tác, nhiều tính năng khác đã được cải tiến. Mỗi lượt kiểm thử vượt qua về khả năng tương tác mà bạn sẽ không gặp phải. Chúng tôi rất muốn biết mức độ đạt được có thể đạt được điểm số 100% đó vào cuối năm.