Đ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 sâu hơn và xem những tính năng mới dành cho nhà phát triển trong Chrome 116.

API Hình trong hình tài liệu.

API Hình trong hình tài liệu giúp bạn mở cửa sổ luôn ở trên cùng có thể chứa nội dung HTML tuỳ ý.

Một cửa sổ hình trong hình đang phát video giới thiệu về 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 ảnh tài liệu tương tự như cửa sổ trống cùng nguồn gốc mở bằng window.open(), nhưng có một số điểm khác biệt:

  • Cửa sổ Hình trong hình sẽ nổi ở trên các cửa sổ khác.
  • Cửa sổ Hình trong hình không bao giờ lớn hơn cửa sổ mở ra.
  • 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.

HTML sau đây thiết lập trình phát video tuỳ chỉnh và một 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 để mở cửa sổ Hình trong hình trống. Lời hứa được trả về sẽ được 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 sẽ được di chuyển đến 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 Hình trong hình cho mọi phần tử để biết thêm thông tin chi tiết và ví dụ.

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

Công cụ cho nhà phát triển có một số điểm cải tiến giúp xác định và gỡ lỗi các sự cố bị thiếu biểu định kiểu.

Trước tiên: cây Nguồn > Trang hiện chỉ hiển thị các biểu định kiểu đã triển khai và tải thành công để giảm thiểu nhầm lẫn.

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

Bảng sao kê được gạch chân kèm theo chú giải công cụ trong bảng điều khiển Nguồn.

  • Bảng điều khiển, ngoài các đường liên kết đến các yêu cầu không thành công, giờ đây 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 biểu định kiểu không tải được.

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

Bảng điều khiển mạng sẽ điền một cách nhất quán vào cột Người khởi tạo bằng các đường liên kết đến đúng dòng tham chiếu đến một biểu định kiểu không tải được.

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ó các đường liên kết đến các nguồn và yêu cầu.

Xem tính năng mới trong Công cụ cho nhà phát triển để biết toàn bộ thông tin chi tiết và thông tin khác về Công cụ cho nhà phát triển trong Chrome 116.

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

  • Đường dẫn chuyển động cho phép tác giả định vị đối tượng đồ hoạ bất kỳ và tạo hiệu ứng ả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 cùng với tính năng Bring Your Own Buffer Reader để giảm chi phí thu thập rác và bản sao cũng như cải thiện khả năng phản hồi cho người dùng.

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 116.

Đăng ký

Để 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.

Chào Adriana Jara! Ngay sau khi Chrome 117 đượ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!