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

Rachel Andrew

Ngày xuất bản: 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. Đọc toàn bộ ghi chú phát hành Chrome 137.

Điểm nổi bật trong 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. JavaScript Promise Integration (JSPI) cho phép các ứng dụng WebAssembly tích hợp với các promise của JavaScript.

CSS reading-flow và reading-order

Thuộc tính reading-flow CSS kiểm soát thứ tự mà các phần tử trong bố cục linh hoạt, lưới hoặc khối được hiển thị cho các công cụ hỗ trợ tiếp cận và cách chúng được lấy tiêu điểm bằ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 đề tồn tại từ lâu với bố cục lưới và bố cục linh hoạt, trong đó thứ tự thẻ có thể bị ngắt kết nối với thứ tự bố trí các mục.

Thuộc tính này lấy một giá trị từ khoá, 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 trong vùng chứa linh hoạt, hãy đặt giá trị của thuộc tính thành flex-visual hoặc flex-flow. Để sử dụng thuộc tính này trong một vùng chứa lưới, hãy đặt giá trị của thuộc tính thành grid-rows, grid-columns hoặc grid-order.

Thuộc tính reading-order CSS cho phép bạn thay thế thủ công thứ tự của các mục trong một vùng chứa luồng đọc. Để sử dụng thuộc tính này trong vùng chứa lưới, vùng chứa linh hoạt 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ị 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 tuần tự hợp lý.

Hàm if() của CSS

Hàm if() của CSS cung cấp một cách ngắn gọn để thể hiện các giá trị có điều kiện. Tham số này chấp nhận một chuỗi các 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 sẽ đánh giá từng điều kiện theo trình tự và trả về giá trị được 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à true, thì 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 Promise JavaScript WebAssembly (JSPI)

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

Nó cho phép một chương trình WebAssembly hoạt động như trình tạo của 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 dùng JSPI để gọi một API có chứa lời hứa (JavaScript), mã WebAssembly sẽ bị tạm ngưng; và phương thức gọi ban đầu đến chương trình WebAssembly sẽ nhận được một lời hứa 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 là còn nhiều điều khác nữa:

  • Để tiếp tục 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á lưu trữ.
  • Định dạng pixel dấu phẩy động 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 để đặt đường dẫn cho ảnh động.

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

Đă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. 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 138 đượ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!