Tính năng mới trong Chrome 105

Pete LePage

Dưới đây là những gì bạn cần phải biết:

Tôi là Pete LePage. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 105.

Truy vấn vùng chứa và thuộc tính CSS :has()

Truy vấn vùng chứa, một trong những tính năng được yêu cầu nhiều nhất hiện đang có mặt trong Chrome 105. Chúng cho phép nhà phát triển truy vấn bộ chọn mẹ để biết kích thước và thông tin định kiểu, giúp phần tử con có thể sở hữu logic tạo kiểu thích ứng, bất kể phần tử đó nằm ở đâu trên trang.

Các truy vấn này tương tự như truy vấn @media, ngoại trừ việc chúng đánh giá theo kích thước của vùng chứa thay vì kích thước của khung nhìn.

Truy vấn vùng chứa so với truy vấn nội dung nghe nhìn.

Để sử dụng truy vấn vùng chứa, bạn cần đặt vùng chứa trên phần tử mẹ. Ví dụ: bạn có thể có một thẻ chứa hình ảnh và một số văn bản.

Thẻ hai cột duy nhất.

Để tạo truy vấn vùng chứa, hãy đặt container-type trên vùng chứa thẻ. Việc đặt container-type thành inline-size sẽ truy vấn kích thước inline-direction của thành phần mẹ.

.card-container {
  container-type: inline-size;
}

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

Trong trường hợp này, khi vùng chứa nhỏ hơn 400px, vùng chứa sẽ chuyển sang một bố cục cột duy nhất.

Lớp giả :has() của CSS

Chúng ta có thể tiến xa hơn bằng lớp giả :has() CSS. Hàm này cho phép bạn kiểm tra xem phần tử mẹ có chứa phần tử con có tham số cụ thể hay không.

Ví dụ: p:has(span) biểu thị một bộ chọn đoạn có span bên trong. Bạn có thể sử dụng thuộc tính này để tạo kiểu cho chính đoạn văn bản mẹ hoặc bất kỳ nội dung nào trong đoạn văn bản đó. Hoặc bạn có thể sử dụng figure:has(figcaption) để tạo kiểu cho phần tử hình ảnh chứa chú thích.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Hãy xem bài viết của Una @container và :has(): hai API thích ứng mới mạnh mẽ để biết thêm thông tin giải thích chi tiết và một số bản minh hoạ thú vị.

API Sanitizer

Hầu hết các ứng dụng web thường xuyên xử lý các chuỗi không đáng tin cậy, nhưng việc hiển thị nội dung đó một cách an toàn có thể sẽ gặp khó khăn. Nếu không cẩn thận, bạn có thể vô tình tạo cơ hội cho các lỗ hổng tập lệnh trên nhiều trang web.

Có các thư viện như DomPurify có thể giúp ích, nhưng lại gây thêm một chút gánh nặng bảo trì. API Trình dọn dẹp HTML giúp giảm số lượng lỗ hổng tập lệnh trên nhiều trang web bằng cách tích hợp tính năng dọn dẹp vào nền tảng.

Để sử dụng công cụ này, hãy tạo một thực thể mới của Sanitizer. Sau đó, hãy gọi setHTML() trên phần tử mà bạn muốn chèn nội dung đã được dọn dẹp.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

Theo mặc định, API Trình dọn dẹp được thiết kế để an toàn và có thể tuỳ chỉnh, cho phép bạn chỉ định các tuỳ chọn cấu hình khác nhau, chẳng hạn như xoá một số phần tử nhất định hoặc cho phép các phần tử khác.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Hãy xem bài viết Thao tác an toàn với DOM bằng API Trình dọn dẹp để biết thêm thông tin chi tiết.

Ngừng sử dụng Web SQL cho các bối cảnh không an toàn

Cách đây một thời gian, chúng tôi đã thông báo kế hoạch ngừng sử dụng Web SQL. Kể từ Chrome 105, Web SQL sẽ không được dùng nữa trong các ngữ cảnh không an toàn.

Nếu đang sử dụng Web SQL trong ngữ cảnh không an toàn, bạn nên di chuyển sang IndexDB hoặc một vùng chứa lưu trữ cục bộ khác càng sớm càng tốt.

Và nhiều tính năng khác!

Tất nhiên còn nhiều tính năng khác.

  • Giờ đây, bạn có thể cập nhật tên của một PWA đã cài đặt trên cả máy tính và thiết bị di động bằng cách cập nhật tệp kê khai ứng dụng web.
  • API vị trí cửa sổ nhiều màn hình nhận được nhãn tên màn hình chính xác.
  • API lớp phủ điều khiển cửa sổ hiện đã có. Tính năng này cho phép PWA mang lại cảm giác giống ứng dụng hơn bằng cách hoán đổi thanh tiêu đề có chiều rộng đầy đủ hiện có cho một lớp phủ nhỏ. Điều này cho phép bạn đặt nội dung tuỳ chỉnh trong khu vực thanh tiêu đề.

Tài liệu đọc thêm

Bài viết này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm về các thay đổi trong Chrome 105.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage. Ngay sau khi Chrome 106 được phát hành, chúng tôi sẽ sẵn sàng cho bạn biết những tính năng mới trong Chrome!