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 kỹ hơn và xem có gì 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 có trong Chrome 105. Các mẫu này cho phép nhà phát triển truy vấn bộ chọn mẹ để biết thông tin về kích thước và kiểu, giúp phần tử con có thể sở hữu logic định kiểu thích ứng, bất kể nằm ở đâu trên trang.

Chúng tương tự như truy vấn @media, ngoại trừ việc đánh giá dựa trên 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 phương tiện.

Để sử dụng các 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ẻ có hình ảnh và một vài văn bản.

Thẻ gồm hai cộ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 có kích thước nhỏ hơn 400px, vùng chứa sẽ chuyển sang bố cục một cột.

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

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

Ví dụ: p:has(span) cho biế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 gốc hoặc bất kỳ nội dung nào trong đoạn đó. Bạn cũng có thể sử dụng figure:has(figcaption) để tạo kiểu cho một phần tử hình có 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 và mạnh mẽ để biết nội dung giải thích chi tiết hơn và một số bản minh hoạ thú vị.

API Sanitizer

Hầu hết các ứng dụng web thường xử lý các chuỗi không đáng tin cậy nhưng việc kết xuất nội dung đó có thể khó khăn một cách an toàn. Nếu không cẩn thận, bạn rất dễ vô tình tạo ra các lỗ hổng bảo mật tập lệnh trên nhiều trang web.

Một số thư viện như DomPurify sẽ giúp ích cho bạn, nhưng sẽ làm phát sinh thêm gánh nặng bảo trì nhỏ. HTML Sanitizer API giúp giảm số lượng lỗ hổng bảo mật 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, 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ử 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 });

Sanitizer API được thiết kế để an toàn theo mặc định và có thể tuỳ chỉnh, cho phép bạn chỉ định nhiều tuỳ chọn cấu hình, ví dụ: bỏ 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 DOM an toàn bằng Sanitizer API để biết thêm 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 có thông báo về kế hoạch ngừng sử dụng Web SQL. Kể từ Chrome 105, Web SQL sẽ không được dùng trong các bối cảnh không an toàn nữa.

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 kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do 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á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ó sẵn. API này giúp PWA tạo 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ó bằng 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 của thanh tiêu đề.

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

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

Đăng ký

Để 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 các tính năng mới trong Chrome!