Hãy khám phá một số tính năng thú vị có trên trình duyệt web ổn định và phiên bản thử nghiệm trong 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 đối với hành vi của khung nhìn bố cục trong Chrome trên Android
Có một thay đổi về cách hoạt động của Layout Viewport 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 những thay đổi về hành vi đổi kích thước khung nhìn sắp có trên Chrome trên Android để tìm hiểu thêm.
Đơn vị khung nhìn mới
Chrome 108 cũng có các Đơn vị khung nhìn CSS mới. Các chiến dịch này bao gồm các đơn vị nhỏ (svw, svh, svi, svb, svmin, svmax), lớn (lvw, lvh, lvi, lvb, lvmin, lvmax), độ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, có nghĩa là giờ đây chúng tôi có khả năng tương tác trên ba công cụ trình duyệt chính cho các đơn vị này.
Hãy đọc Các đơn vị khung nhìn lớn, nhỏ và động.
Hỗ trợ trình duyệt
- 108
- 108
- 101
- 15,4
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à thuộc tính logic contain-intrinsic-block-size cũng như contain-intrinsic-inline-size.
Giá trị 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 có thể được dùng để 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 kết xuất các phần tử con. Chúng hữu ích khi một phần tử phải tuân theo vùng 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 phá vỡ trước, sau hoặc bên trong phần tử được áp dụng. Ví dụ: CSS sau đây giúp bạn tránh được một con số bị hỏng tại một dấu ngắt trang.
figure {
break-inside: avoid;
}
Nhờ có sự hỗ trợ in bằng LayoutNG, điều này mang lại một trải nghiệm hiện đại và ít lỗi hơn. Tìm hiểu thêm về LayoutNG.
API quản lý thông tin xác thực Federated
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 các quy trình nhận dạng được liên kết trên web. Phương thức này sẽ hiển thị một hộp thoại được dàn xếp trên 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 trang web. FedCM đang vận chuyển trong Chrome 108, tìm hiểu thêm về điều này trong bài đăng trên blog thông báo về 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 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 thích hợp để thử nghiệm các tính năng mới hoặc xoá bỏ những tính năng có thể ảnh hưởng đến trang web của bạn trước khi toàn thế giới ra mắt bản phát hành đó. Do ngày phát hành rơi vào ngày phát hành, phiên bản beta mới duy nhất trong tháng này là Firefox 108, với 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 một số nguyên không có đơn vị.
Truy vấn vùng chứa đang được triển khai trên Firefox. Phía sau cờ layout.css.container-queries.enabled trong Firefox 108 beta, bạn sẽ thấy các đơn vị độ dài truy vấn vùng chứa — cqw, cqh, cqi, cqb, cqmin, cqmax. Đây là những đơn vị độ dài tương ứng với kích thước của vùng chứa truy vấn.
Một phần trong loạt video New to the web Series