Điểm mới trên nền tảng web vào tháng 1

Hãy khám phá một số tính năng thú vị đã xuất hiện trên trình duyệt web ổn định và thử nghiệm trong tháng 1 năm 2024.

Rachel Andrew

Bản phát hành trình duyệt ổn định

Vào tháng 1 năm 2024, Firefox 122, Chrome 121 và Safari 17.3 đã trở nên ổn định. Bài đăng này đề cập đến các tính năng mới được thêm vào nền tảng web.

<hr> tại <select>

Firefox 122 thêm các phần tử <hr> làm phần tử con được phép của các phần tử <select>. Điều này giúp danh sách được chọn có nhiều tuỳ chọn trở nên dễ đọc. Tất cả công cụ trình duyệt chính hiện đều hỗ trợ tính năng này. Tuy nhiên, đáng lưu ý là hiện không có trình duyệt nào hiển thị <hr> cho cây hỗ trợ tiếp cận.

HTMLSelectElement.showPicker

Ngoài ra, đối với các phần tử <select> trong Firefox là phương thức showPicker() cho HTMLSelectElement. Đây cũng là bộ chọn thường hiển thị khi phần tử được chọn, nhưng có thể được kích hoạt sau khi nhấn nút hoặc hoạt động tương tác khác của người dùng.

API Thời gian hiển thị nội dung lớn nhất (LCP)

Firefox 122 cũng hỗ trợ API LCP. API hiệu suất này cung cấp thông tin về thời gian liên quan đến thời gian hiển thị hình ảnh hoặc văn bản lớn nhất trước khi người dùng tương tác với một trang web. Tìm hiểu thêm về LCP trong tài liệu về LCP.

Thuộc tính thanh cuộn của CSS

Chrome 121 hỗ trợ thêm cho các thuộc tính thanh cuộn scrollbar-color và scrollbar-width. Tìm hiểu thêm về điều này trong bài viết Tạo kiểu Thanh cuộn.

Ảnh động CSS font-palette

Thuộc tính font-palette cho phép bạn chọn một bảng màu cụ thể để kết xuất phông chữ màu. Thuộc tính này hiện hỗ trợ ảnh động, vì vậy, việc chuyển đổi giữa các bảng khung hiển thị sẽ trở nên mượt mà hơn giữa 2 bảng màu đã chọn.

Phương thức transfer() và transferToFixedLength() của ArrayBuffer

Firefox bao gồm các phương thức JavaScript transfer() và transferToFixedLength() của ArrayBuffer. Phương thức transfer() tạo một ArrayBuffer mới có cùng nội dung byte như ArrayBuffer hiện tại, sau đó tách ArrayBuffer ban đầu. Phương thức transferToFixedLength() hoạt động theo cách tương tự, nhưng tạo ra một ArrayBuffer có kích thước cố định.

Nội dung cập nhật về Speculation Rules API (API Quy tắc suy đoán)

Các trang web sử dụng API quy tắc suy đoán để cho Chrome biết trang nào sẽ kết xuất trước theo phương thức lập trình, qua đó tạo ra trải nghiệm người dùng tốt hơn bằng cách giảm thời gian điều hướng trên trang.

Chrome 121 hỗ trợ các quy tắc tài liệu: đây là phần mở rộng cho cú pháp của các quy tắc suy đoán cho phép trình duyệt lấy danh sách các URL để tải theo suy đoán từ các phần tử trong một trang. Quy tắc cho tài liệu có thể bao gồm các tiêu chí để dùng đường liên kết nào trong số này. Tính năng này cùng với trường "eagerness" mới cho phép bạn tự động tìm nạp trước hoặc kết xuất trước các đường liên kết trên trang ngay lập tức, khi di chuột hoặc khi di chuột xuống.

Bản phát hành trình duyệt beta

Các phiên bản trình duyệt beta cho bạn xem trước những nội dung sẽ có trong phiên bản ổn định tiếp theo của trình duyệt. Đây là thời điểm tuyệt vời để thử nghiệm hoặc xoá bỏ những tính năng mới có thể ảnh hưởng đến trang web của bạn trước khi cả thế giới nhận được bản phát hành đó. Các phiên bản thử nghiệm mới là Firefox 123, Chrome 122 và Safari 17.4. Các bản phát hành này mang đến nhiều tính năng tuyệt vời cho nền tảng. Hãy xem ghi chú phát hành để biết toàn bộ thông tin chi tiết. Dưới đây chỉ là một vài điểm nổi bật.

Firefox 123 phiên bản beta bao gồm Declarative Shadow DOM.

Firefox 123 cũng hỗ trợ mã trạng thái phản hồi thông tin HTTP 103 Early Hints để tải trước các tài nguyên mà trang có thể cần trong khi máy chủ chuẩn bị phản hồi đầy đủ.

Có rất nhiều nội dung hay trong Safari 17.4 beta. Đối với CSS, chúng tôi hỗ trợ @scope, align-content trên các vùng chứa khối và ô trong bảng, cũng như cho các phần tử giả ::grammar-error và ::spelling-error cùng nhiều phần tử khác.

Trong biểu mẫu, hãy hỗ trợ chế độ ghi dọc trong các tuỳ chọn điều khiển biểu mẫu, phương thức showPicker() cho <input type="date"> và hỗ trợ <hr> bên trong <select> trên iOS.

JavaScript cũng có một số tính năng mới có hỗ trợ các phương thức detached(), transfer() và transferToFixedLength() của ArrayBuffer cùng nhiều tính năng khác.

Chrome 122 beta có một tuỳ chọn unsanitized trong phương thức read() của API Bảng nhớ tạm không đồng bộ để truy xuất định dạng HTML chưa được dọn dẹp. Đối với JavaScript, có các trình trợ giúp biến lặp mới và các phương thức mới cho lớp Set tích hợp sẵn.

Ngoài ra, trong Chrome 122 còn có API Bộ chứa lưu trữ nhằm giúp việc giải phóng bộ nhớ liên tục chịu áp lực nặng nề về bộ nhớ dễ dự đoán hơn.