Trang này được dịch bởi Cloud Translation API.

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

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

Rachel Andrew

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 phép biến đổi CSS. Các thuộc tính này là scale, rotate và translate. Bạn có thể sử dụng các thuộc tính này để xác định riêng từng phần của phép biến đổi.

Bằng cách đó, Chrome sẽ gia nhập Firefox và Safari vốn đã hỗ trợ các thuộc tính này.

Hỗ trợ trình duyệt

Nguồn

Cú pháp truy vấn nội dung nghe nhìn mới

Chrome 104 cũng bao gồm cú pháp phạm vi truy vấn nội dung nghe nhìn. Firefox đã phát hành tính năng này và giúp đơn giản hoá các truy vấn nội dung nghe nhìn. Ví dụ: truy vấn nội dung nghe nhìn sau:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Có thể viết bằng toán tử so sánh:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Hỗ trợ trình duyệt

Nguồn

Cụm từ tìm kiếm về 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 được chờ đợi từ lâu cho nền tảng web. Mặc dù truy vấn nội dung đa phương tiện cung cấp cho bạn một cách để truy vấn theo kích thước của khung nhìn, nhưng truy vấn vùng chứa cung cấp một phương thức truy vấn theo kích thước của vùng chứa.

Hỗ trợ trình duyệt

Nguồn

Để sử dụng truy vấn vùng chứa, hãy bật tính nă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 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 nội tuyến từ trái sang phải.

Bây giờ, chúng ta có thể sử dụng vùng chứa đó để áp dụng kiểu cho bất kỳ phần tử con nào bằ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ới và hiệu quả hạ cánh trong Chromium 105.

Lớp giả lập mẹ :has()

Bài đăng được đề cập ở trên cũng đề cập đến :has(). Lớp giả lập mới này Lớp giả lập CSS :has() giúp bạn nhắm đến 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 phần :has() bộ chọn gia đình.

Hỗ trợ trình duyệt

Nguồn

API Trình dọn dẹp

Ngoài ra, Chrome 105 còn có Sanitizer API. API này tích hợp tính năng dọn dẹp vào nền tảng để giúp loại bỏ các lỗ hổng tập lệnh trên nhiều trang web.

Ngoài ra, Chrome 105 còn có lớp giả lập CSS :modal. Tham số này khớp với một phần tử đang ở trạng thái mà nó loại trừ tất cả 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().

Hỗ trợ trình duyệt

Nguồn

Phương thức findLast() và findLastIndex()

Firefox 104 bổ sung tính năng hỗ trợ cho một cờ cho các phương thức Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() và TypedArray.prototype.findLastIndex(). Các phương thức này đượ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 Mảng hoặc TypedArray khớp với một hàm kiểm thử được cung cấp.

Hỗ trợ trình duyệt

Nguồn

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 yêu cầu xoá có thể ảnh hưởng đến trang web của bạn trước khi toàn cầu nhận được bản phát hành đó.

Do ngày phát hành nằm ngoài tháng 8, nên bản thử nghiệm beta mới duy nhất trong tháng này là Firefox 105. Hiện tại, bản phát hành này chưa có nhiều thông tin chi tiết.

Bản thử nghiệm Safari 16 được đề cập vào tháng 6 cũng vẫn đang diễn ra.

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