Đ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 trong các trình duyệt web phiên bản ổn định và beta trong tháng 8 năm 2022.

Vào tháng 8, Firefox 104, Chrome 104Chrome 105 đã trở nên ổn định.

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, rotatetranslate. 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

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

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 đã triển khai 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

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Nguồn

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 đượ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

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

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 hướng nội tuyến 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.

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 mạnh mẽ 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

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

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. Điều này sẽ so khớp với một phần tử ở trạng thái loại trừ mọi hoạt động tương tác với các phần tử bên ngoài. Ví dụ: <dialog> được mở bằng API showModal().

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

Nguồn

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

Firefox 104 thêm tính năng hỗ trợ sau một cờ cho các phương thức Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast()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

  • Chrome: 97.
  • Edge: 97.
  • Firefox: 104.
  • Safari: 15.4.

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 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 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