Bản cập nhật giữa năm về khả năng tương tác của năm 2024

Rachel Andrew

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.

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.