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

Adriana Jara

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

  • Thêm kiểu tuỳ chỉnh vào các phần tử hình trong hình bằng lớp giả lập :picture-in-picture mới.
  • Đặt hành vi khởi chạy ứng dụng web bằng launch_handler trong tệp kê khai.
  • sử dụng thuộc tính credentialless trong iframe để nhúng nội dung của bên thứ ba không đặt Chính sách đối với trình nhúng trên nhiều nguồn gốc
  • Và còn nhiều tính năng khác.

Tôi là Adriana Jara. 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 110.

Lớp giả lập :picture-in-picture

Với API Hình trong hình, các trang web có thể tạo một cửa sổ video nổi, luôn nằm ở trên cùng để người dùng tiếp tục xem nội dung nghe nhìn trong khi tương tác với nội dung khác.

Giờ đây, với lớp giả css :picture-in-picture, bạn có thể thêm kiểu vào các phần tử để cải thiện trải nghiệm.

Đoạn mã dưới đây cho biết cách sử dụng lớp hình trong hình để thêm thông báo vào vùng chứa video nhằm nhắc người dùng rằng video hiện đang phát ở nơi khác.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Sử dụng lại lớp giả trên phần tử video để làm cho phần tử này trong suốt nhằm hiển thị chính xác thông báo.

Hãy thử nghiệm với ví dụ này để cải thiện trải nghiệm xem video ở chế độ hình trong hình.

thành phần tệp kê khai launch_handler.

Launch Handler API (API Trình xử lý khởi chạy) cho phép bạn kiểm soát cách ứng dụng web khởi chạy. Ví dụ: ứng dụng có sử dụng cửa sổ hiện có hay cửa sổ mới và liệu cửa sổ đã chọn có được chuyển đến URL khởi chạy hay không.

Hãy xem ví dụ sau: trong môi trường máy tính, nếu bạn cài đặt một ứng dụng rồi truy cập vào ứng dụng đó trên trình duyệt, thì sẽ có một nút để chuyển đến cửa sổ ứng dụng độc lập. Trước đây, hành vi duy nhất có thể thực hiện là khởi chạy ứng dụng trong một cửa sổ mới.

Giờ đây, bằng cách sử dụng thành phần tệp kê khai launch_handler, các ứng dụng web có thể tuỳ chỉnh hành vi khởi chạy.

Ví dụ: đoạn mã dưới đây khiến tất cả các lần khởi chạy ứng dụng web này tập trung vào một cửa sổ ứng dụng hiện có và điều hướng đến cửa sổ đó (nếu có) thay vì luôn khởi chạy một cửa sổ mới.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

Iframe credentialless.

Một trong những thách thức lớn nhất khi tách biệt nhiều nguồn gốc là tất cả iframe nhiều nguồn gốc phải triển khai COEP và CORP . Trình duyệt sẽ không tải iframe không có các tiêu đề đó.

Thuộc tính credentialless giúp nhúng các iframe của bên thứ ba không đặt các tiêu đề này.

Với credentialless, iframe được tải từ một ngữ cảnh khác, trống. Cụ thể, tệp này được tải mà không cần cookie. Iframe bắt đầu bằng một hộp cookie trống.

Tương tự, các API bộ nhớ như LocalStorage, CacheStorage, v.v. sẽ tải và lưu trữ dữ liệu trong phân vùng tạm thời mới. Tất cả bộ nhớ này sẽ bị xoá sau khi tài liệu cấp cao nhất được giải phóng. Điều này cho phép xoá quy định hạn chế về COEP.

Hãy tìm hiểu thêm thông tin trong bài viết này để sử dụng credentialless một cách an toàn nhằm tải nội dung của bên thứ ba vào iframe của bạn.

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

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

Web SQL hiện đã bị xoá trong các bối cảnh không an toàn.

Thuộc tính initial-letter của CSS cung cấp một cách để đặt số dòng mà chữ cái đầu tiên sẽ lặn vào các dòng văn bản sau.

FileSystemHandle hiện bao gồm một phương thức remove().

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

Nội dung 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 các thay đổi trong Chrome 110.

Đă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à Adriana Jara. Ngay khi Chrome 111 được phát hành, tôi sẽ trở lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!