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

Pete LePage

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

• Tính năng Hình trong hình của tài liệu giúp bạn kiểm soát nhiều hơn đối với các cửa sổ hình trong hình.
• Khai báo lồng nhau trong CSS khắc phục một số trường hợp khó xử.
• Bạn có thể chỉ định hành vi của các phần trang trí trên các phần tử được phân tách trên nhiều dòng.
• Và còn nhiều tính năng khác.

Tôi là Pete LePage. 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 130.

Ghi lại chế độ Hình trong hình

API hình trong hình rất hữu ích khi bạn muốn bật một video ra khỏi thẻ trình duyệt để có thể theo dõi video trong khi tương tác với các trang web hoặc ứng dụng khác. Nhưng ứng dụng này chỉ hỗ trợ video.

API hình trong hình của tài liệu loại bỏ quy định hạn chế đó, cho phép bạn tạo cửa sổ hình trong hình để kiểm soát nội dung. Đây là một tính năng rất hữu ích cho các ứng dụng như trình phát video tuỳ chỉnh, hội nghị truyền hình và các ứng dụng nâng cao năng suất. Tôi rất thích những gì Spotify đã làm với công cụ này trong trình phát trên web của họ. Một cửa sổ có hình minh hoạ cho bài hát hiện tại, các nút điều khiển phát và có thể dễ dàng thêm bài hát vào danh sách yêu thích.

Để sử dụng tính năng này, hãy yêu cầu một cửa sổ hình trong hình mới cho tài liệu. promise được trả về sẽ phân giải bằng đối tượng JavaScript của cửa sổ Hình trong hình. Sau đó, hãy sử dụng đối tượng đó để thêm nội dung vào cửa sổ.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

Với thuộc tính preferInitialWindowPlacement mới, bạn có thể yêu cầu Chrome luôn mở cửa sổ hình trong hình ở vị trí và kích thước mặc định, thay vì sử dụng lại vị trí hoặc kích thước của cửa sổ trước đó.

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

Hãy xem bài đăng của François Chế độ Hình trong hình cho mọi phần tử để biết thêm nhiều thông tin chi tiết!

Nội dung khai báo lồng nhau trong CSS

Lồng ghép CSS cho phép các bộ chọn ngắn hơn, dễ đọc hơn và có tính mô-đun hơn bằng cách lồng ghép các quy tắc bên trong các quy tắc khác. Lồng CSS là Mới có trong đường cơ sở và đã có gần một năm.

Có một số trường hợp đặc biệt không hoạt động như mong đợi. Ví dụ: với khối CSS sau, bạn sẽ thấy màu nền là màu xanh lục vì nó xuất hiện sau cùng, nhưng thực tế lại là màu đỏ!

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Để khắc phục các trường hợp đặc biệt như vậy, nhóm làm việc về CSS đã giới thiệu quy tắc khai báo lồng nhau. Quy tắc này được triển khai trong Chrome 130. Bây giờ, cùng một khối CSS đó sẽ tạo ra nền màu xanh lục như dự kiến. Nếu bạn đang xen kẽ các nội dung khai báo trần với các quy tắc lồng nhau, bạn nên kiểm tra kỹ mã của mình.

Hãy xem bài viết của Bramus Cải thiện tính năng lồng CSS bằng CSSNestedDeclarations để biết thêm thông tin chi tiết.

box-decoration-break

Thuộc tính CSS box-decoration-break cho phép bạn chỉ định cách hiển thị các mảnh của một phần tử khi bị ngắt trên nhiều dòng, cột hoặc trang.

Ví dụ: phần tử này trông rất đẹp khi mọi thứ nằm trên một dòng.

Khi nội dung được chia thành nhiều dòng, các phần trang trí như nền, bóng hộp, đường viền, v.v. sẽ bị cắt, tạo ra một giao diện khá khác biệt.

Bằng cách thêm box-decoration-break: clone, mỗi mảnh được kết xuất độc lập, tạo ra giao diện đẹp hơn nhiều.

Mặc dù không hoàn toàn là Đường cơ sở, nhưng tính năng này có trong Chrome và Firefox, đồng thời được đặt tiền tố nhà cung cấp trong Safari.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Hãy xem tài liệu về box-decoration-break trên MDN và bài đăng của Rachel Thuộc tính box-decoration-break trong Chrome 130 để biết thêm chi tiết.

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

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

• Sau một vài lần khởi động không thành công, các vùng chứa cuộn có thể lấy tiêu điểm bằng bàn phím cuối cùng cũng đã ra mắt.
• WebGPU có tính năng kết hợp nguồn kép.
• Và chuỗi web sẽ nhận được một thuộc tính được kết nối.

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 sau để biết thêm các thay đổi trong Chrome 130.

• Ghi chú phát hành của Chrome 130.
• Tính năng mới trong Công cụ dành cho nhà phát triển của Chrome (130)
• Nội dung cập nhật của ChromeStatus.com cho Chrome 130
• Danh sách thay đổi về kho lưu trữ nguồn Chromium
• Lịch phát hành của Chrome

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