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

Rachel Andrew

Ngày xuất bản: 22 tháng 9 năm 2026

Chrome 154 hiện đang được triển khai và bài đăng này chia sẻ một số tính năng chính của phiên bản này. Đọc toàn bộ ghi chú phát hành Chrome 154.

Điểm nổi bật trong bản phát hành này:

  • <iframe> có kích thước thích ứng cho phép <iframe> tự điều chỉnh kích thước dựa trên kích thước nội tại của tài liệu được nhúng.
  • Các chế độ CSS scroll-marker-group thêm các chế độ links và tabs để định cấu hình thứ tự tiêu điểm và ngữ nghĩa hỗ trợ tiếp cận của các điểm đánh dấu cuộn.
  • CSS text-decoration-inset cho phép bạn điều chỉnh điểm bắt đầu và điểm kết thúc của hiệu ứng trang trí văn bản.

<iframe> có kích thước thích ứng

Chrome 154 bổ sung tính năng hỗ trợ các iframe có kích thước thích ứng, cho phép một phần tử <iframe> trong tài liệu mẹ tự điều chỉnh kích thước theo kích thước tràn bố cục của tài liệu được nhúng để tránh việc cuộn trong tài liệu con. Điều này thay thế mẫu mà bạn đo lường nội dung iframe theo cách thủ công, gửi kích thước bằng postMessage() và cập nhật kích thước iframe trong trang nhúng.

Để điều chỉnh kích thước của iframe theo chiều cao nội dung, hãy sử dụng thuộc tính CSS frame-sizing trên phần tử <iframe> trong trang nhúng:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

Tài liệu được nhúng cũng phải chọn sử dụng bằng cách thêm một phần tử <meta name="responsive-embedded-sizing"> vào <head>:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

Để biết thêm thông tin chi tiết và bản minh hoạ, hãy xem bài viết Khung nội tuyến thích ứng trong Chrome 154.

Các chế độ scroll-marker-group của CSS

Thuộc tính scroll-marker-group kiểm soát việc vùng chứa có thể cuộn có tạo phần tử giả ::scroll-marker-group trước hoặc sau nội dung của vùng chứa đó hay không. Chrome 154 cải thiện scroll-marker-group bằng 2 chế độ đặt thứ tự tiêu điểm và ngữ nghĩa hỗ trợ tiếp cận WAI-ARIA của ::scroll-marker-group và ::scroll-marker:

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

CSS text-decoration-inset

Theo mặc định, phần trang trí văn bản của một phần tử (chẳng hạn như đường gạch chân, đường gạch ngang phía trên hoặc đường gạch ngang) có độ dài bằng với văn bản được kết xuất. Thuộc tính CSS text-decoration-inset cho phép bạn điều chỉnh điểm bắt đầu và điểm kết thúc của hiệu ứng trang trí văn bản của một phần tử để hiệu ứng đó được lồng vào trong, mở rộng ra ngoài hoặc dịch chuyển tương ứng với các cạnh của đoạn văn bản.

text-decoration-inset chấp nhận các giá trị auto, chiều dài và tỷ lệ phần trăm bằng cách sử dụng cú pháp một giá trị hoặc hai giá trị, ví dụ: để chèn cả hai đầu bằng 10px:

text-decoration-inset: 10px;

Giá trị dương sẽ chèn phần trang trí (làm cho phần trang trí ngắn hơn), trong khi giá trị âm sẽ đặt phần trang trí ra ngoài (làm cho phần trang trí dài hơn). Điều này cho phép bạn tinh chỉnh khoảng cách trang trí và tạo hiệu ứng hiển thị dấu gạch dưới có hiệu ứng bằng các thành phần trang trí văn bản CSS thay vì các phần tử bổ sung hoặc hiệu ứng chuyển màu nền.

Để biết thêm thông tin, hãy xem tài liệu về text-decoration-inset trên MDN.

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 154:

Đă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 bất cứ khi nào chúng tôi ra mắt video mới. Hoặc theo dõi chúng tôi trên X hoặc LinkedIn để xem các bài viết và bài đăng mới trên blog.

Ngay khi Chrome 155 được phát hành, chúng tôi sẽ có mặt tại đây để cho bạn biết những điểm mới trong Chrome!