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

Mariko Kosaka
X

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

Tôi là Mariko Kosaka. 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 131.

Cải tiến kiểu cho <details> và <summary>

Giờ đây, bạn có nhiều lựa chọn hơn để tạo kiểu cho cấu trúc của các phần tử <details> và <summary> nhằm tạo tiện ích thông tin công bố hoặc tiện ích xếp nếp.

Các thay đổi được giới thiệu trong bản phát hành này cho phép sử dụng thuộc tính display và thêm phần tử giả ::details-content để tạo kiểu cho phần mở rộng và thu gọn.

Trước đây, bạn không thể thay đổi loại hiển thị của phần tử details. Giờ đây, quy định hạn chế này đã được nới lỏng, cho phép bạn sử dụng các bố cục như lưới hoặc bố cục flex.

Trong ví dụ độc quyền về ngăn xếp này, được tạo từ một số phần tử details, khi một trong các phần tử details được mở rộng, nội dung của phần tử đó sẽ được đặt bên cạnh summary.

Tiện ích Accordion (Đàn xếp) có bố cục Flex

Bạn có thể thực hiện việc này bằng cách sử dụng bố cục flex trên phần tử details. Bạn cũng có thể thử các mẫu bố cục khác với các giá trị hiển thị khác như grid.

Hãy xem bài viết Các tuỳ chọn khác để tạo kiểu <details> của Bramus để biết thêm thông tin giải thích chuyên sâu.

Hộp lề @page

Thêm tính năng hỗ trợ hộp lề trang khi in tài liệu web hoặc xuất tài liệu dưới dạng PDF.

Hộp lề trang cho phép bạn xác định nội dung trong vùng lề của trang. Vì vậy, bạn có thể cung cấp đầu trang và chân trang tuỳ chỉnh thay vì sử dụng đầu trang và chân trang tích hợp sẵn do trình duyệt tạo.

Lề trang được xác định bằng cách sử dụng quy tắc @page trong CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

Giao diện và nội dung của hộp lề được chỉ định bằng các thuộc tính CSS bên trong quy tắc at-rules đại diện cho 16 hộp lề bằng nội dung được tạo.

Đối với việc đánh số trang, bộ đếm cũng được hỗ trợ với page cho số trang hiện tại và pages cho tổng số trang.

Hãy xem bài viết của Rachel Thêm nội dung vào lề của trang web khi in bằng CSS để biết thêm thông tin chi tiết.

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

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

  • Hỗ trợ tài nguyên SVG bên ngoài cho "clip-path", "fill", "stroke" và "marker".
  • WebHID được bật bên trong các ngữ cảnh worker chuyên dụng.
  • Kiểm soát hành vi của biểu tượng cảm xúc bằng thuộc tính CSS font-variant-emoji.

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

Đă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à Mariko Kosaka. Ngay khi Chrome 132 đượ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!