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

Khám phá một số tính năng thú vị đã ra mắt trong các trình duyệt web phiên bản ổn định và thử nghiệm vào tháng 11 năm 2022.

Rachel Andrew

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

Vào tháng 11, Firefox 107 và Chrome 108 đã bắt đầu hoạt động ổn định. Hãy cùng xem điều này có ý nghĩa gì đối với nền tảng web.

Thay đổi về hành vi của Khung nhìn bố cục trong Chrome trên Android

Có một sự thay đổi về cách hoạt động của Chế độ xem bố cục từ Chrome 108 trên Android khi bàn phím ảo hiển thị. Hãy đọc bài viết Chuẩn bị cho các thay đổi về hành vi đổi kích thước khung nhìn sắp ra mắt trên Chrome cho Android để tìm hiểu thêm.

Đơn vị khung nhìn mới

Ngoài ra, Chrome 108 còn có các Đơn vị khung nhìn CSS mới. Các đơn vị này bao gồm đơn vị nhỏ (svw, svh, svi, svb, svmin, svmax), đơn vị lớn (lvw, lvh, lvi, lvb, lvmin, lvmax), đơn vị động (dvw, dvh, dvi, dvb, dvmin, dvmax) và đơn vị logic (vi, vb). Các đơn vị này đã được triển khai trong Firefox và Safari, nghĩa là chúng ta hiện có khả năng tương tác trên 3 công cụ trình duyệt chính cho các đơn vị này.

Đọc bài viết Các đơn vị khung nhìn lớn, nhỏ và linh động.

Thuộc tính CSS viết tắt contain-intrinsic-size được hỗ trợ trong Firefox 107, cùng với contain-intrinsic-width, contain-intrinsic-height và các thuộc tính logic contain-intrinsic-block-size và contain-intrinsic-inline-size.

Các thuộc tính này được áp dụng để chỉ định kích thước của một phần tử giao diện người dùng tuân theo giới hạn kích thước. Điều này cho phép tác nhân người dùng xác định kích thước của một phần tử mà không cần hiển thị các phần tử con. Các thuộc tính này hữu ích khi một phần tử phải tuân theo quy tắc chứa kích thước.

Hỗ trợ từ khoá avoid phân mảnh CSS

Chrome 108 hỗ trợ giá trị avoid của các thuộc tính phân mảnh CSS break-before, break-after và break-inside khi in. Giá trị này yêu cầu trình duyệt tránh bị hỏng trước, sau hoặc bên trong phần tử được áp dụng. Ví dụ: CSS sau đây giúp tránh việc một hình bị ngắt ở dấu ngắt trang.

figure {
    break-inside: avoid;
}

Nhờ có thêm tính năng hỗ trợ in bằng LayoutNG, nên bạn sẽ được trải nghiệm hiện đại và ít lỗi hơn. Tìm hiểu thêm về LayoutNG.

Federated Credential Management API

API Quản lý thông tin xác thực liên kết (FedCM) cung cấp bản tóm tắt cho quy trình nhận dạng liên kết trên web. Chiến dịch này sẽ hiển thị hộp thoại dàn xếp về trình duyệt, cho phép người dùng chọn tài khoản trong danh sách nhà cung cấp để đăng nhập vào các trang web. FedCM đã có phiên bản Chrome 108. Hãy tìm hiểu thêm về điều này trong bài đăng trên blog về thông báo của FedCM.

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

Phiên bản trình duyệt beta cho phép bạn xem trước những tính năng sẽ có trong phiên bản ổn định tiếp theo của trình duyệt. Đây là thời điểm thích hợp để thử nghiệm các tính năng mới hoặc các nội dung bị xoá có thể ảnh hưởng đến trang web của bạn trước khi chúng tôi phát hành bản cập nhật đó trên toàn cầu. Do ngày phát hành, bản beta mới duy nhất trong tháng này là Firefox 108, trong khi Safari 16.2 beta vẫn đang tiếp tục.

Firefox 108 hỗ trợ các thuộc tính height và width cho phần tử <source>, khi phần tử này là phần tử con của phần tử <picture>. Các thuộc tính này chấp nhận chiều cao hoặc chiều rộng của hình ảnh, tính bằng pixel, dưới dạng số nguyên không có đơn vị.

Firefox đang triển khai các truy vấn vùng chứa. Sau cờ layout.css.container-queries.enabled trong Firefox 108 beta, bạn sẽ thấy các đơn vị chiều dài truy vấn vùng chứa – cqw, cqh, cqi, cqb, cqmin, cqmax. Đây là các đơn vị chiều dài tương ứng với kích thước của vùng chứa truy vấn.

Một phần của chương trình Mới làm quen với web