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. Chúng ta hãy cùng tìm hiểu sâu hơn xem các 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()

Cụm từ tìm kiếm về vùng chứa, một trong những tính năng được yêu cầu nhiều nhất đang truy cập vào Chrome 105. Chúng cho phép nhà phát triển truy vấn bộ chọn gốc về kích thước và thông tin định kiểu, giúp phần tử con có thể sở hữu logic định kiểu thích ứng, bất kể mã đó 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á dựa trên kích thước của một 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 một phần tử mẹ. Ví dụ: bạn có thể có thẻ có 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 inline-direction kích thước của phần tử mẹ.

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

Giờ đây, chúng ta có thể dùng vùng chứa đó để áp dụng các 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, nó sẽ chuyển sang bố cục một cột.

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

Chúng ta có thể tiến thêm một bước nữa với lớp giả :has() của CSS. Nó cho phép bạn kiểm tra xem một phần tử mẹ có chứa phần tử con với tham số.

Ví dụ: p:has(span) cho biết bộ chọn đoạn có span bên trong nội dung. Bạn có thể dùng hàm này để tạo kiểu cho đoạn mẹ hoặc bất kỳ nội dung nào bên trong đó. Hoặc bạn 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 */
}

Xem bài viết của Una @container và :has(): 2 API thích ứng mới và hiệu quả để được giải thích chi tiết hơn và một số 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 kết xuất chuỗi đó một cách an toàn có thể phức tạp. Nếu không chăm sóc kỹ lưỡng, bạn rất dễ vô tình tạo cơ hội cho lỗ hổng tập lệnh trên nhiều trang web.

Có các thư viện như DomPurify hữu ích, nhưng hãy thêm một gánh nặng bảo trì. 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 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 mà bạn muốn chèn nội dung đã dọn dẹp vào đó.

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

Sanitizer API được thiết kế để đảm bảo an toàn theo mặc định 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, ví dụ: xoá một số yếu tố nhất định hoặc cho phép các yếu 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);

Xem thao tác DOM an toàn với Sanitizer API để biết thêm chi tiết.

Không 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. Bắt đầu sau Chrome 105, Web SQL sẽ không được dùng nữa trong bối 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 sớm nhất có thể.

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

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

  • Giờ đây, bạn có thể cập nhật tên của một ứng dụng web tiến bộ (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 nhãn tên màn hình chính xác.
  • Hiện đã có API lớp phủ chế độ điều khiển cửa sổ. API này cho phép PWA cung cấp 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 nhỏ. Điều này cho phép bạn đặt nội dung tuỳ chỉnh vào vùng 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 truy cập vào các đường liên kết dưới đây các thay đổi bổ sung trong Chrome 105.

Đăng ký

Để cập nhật thông tin, hãy đăng ký Kênh YouTube dành cho nhà phát triển Chrome, và 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 khi Chrome 106 được phát hành, chúng tôi sẽ ở đây để cho bạn biết các tính năng mới của Chrome!