Điểm mới trong Chrome 116

Adriana Jara

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

Tôi là Adriana Jara. Hãy cùng tìm hiểu những điểm mới dành cho nhà phát triển trong Chrome 116.

Tài liệu về API Hình trong hình.

API Hình trong hình của tài liệu cho phép mở một cửa sổ luôn ở trên cùng có thể được điền sẵn nội dung HTML tuỳ ý.

Một cửa sổ hình trong hình đang phát video giới thiệu của Sintel.
Một cửa sổ Hình trong hình được tạo bằng API Hình trong hình của tài liệu (bản minh hoạ).

Cửa sổ Hình trong hình trong API Hình trong hình của tài liệu tương tự như một cửa sổ trống cùng nguồn mở bằng window.open(), với một số điểm khác biệt:

  • Cửa sổ Hình trong hình nổi trên các cửa sổ khác.
  • Cửa sổ Hình trong hình không bao giờ tồn tại lâu hơn cửa sổ đang mở.
  • Không thể điều hướng cửa sổ Hình trong hình.
  • Trang web không thể đặt vị trí cửa sổ Hình trong hình.

Mã HTML sau đây thiết lập trình phát video tuỳ chỉnh và phần tử nút để mở trình phát video trong cửa sổ Hình trong hình.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

JavaScript sau đây gọi documentPictureInPicture.requestWindow() khi người dùng nhấp vào nút này để mở một cửa sổ Hình trong hình trống. Lời hứa được trả về sẽ phân giải bằng đối tượng JavaScript của cửa sổ Hình trong hình. Trình phát video được di chuyển sang cửa sổ đó bằng append().

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Hãy xem phần Chế độ hình trong hình cho mọi thành phần để biết thêm thông tin chi tiết và ví dụ.

Công cụ cho nhà phát triển thiếu các điểm cải tiến về gỡ lỗi của tệp kiểu.

DevTools có một số điểm cải tiến để xác định và gỡ lỗi các vấn đề về việc thiếu tệp kiểu.

Thứ nhất: cây Sources > Page (Nguồn > Trang) hiện chỉ hiển thị các tệp kiểu đã triển khai và tải thành công để giảm thiểu sự nhầm lẫn.

Ngoài ra, Sources > Editor (Nguồn > Trình chỉnh sửa) hiện sẽ gạch chân và hiển thị chú giải công cụ lỗi cùng dòng bên cạnh các câu lệnh không thành công,@import, url() và href.

Các câu lệnh được gạch chân có chú giải công cụ trong bảng điều khiển Nguồn.

  • Ngoài các đường liên kết đến các yêu cầu không thành công, Bảng điều khiển hiện còn cung cấp các đường liên kết đến dòng chính xác tham chiếu đến một tệp kiểu không tải được.

Bảng điều khiển cung cấp đường liên kết đến chính xác các dòng có câu lệnh có vấn đề.

Network panel (Ngăn mạng) liên tục điền sẵn các đường liên kết đến dòng chính xác tham chiếu đến một tệp định kiểu không tải được vào cột Initiator (Trình khởi tạo).

Bảng điều khiển Vấn đề liệt kê tất cả vấn đề khi tải biểu định kiểu, bao gồm cả URL bị hỏng, yêu cầu không thành công và câu lệnh @import bị đặt nhầm.

Bảng điều khiển Vấn đề có đường liên kết đến các nguồn và yêu cầu.

Hãy xem bài viết tính năng mới trong DevTools để biết tất cả thông tin chi tiết và thông tin khác về DevTools trong Chrome 116.

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

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

  • Đường dẫn chuyển động cho phép tác giả định vị bất kỳ đối tượng đồ hoạ nào và tạo ảnh động cho đối tượng đó dọc theo đường dẫn do nhà phát triển chỉ định.
  • Các thuộc tính display và content-visibility hiện được hỗ trợ trong ảnh động khung hình chính, cho phép thêm ảnh động thoát hoàn toàn trong CSS.
  • Giờ đây, bạn có thể sử dụng API tìm nạp với trình đọc Bring Your Own Buffer (Tự mang vùng đệm), giảm chi phí thu thập rác và số bản sao, đồng thời cải thiện khả năng phản hồi cho người dùng.

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 truy cập các đường liên kết dưới đây để biết các thay đổi khác trong Chrome 116.

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