Dưới đây là những gì bạn cần phải biết:
- Tính năng hình trong hình cho tài liệu giúp bạn kiểm soát tốt hơn các cửa sổ hình trong hình.
- CSS Nested declarations khắc phục một số trường hợp biên khó xử lý.
- Bạn có thể chỉ định hành vi của các thành phần trang trí trên những phần tử được chia thành nhiều dòng.
- Và còn nhiều tính năng khác.
Tôi là Pete LePage. Hãy cùng khám phá những điểm mới dành cho nhà phát triển trong Chrome 130.
Tài liệu về chế độ Hình trong hình
API hình trong hình rất hữu ích khi bạn muốn tách video ra khỏi một 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 công cụ này chỉ xử lý video.
API chế độ hình trong hình của tài liệu loại bỏ hạn chế đó, cho phép bạn tạo một cửa sổ hình trong hình mà bạn có quyền kiểm soát nội dung. Đây là lựa chọn phù hợp cho những thứ như trình phát video tuỳ chỉnh, hội nghị truyền hình và ứng dụng cải thiện năng suất. Tôi rất thích cách Spotify xử lý phần này trong trình phát web của họ. Tôi thấy một cửa sổ có ảnh bìa của 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ổ mới cho chế độ hình trong hình của tài liệu. promise được trả về sẽ phân giải bằng một đối tượng JavaScript của cửa sổ Hình trong hình.
Sau đó, hãy dùng cửa sổ đó để thêm nội dung.
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 của CSS
Lồng CSS cho phép sử dụng các bộ chọn ngắn hơn, dễ đọc hơn và có tính mô-đun cao 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 CSS là Baseline Newly available (Mới có trong Baseline) và đã được cung cấp trong 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ẽ mong đợi màu nền là màu xanh lục vì nó xuất hiện cuối 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ư 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. Giờ đây, khối CSS đó sẽ tạo ra một nền màu xanh lục như mong đợi. Nếu bạn đang xen kẽ các 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
CSS nesting improves with CSSNestedDeclarations (Tính năng lồng CSS được cải thiện nhờ)
để biết nội dung giải thích chuyên sâu hơn.
box-decoration-break
Thuộc tính box-decoration-break CSS cho phép bạn chỉ định cách hiển thị các đoạn 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 bị chia thành nhiều dòng, các thành 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 sẽ được kết xuất độc lập, tạo ra một giao diện đẹp mắt hơn nhiều.
Mặc dù không hoàn toàn là Baseline, nhưng tính năng này có trong Chrome và Firefox, đồng thời có tiền tố của nhà cung cấp trong Safari.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Hãy xem box-decoration-break tài liệu 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 là còn nhiều điều khác nữa.
- Sau một vài lần bắt đầu không thành công, cuối cùng thì các vùng chứa có thể cuộn lấy tiêu điểm bàn phím cũng đã xuất hiện.
- WebGPU có tính năng kết hợp hai nguồn.
- Và cổng nối tiếp trên web sẽ có một thuộc tính được kết nối.
Tài liệu đọc thêm
Đây chỉ là 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 những thay đổi trong Chrome 130.
- Ghi chú phát hành cho Chrome 130.
- Tính năng mới trong Chrome DevTools (130)
- Nội dung cập nhật trên ChromeStatus.com cho Chrome 130
- Danh sách thay đổi trong kho lưu trữ nguồn Chromium
- Lịch phát hành phiên bản Chrome
Đăng ký
Để luôn nắm bắt thông tin mới nhất, hãy đăng ký theo dõi kênh YouTube của Chrome Developers. 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ẽ có mặt tại đây để giới thiệu các tính năng mới trong Chrome!