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 8 năm 2022.
Bản phát hành trình duyệt ổn định
Vào tháng 8, Firefox 104, Chrome 104 và Chrome 105 đã trở nên ổn định.
Biến đổi riêng lẻ
Chrome 104 bao gồm các thuộc tính riêng lẻ cho Chuyển đổi CSS. Các thuộc tính là scale, rotate và translate mà bạn có thể dùng để xác định riêng từng phần của phép biến đổi.
Bằng cách làm như vậy, Chrome sẽ kết hợp với Firefox và Safari đã hỗ trợ các thuộc tính này.
Cú pháp truy vấn đa phương tiện mới
Chrome 104 cũng bao gồm cú pháp phạm vi truy vấn phương tiện. Tệp này đã được Firefox chuyển đi và giúp đơn giản hoá các truy vấn phương tiện. Ví dụ: truy vấn nội dung nghe nhìn sau đây:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Có thể được viết bằng toán tử so sánh:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Truy vấn vùng chứa
Chrome 105 là một bản phát hành thú vị mang đến tính năng truy vấn vùng chứa mà bạn đã chờ đợi từ lâu lên nền tảng web. Mặc dù truy vấn phương tiện cung cấp cho bạn cách truy vấn dựa trên kích thước của khung nhìn, truy vấn vùng chứa cung cấp phương thức truy vấn dựa trên kích thước của vùng chứa.
Để sử dụng các truy vấn vùng chứa, hãy bật tính năng vùng chứa bằng thuộc tính container-type.
.card-container {
container-type: inline-size;
}
Việc đặt container-type thành inline-size sẽ truy vấn kích thước theo hướng cùng dòng của thành phần mẹ. Trong các ngôn ngữ Latinh như tiếng Anh, đây sẽ là chiều rộng của thẻ, vì văn bản chạy cùng dòng từ trái sang phải.
Giờ đây, chúng ta có thể dùng vùng chứa đó để áp dụng kiểu cho bất kỳ phần tử con nào bằng cách sử dụng @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Bạn có thể tìm hiểu thêm về truy vấn vùng chứa trong bài đăng @container và :has(): hai API thích ứng mạnh mẽ mới ra mắt trong Chromium 105.
Lớp giả lập :has()
Bài đăng nêu trên cũng đề cập đến :has(). Lớp giả mới này Lớp giả CSS :has() cung cấp cho bạn cách nhắm mục tiêu phần tử mẹ và các phần tử đồng cấp dựa trên các điều kiện. Tìm hiểu thêm trong :has() bộ chọn gia đình.
API Sanitizer
Ngoài ra trong Chrome 105 là Sanitizer API. API này tích hợp quy trình dọn dẹp vào nền tảng để giúp loại bỏ các lỗ hổng bảo mật tập lệnh trên nhiều trang web.
Ngoài ra, trong Chrome 105 là lớp giả CSS :method. Điều này khớp với một phần tử đang ở trạng thái mà trong đó nó loại trừ tất cả hoạt động tương tác với các phần tử bên ngoài nó. Ví dụ: <dialog> được mở bằng API showModal().
Phương thức findLast() và findLastIndex()
Firefox 104 bổ sung tính năng hỗ trợ đằng sau cờ cho các phương thức Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() và TypedArray.prototype.findLastIndex(). Chúng được dùng để tìm giá trị và chỉ mục (tương ứng) của phần tử cuối cùng trong một hàm testArray hoặc Typed được cung cấp khớp với một hàm được cung cấp
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 ngay ngoài tháng, nên phiên bản beta mới duy nhất trong tháng 8 là Firefox 105, hiện chưa có nhiều thông tin chi tiết.
Phiên bản beta của Safari 16 được đề cập vào tháng 6 cũng vẫn đang tiếp tục hoạt động.
Một phần trong loạt video New to the web Series