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à Marik 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.

Tính năng kế thừa làm nổi bật CSS

Tính năng kế thừa làm nổi bật CSS sẽ thay đổi đối với các lớp giả ::selection và ::target-text. Điều này tạo ra một mô hình trực quan hơn để kế thừa kiểu và phù hợp với các lớp giả ::highlight, ::spelling-error và ::grammar-error mới thêm gần đây.

Hãy nghĩ về đoạn mã này với văn bản được nhấn mạnh.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

Trong các phiên bản Chrome trước, khi bạn chọn văn bản được làm nổi bật, màu của văn bản không thay đổi thành màu xanh dương mặc dù bạn đã đặt lớp giả ::selection trên phần tử đoạn văn mẹ.

Văn bản được đánh dấu màu hồng

Điều này là do mô hình này được triển khai bằng cách sử dụng mô hình kế thừa phần tử ban đầu. Vì vậy, lớp giả ::selection trong trường hợp này chỉ khớp với các phần tử có lớp màu xanh dương, mà phần tử bên trong đoạn văn này không có.

Với thay đổi về tính năng kế thừa văn bản được làm nổi bật, khi bạn chọn cùng một văn bản trong Chrome 131, văn bản đó sẽ chuyển sang màu xanh dương.

Văn bản được đánh dấu màu xanh dương

Có một số thay đổi khác liên quan đến vấn đề này, vì vậy, hãy nhớ xem bài viết Thay đổi về tính kế thừa cho kiểu lựa chọn CSS do Stephen Chenney từ Igalia viết. Ông là người đã làm việc trên tính năng này.

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

Giờ đây, bạn có nhiều tuỳ 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, chúng tôi đã nới lỏng quy định hạn chế này để 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!