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.
  • Thiết lập hành vi 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

Nhờ API Hình trong hình, bạn có thể tạo một cửa sổ video nổi, luôn ở trên cùng để người dùng có thể tiếp tục xem nội dung đa phương tiệ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 cho 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 một thông báo vào vùng chứa video nhằm nhắc người dùng rằng video đang phát ở mộ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ử trong suốt nhằm hiển thị thông báo chính xác.

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

thành viên trong 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 xét ví dụ: trong môi trường máy tính để bàn, nếu bạn cài đặt một ứng dụng rồi truy cập ứng dụng đó trên trình duyệt, thì 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 qua một ngữ cảnh trống và khác. 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ự như vậy, các API lưu trữ như LocalStorage, CacheStorage, v.v. 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.

Tìm thêm thông tin trong bài viết này nhằm sử dụng credentialless một cách an toàn để 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 nữa.

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

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 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 sau khi Chrome 111 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới trong Chrome!