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.
Bản phát hành trình duyệt ổn định
Vào tháng 11, Firefox 107 và Chrome 108 đã trở nên ổ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ó thay đổi về cách hoạt động của Khung nhìn 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.
Hỗ trợ trình duyệt
Thuộc tính CSS viết tắt contain-intrinsic-size
được hỗ trợ trong Firefox 107, cùng với thuộc tính viết dà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ử trên giao diện người dùng tuân theo quy tắc chứa 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ủa phần tử đó. 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 cho trình duyệt biết để tránh ngắt dò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;
}
Việc bổ sung này là do tính năng hỗ trợ in bằng LayoutNG, mang đến trải nghiệm hiện đại, í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 một bản tóm tắt cho các luồng danh tính liên kết trên web. Phương thức này hiển thị một hộp thoại do trình duyệt dàn xếp, cho phép người dùng chọn tài khoản từ các nhà cung cấp dịch vụ nhận dạng để đăng nhập vào trang web. FedCM sẽ được cung cấp trong Chrome 108. Hãy tìm hiểu thêm về tính năng này trong bài đăng trên blog về thông báo về FedCM.
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 tính năng sẽ có trong phiên bản chính thức 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