Trang này được dịch bởi Cloud Translation API.

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ả :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 chưa đặt Chính sách về 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 sâu hơn và xem Chrome 110 có gì mới dành cho nhà phát triển.

lớp giả :hình trong hình

Với API Hình trong hình, các trang web có thể tạo cửa sổ video nổi, luôn ở 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 :picture-in-picture css pseudo-class, 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ử trong suốt nhằm hiển thị thông báo một cách chính xác.

Hãy thử tham khảo ví dụ này để cải thiện trải nghiệm của bạn khi dùng video hình trong hình.

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

API Trình xử lý khởi chạy cho phép bạn kiểm soát cách ứng dụng web của bạn chạy. Ví dụ: ứng dụng 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 điều hướng đến URL 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 và sau đó truy cập ứng dụng đó trên trình duyệt, thì sẽ có một nút để chuyển sang cửa sổ ứng dụng độc lập. Trước đây, hành vi duy nhất có thể là khởi chạy ứng dụng trong một cửa sổ mới.

Giờ đây, việc sử dụng các ứng dụng web thành viên tệp kê khai launch_handler 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"
 }
}

`credentialless` iframe.

Một trong những thách thức lớn nhất khi sử dụng tính năng tách biệt nhiều nguồn gốc là tất cả các iframe trên nhiều nguồn gốc đều 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 những iframe của bên thứ ba không đặt các tiêu đề này.

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

Tương tự, 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 huỷ tải. Điều này cho phép gỡ bỏ quy định hạn chế về COEP.

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

Và tất nhiên còn nhiều lợi ích khác.

Web SQL hiện sẽ bị xoá trong các ngữ cảnh không an toàn.

Thuộc tính initial-letter của CSS cung cấp cách thiết lập số lượng dòng mà chữ cái đầu tiên phải bao gồm trong 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ỉ 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 110.

Để 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 của Chrome!