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

Rachel Andrew

Ngày phát hành: 27 tháng 5 năm 2025

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

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

Sử dụng reading-flow và reading-order để đảm bảo thứ tự thẻ hợp lý thông qua các bố cục phức tạp. Hàm if() CSS cung cấp một cách ngắn gọn để thể hiện các giá trị có điều kiện. Tích hợp lời hứa JavaScript (JSPI) cho phép các ứng dụng WebAssembly tích hợp với lời hứa JavaScript.

reading-flow và reading-order của CSS

Thuộc tính CSS reading-flow kiểm soát thứ tự các phần tử trong bố cục flex, lưới hoặc khối hiển thị cho các công cụ hỗ trợ tiếp cận và cách các phần tử đó được lấy làm tâm điểm bằng cách sử dụng các phương thức điều hướng tuần tự tuyến tính. Điều này giải quyết một vấn đề lâu nay với bố cục lưới và flex, trong đó thứ tự thẻ có thể bị ngắt kết nối với thứ tự sắp xếp các mục.

Phương thức này nhận một giá trị từ khoá, với giá trị mặc định là normal, giúp duy trì hành vi sắp xếp các phần tử theo thứ tự DOM. Để sử dụng thuộc tính này bên trong vùng chứa flex, hãy đặt giá trị của thuộc tính này thành flex-visual hoặc flex-flow. Để sử dụng thuộc tính này bên trong vùng chứa lưới, hãy đặt giá trị của thuộc tính này thành grid-rows, grid-columns hoặc grid-order.

Thuộc tính CSS reading-order cho phép bạn ghi đè thứ tự của các mục trong vùng chứa luồng đọc theo cách thủ công. Để sử dụng thuộc tính này bên trong một lưới, flex hoặc vùng chứa khối, hãy đặt giá trị reading-flow trên vùng chứa thành source-order và đặt reading-order của từng mục thành một giá trị số nguyên.

Để tìm hiểu thêm, hãy đọc bài viết Sử dụng CSS reading-flow để điều hướng tiêu điểm theo trình tự logic.

Hàm if() của CSS

Hàm if() CSS cung cấp một cách ngắn gọn để thể hiện các giá trị có điều kiện. Phương thức này chấp nhận một loạt cặp điều kiện-giá trị, được phân tách bằng dấu chấm phẩy. Hàm này đánh giá từng điều kiện theo tuần tự và trả về giá trị liên kết với điều kiện đúng đầu tiên. Nếu không có điều kiện nào đánh giá là đúng, hàm sẽ trả về một luồng mã thông báo trống.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

Tích hợp lời hứa JavaScript WebAssembly (JSPI)

Tích hợp lời hứa JavaScript (JSPI) là một API cho phép các ứng dụng WebAssembly tích hợp với lời hứa JavaScript.

Thư viện này cho phép một chương trình WebAssembly đóng vai trò là trình tạo một lời hứa và cho phép chương trình WebAssembly tương tác với các API có lời hứa.

Cụ thể, khi một ứng dụng sử dụng JSPI để gọi một API (JavaScript) có chứa lời hứa, mã WebAssembly sẽ bị tạm ngưng; và phương thức gọi ban đầu đến chương trình WebAssembly sẽ được thực hiện khi chương trình WebAssembly hoàn tất.

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

Tất nhiên còn nhiều tính năng khác:

  • Tiếp nối tính năng Phân vùng bộ nhớ, Chrome đã triển khai tính năng phân vùng quyền truy cập vào URL Blob theo khoá bộ nhớ.
  • Các định dạng pixel dấu phẩy động của Canvas hiện đã được triển khai.
  • offset-path: shape() được hỗ trợ để bạn có thể sử dụng các hình dạng thích ứng nhằm đặt đường dẫn ảnh động.

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

Đăng ký

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

Ngay khi Chrome 138 được phát hành, chúng tôi sẽ thông báo cho bạn về các tính năng mới trong Chrome!