Chrome 137 beta

Rachel Andrew

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

Trừ khi có ghi chú khác, các thay đổi sau đây sẽ áp dụng cho bản phát hành mới nhất của kênh beta Chrome dành cho Android, ChromeOS, Linux, macOS và Windows. Tìm hiểu thêm về các tính năng được liệt kê tại đây thông qua các đường liên kết được cung cấp hoặc trong danh sách trên ChromeStatus.com. Chrome 130 đang ở giai đoạn thử nghiệm beta kể từ ngày 30 tháng 4 năm 2025. Bạn có thể tải phiên bản mới nhất xuống từ Google.com dành cho máy tính hoặc từ Cửa hàng Google Play trên Android.

CSS và giao diện người dùng

Bản phát hành này bổ sung 7 tính năng mới về CSS và giao diện người dùng.

Hàm if()

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. Điều này cho phép bạn thể hiện logic có điều kiện phức tạp theo cách đơn giản và súc tích. Ví dụ:

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>

Các thuộc tính reading-flow và reading-order

Thuộc tính CSS reading-flow kiểm soát thứ tự hiển thị các phần tử trong bố cục flex, lưới hoặc khối cho các công cụ hỗ trợ tiếp cận và được lấy tiêu điểm bằng cách sử dụng thao tác điều hướng tiêu điểm bàn phím thẻ. Thuộc tính này nhận một trong các giá trị từ khoá sau:

• normal
• flex-visual
• flex-flow
• grid-rows
• grid-columns
• grid-order
• source-order

Thuộc tính CSS reading-order cho phép bạn ghi đè thứ tự theo cách thủ công trong vùng chứa luồng đọc. Đây là một số nguyên có giá trị mặc định là 0.

Để tìm hiểu thêm, hãy đọc bài viết Sử dụng luồng đọc CSS để điều hướng tiêu điểm theo trình tự logic và thử một số ví dụ về luồng đọc.

offset-path: shape()

Hàm shape() đã được hỗ trợ trong clip-path và cho phép cắt nội dung thích ứng. Việc bật thuộc tính này cho offset-path cũng giúp thu hẹp khoảng trống nhỏ khi có thể sử dụng cùng một loại hình dạng cho thuộc tính đó.

Hỗ trợ thuộc tính biến đổi trên SVGSVGElement

Tính năng này cho phép áp dụng các thuộc tính biến đổi (chẳng hạn như chia tỷ lệ, xoay, dịch và xiên) trực tiếp cho phần tử gốc <svg> bằng cách sử dụng thuộc tính biến đổi của phần tử đó. Tính năng nâng cao này cho phép bạn thao tác với toàn bộ hệ toạ độ SVG hoặc toàn bộ nội dung của hệ toạ độ đó, mang lại tính linh hoạt cao hơn trong việc tạo đồ hoạ vectơ động, thích ứng và tương tác. Bằng cách hỗ trợ thuộc tính này, bạn có thể biến đổi phần tử SVG mà không cần thêm phần tử trình bao bọc hoặc giải pháp CSS phức tạp, giúp đơn giản hoá quy trình tạo đồ hoạ web có thể mở rộng và tạo ảnh động.

Cho phép <use> tham chiếu phần tử gốc của tài liệu bên ngoài bằng cách bỏ qua mảnh.

Trong tính năng này, chúng tôi đang đơn giản hoá phần tử <use> SVG bằng cách nới lỏng các yêu cầu tham chiếu. Hiện tại, bạn cần tham chiếu rõ ràng các mảnh trong tài liệu SVG. Nếu không có mã mảnh nào được cung cấp, <use> sẽ không thể phân giải mục tiêu và sẽ không có nội dung nào được hiển thị hoặc tham chiếu.

Với tính năng này, việc bỏ qua các mảnh hoặc chỉ đặt tên tệp SVG bên ngoài sẽ tự động tham chiếu đến phần tử gốc, giúp bạn không cần phải thay đổi tài liệu được tham chiếu chỉ để chỉ định mã nhận dạng cho phần tử gốc. Tính năng nâng cao này giúp đơn giản hoá quy trình chỉnh sửa thủ công và cải thiện hiệu quả.

Màu nhấn của hệ thống cho thuộc tính accent-color được mở rộng sang Windows và ChromeOS

Điều này cho phép bạn sử dụng màu nhấn của hệ điều hành cho các thành phần biểu mẫu. Bằng cách sử dụng thuộc tính CSS accent-color, bạn có thể đảm bảo rằng các phần tử biểu mẫu như hộp đánh dấu, nút chọn và thanh tiến trình sẽ tự động sử dụng màu nhấn do hệ điều hành của người dùng xác định. Tính năng này đã được hỗ trợ trên macOS kể từ năm 2021 và hiện được hỗ trợ trên Windows và ChromeOS.

view-transition-name: match-element

Giá trị match-element cho thuộc tính view-transition sẽ tạo một mã nhận dạng duy nhất dựa trên danh tính của phần tử và vẫn giữ nguyên cho phần tử này. Phương thức này được dùng trong các trường hợp Ứng dụng một trang, trong đó phần tử đang được di chuyển và bạn muốn tạo ảnh động cho phần tử đó bằng hiệu ứng chuyển đổi khung hiển thị.

API web

Loại lỗi căn chỉnh được gửi khi tạo thông tin xác thực WebAuthn "thanh toán"

Sửa loại lỗi được gửi trong quá trình tạo thông tin xác thực WebAuthn cho thông tin xác thực payment. Do thông số kỹ thuật trước đây không khớp, việc tạo thông tin xác thực payment trong iframe nhiều nguồn gốc mà không có hoạt động kích hoạt của người dùng sẽ gửi SecurityError thay vì NotAllowedError. Đây là thông tin được gửi cho thông tin xác thực không phải thông tin thanh toán. Đây là một thay đổi có thể gây lỗi. Mã trước đó đã phát hiện loại lỗi được gửi (ví dụ: e instanceof SecurityError) sẽ bị ảnh hưởng. Mã chỉ xử lý chung các lỗi trong quá trình tạo thông tin xác thực (ví dụ: catch (e)) sẽ tiếp tục hoạt động chính xác.

Phân vùng URL blob: Tìm nạp/Điều hướng

Tiếp nối tính năng Phân vùng bộ nhớ, tính năng này triển khai việc phân vùng quyền truy cập URL Blob theo Khoá bộ nhớ (trang web cấp cao nhất, nguồn gốc khung và giá trị boolean has-cross-site-ancestor), ngoại trừ các thao tác điều hướng cấp cao nhất sẽ chỉ được phân vùng theo nguồn gốc khung.

Bạn có thể tạm thời huỷ thay đổi này bằng cách đặt chính sách PartitionedBlobURLUsage. Chính sách này sẽ không được dùng nữa khi các chính sách doanh nghiệp khác liên quan đến việc phân vùng bộ nhớ không được dùng nữa.

Ngăn xếp lệnh gọi trong báo cáo sự cố từ các trang web không phản hồi

Tính năng này ghi lại ngăn xếp lệnh gọi JavaScript khi một trang web không phản hồi do mã JavaScript chạy một vòng lặp vô hạn hoặc một phép tính rất dài khác. Điều này giúp nhà phát triển xác định nguyên nhân khiến ứng dụng không phản hồi và khắc phục dễ dàng hơn. Ngăn xếp lệnh gọi JavaScript được đưa vào API báo cáo sự cố khi lý do là không phản hồi.

Loại màu dấu phẩy động trên canvas

Giới thiệu khả năng sử dụng định dạng pixel dấu phẩy động (thay vì dấu phẩy cố định 8 bit) với CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D và ImageData. Điều này là cần thiết đối với các ứng dụng có độ chính xác cao (ví dụ: hình ảnh y tế), nội dung có dải động cao và không gian màu hoạt động tuyến tính.

Không cho phép kết xuất trước HTTP văn bản thuần tuý không đáng tin cậy

Hiện tại, tính năng kết xuất trước được phép qua HTTP và HTTPS, trong khi tính năng tải trước chỉ hoạt động qua HTTPS. Hạn chế tính năng kết xuất trước để nhất quán với tính năng tải trước.

Document-Isolation-Policy

Document-Isolation-Policy cho phép một tài liệu bật crossOriginIsolation cho chính tài liệu đó mà không cần triển khai COOP hoặc COEP, bất kể trạng thái crossOriginIsolation của trang. Chính sách này được hỗ trợ bằng tính năng tách quy trình. Ngoài ra, tài nguyên phụ không phải CORS nhiều nguồn gốc sẽ được tải mà không cần thông tin xác thực hoặc cần có tiêu đề CORP.

Tìm hiểu thêm trong bài viết Chính sách về việc tách tài liệu: Dễ dàng bật các tính năng web mạnh mẽ.

Ed25519 trong Mật mã học trên web

Tính năng này hỗ trợ thêm các thuật toán Curve25519 trong API Web Cryptography, cụ thể là thuật toán ký Ed25519

Ghi nhật ký và báo cáo địa chỉ IP

Chrome Enterprise đang tăng cường khả năng giám sát bảo mật và phản hồi sự cố bằng cách thu thập và báo cáo địa chỉ IP cục bộ và từ xa, đồng thời gửi các địa chỉ IP đó đến Nhật ký điều tra bảo mật (SIT). Ngoài ra, Chrome Enterprise sẽ cho phép quản trị viên tuỳ ý gửi địa chỉ IP đến nhà cung cấp SIEM bên thứ nhất và bên thứ ba bằng trình kết nối Báo cáo Chrome Enterprise. Tính năng này sẽ được cung cấp cho khách hàng Chrome Enterprise Core.

Tích hợp lời hứa JavaScript

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. API này cho phép chương trình WebAssembly đóng vai trò là trình tạo Promise và cho phép chương trình WebAssembly tương tác với các API có Promise. Cụ thể, khi một ứng dụng sử 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ẽ được cung cấp một Lời hứa sẽ được thực hiện khi chương trình WebAssembly hoàn tất.

API Trình phát hiện ngôn ngữ

API Trình phát hiện ngôn ngữ là một API JavaScript xác định ngôn ngữ của một chuỗi được cung cấp. API này được hỗ trợ bởi một mô hình cơ bản được tinh chỉnh để thực hiện các tác vụ phát hiện ngôn ngữ.

Với một chuỗi, API Trình phát hiện ngôn ngữ sẽ trả về một danh sách theo thứ tự của các ngôn ngữ được phát hiện, cùng với điểm số tin cậy cho mỗi kết quả.

Nhà phát triển có thể tuỳ ý truyền vào danh sách các ngôn ngữ nhập dự kiến khi tạo một thực thể Trình phát hiện ngôn ngữ để giúp tối ưu hoá cho các trường hợp sử dụng dự kiến sẽ thực hiện việc phát hiện trên một số ngôn ngữ nhất định.

Hạn chế các thuộc tính và đối số float trên SVGMatrix, SVGRect và SVGPoint

Khi đặt các thuộc tính hoặc đối số float trên SVGMatrix, SVGRect và SVGPoint, giờ đây, bạn không thể đặt các thuộc tính hoặc đối số đó thành Infinity hoặc Nan. Một ngoại lệ JavaScript sẽ được gửi nếu bạn cố gắng đặt thuộc tính này, như được xác định trong quy cách SVG.

API lựa chọn getComposedRanges và direction

Tính năng này cung cấp hai phương thức API mới cho Selection API:

• Selection.direction trả về hướng của lựa chọn dưới dạng "none", "forward" hoặc "backward"
• Selection.getComposedRanges() trả về danh sách 0 hoặc 1 "thành phần" StaticRange

StaticRange "được kết hợp" được phép vượt qua ranh giới bóng, trong khi các Phạm vi thông thường không được phép.

Ví dụ:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Nếu lựa chọn vượt qua ranh giới gốc bóng không được cung cấp trong danh sách shadowRoots, thì các điểm cuối của StaticRange sẽ được "đặt lại phạm vi" để nằm bên ngoài cây đó. Điều này giúp đảm bảo chúng ta không hiển thị các cây bóng không xác định.

Phần mở rộng phạm vi ứng dụng web

Thêm trường tệp kê khai ứng dụng web scope_extensions cho phép các ứng dụng web mở rộng phạm vi của chúng sang các nguồn gốc khác.

Ví dụ:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

Điều này cho phép các trang web kiểm soát nhiều miền con và miền cấp cao nhất được trình bày dưới dạng một ứng dụng web duy nhất.

Yêu cầu các nguồn gốc được liệt kê xác nhận mối liên kết với ứng dụng web bằng cách sử dụng tệp cấu hình .well-known/web-app-origin-association.

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

Gợi ý nhánh WebAssembly

Cải thiện hiệu suất của mã WebAssembly đã biên dịch bằng cách thông báo cho công cụ rằng một lệnh nhánh cụ thể rất có thể sẽ đi theo một đường dẫn cụ thể. Điều này cho phép công cụ đưa ra quyết định tốt hơn về bố cục mã (cải thiện số lượt truy cập vào bộ nhớ đệm hướng dẫn) và phân bổ thanh ghi.

WebGPU: GPUTextureView để liên kết externalTexture

Giờ đây, bạn được phép sử dụng GPUTextureView cho liên kết externalTexture khi tạo GPUBindGroup.

WebGPU: Quá tải copyBufferToBuffer

Phương thức GPUCommandEncoder copyBufferToBuffer() hiện có một cách đơn giản hơn để sao chép toàn bộ vùng đệm bằng cách sử dụng phương thức nạp chồng mới có các tham số kích thước và độ dời không bắt buộc.

Bản dùng thử theo nguyên gốc mới

Trong Chrome 137, bạn có thể chọn tham gia các thử nghiệm mới về nguồn gốc sau đây.

Thuộc tính chặn kết xuất tốc độ khung hình đầy đủ

Thêm một mã thông báo mới chặn kết xuất tốc độ khung hình đầy đủ vào các thuộc tính chặn. Khi trình kết xuất bị chặn bằng mã thông báo tốc độ khung hình đầy đủ, trình kết xuất sẽ hoạt động ở tốc độ khung hình thấp hơn để dành nhiều tài nguyên hơn cho việc tải.

Tạm dừng phát nội dung nghe nhìn trên các iframe chưa hiển thị

Thêm chính sách quyền "media-playback-while-not-rendered" để cho phép các trang web nhúng tạm dừng phát nội dung đa phương tiện của các iframe được nhúng không được hiển thị, nghĩa là đặt thuộc tính "hiển thị" thành "không có". Điều này sẽ cho phép nhà phát triển tạo ra trải nghiệm thân thiện hơn với người dùng và cũng cải thiện hiệu suất bằng cách cho phép trình duyệt xử lý việc phát nội dung mà người dùng không nhìn thấy.

API Trình viết lại

API Rewriter (API Viết lại) chuyển đổi và diễn đạt lại văn bản đầu vào theo cách được yêu cầu, dựa trên mô hình ngôn ngữ AI trên thiết bị. Nhà phát triển có thể sử dụng API này để xoá nội dung thừa trong một văn bản nhằm phù hợp với giới hạn từ, diễn đạt lại thông điệp để phù hợp với đối tượng mục tiêu hoặc để có tính xây dựng hơn nếu phát hiện thấy thông điệp sử dụng ngôn từ độc hại, diễn đạt lại một bài đăng hoặc bài viết để sử dụng các từ và khái niệm đơn giản hơn, v.v.

API Trình ghi

Bạn có thể dùng Writer API để viết nội dung mới dựa trên câu lệnh của một bài tập viết, được hỗ trợ bởi mô hình ngôn ngữ AI trên thiết bị. Nhà phát triển có thể sử dụng API này để tạo nội dung giải thích bằng văn bản về dữ liệu có cấu trúc, soạn một bài đăng về sản phẩm dựa trên bài đánh giá hoặc nội dung mô tả sản phẩm, mở rộng danh sách ưu và khuyết điểm thành chế độ xem đầy đủ và nhiều tính năng khác.