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ô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 là lựa chọn lý tưởng khi bạn muốn kéo video ra khỏi thẻ trình duyệt để vừa theo dõi được video vừa 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.

Cửa sổ hình trong hình của Spotify

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à ứng dụng nâng cao năng suất. Tôi thích những gì Spotify đã làm với trình phát trên web của họ. Tôi sẽ thấy một cửa sổ hiển thị hình minh hoạ cho bài hát hiện tại, các nút điều khiển chế độ phát và có thể dễ dàng thêm bài hát vào danh sách yêu thích của mình.

Để 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 về 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

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

Có một vài trường hợp hiếm gặp 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 hiếm gặp như thế này, nhóm công tác CSS đã giới thiệu quy tắc khai báo lồng nhau, đượ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.

Không có dấu ngắt dòng

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

Dấu ngắt dòng có lát cắt

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

Dấu ngắt dòng với bản sao

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.

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

Đă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!