Ngày xuất bản: 1 tháng 5 năm 2025
Trừ phi có ghi chú khác, các thay đổi sau đây áp dụng cho bản phát hành mới nhất của kênh Chrome beta 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 là phiên bản thử nghiệm 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 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. 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à đúng, thì 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à ngắn gọn. 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ự 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 lấy tiêu điểm bằng cách sử dụng chế độ điều hướng tiêu điểm bằng bàn phím tab. Thuộc tính này nhận một trong các giá trị từ khoá sau:
normalflex-visualflex-flowgrid-rowsgrid-columnsgrid-ordersource-order
Thuộc tính CSS reading-order cho phép bạn ghi đè thứ tự theo cách thủ công trong một 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 CSS cho luồng đọc để điều hướng tiêu điểm tuần tự hợp lý 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 tính năng này cho offset-path cũng sẽ đóng một khoảng trống nhỏ, trong đó có thể 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à làm 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ử đó. Điểm cải tiến này cho phép bạn thao tác toàn bộ hệ toạ độ SVG hoặc nội dung của hệ toạ độ đó một cách tổng thể, mang lại sự 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, phần tử SVG có thể được biến đổi mà không cần các phần tử trình bao bọc bổ sung hoặc giải pháp phức tạp cho CSS, giúp đơn giản hoá quy trình tạo đồ hoạ web có thể mở rộng và có ảnh động.
Cho phép <use> tham chiếu đến phần tử gốc của một tài liệu bên ngoài bằng cách bỏ qua đoạn mã.
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 đoạn trong tài liệu SVG. Nếu không có mã nhận dạng đoạn nào được cung cấp, <use> sẽ không thể phân giải mục tiêu và không có nội dung nào được kết xuất hoặc tham chiếu.
Với tính năng này, việc bỏ qua các đoạn hoặc chỉ cần cung cấp 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ột mã nhận dạng cho gốc. Việc cải tiến 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
Nhờ đó, bạn có thể sử dụng màu nhấn của hệ điều hành cho các phần tử 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 áp 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 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 ra 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. Thao tác này được dùng trong 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ị.
Web API
Căn chỉnh loại lỗi được gửi cho việc tạo thông tin xác thực WebAuthn "thanh toán"
Sửa loại lỗi xảy ra trong quá trình tạo thông tin đăng nhập WebAuthn cho thông tin đăng nhập payment. Do sự không khớp về thông số kỹ thuật trước đây, việc tạo thông tin đăng nhập payment trong iframe trên 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 đăng nhập không thanh toán. Đây là một thay đổi có thể gây lỗi. Mã đã 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 đăng nhập (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 tục Phân vùng bộ nhớ, tính năng này sẽ triển khai việc phân vùng quyền truy cập URL Blob theo Khoá lưu trữ (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 yêu cầu đ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 trong báo cáo sự cố của 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 khác rất dài. Điều này giúp nhà phát triển xác định nguyên nhân gây ra tình trạ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.
Các loại màu dấu phẩy động của 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 cho các ứng dụng có độ chính xác cao (ví dụ: hình ảnh hoá y tế), nội dung có dải tương phản động cao và không gian màu làm việc 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 cho phép qua HTTP và HTTPS, trong khi tính năng tìm nạp trước chỉ hoạt động qua HTTPS. Hạn chế việc kết xuất trước để nhất quán với việc tìm nạp trước.
Document-Isolation-Policy
Document-Isolation-Policy cho phép một tài liệu bật crossOriginIsolation cho chính nó 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 cách ly quy trình. Ngoài ra, các tài nguyên phụ nhiều nguồn gốc không phải CORS của tài liệu sẽ được tải mà không có thông tin đăng nhập hoặc sẽ cần có tiêu đề CORP.
Tìm hiểu thêm trong Chính sách cách ly tài liệu: Dễ dàng bật các tính năng mạnh mẽ trên web.
Ed25519 trong Web Cryptography
Tính năng này bổ sung khả năng hỗ trợ cho các thuật toán Curve25519 trong Web Cryptography API, cụ thể là thuật toán chữ ký Ed25519
Ghi nhật ký và báo cáo địa chỉ IP
Chrome Enterprise đang nâng cao khả năng giám sát an ninh và ứng phó 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 cho 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 của 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 JavaScript Promise
JavaScript Promise Integration (JSPI) là một API cho phép các ứng dụng WebAssembly tích hợp với JavaScript Promise. Nó cho phép một chương trình WebAssembly hoạt động như trình tạo của một 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 dùng JSPI để gọi một API dựa trên Promise (JavaScript), mã WebAssembly sẽ bị tạm ngưng; và người gọi ban đầu đến chương trình WebAssembly sẽ nhận được một Promise sẽ được thực hiện khi chương trình WebAssembly cuối cùng hoàn tất.
Language Detector API
Language Detector API là một JavaScript API giúp 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, Language Detector API sẽ trả về một danh sách có thứ tự gồm các ngôn ngữ được phát hiện, cùng với điểm số độ tin cậy cho từng kết quả.
Ngoài ra, nhà phát triển có thể truyền vào danh sách các ngôn ngữ đầu vào dự kiến khi tạo một thực thể Language Detector để giúp tối ưu hoá cho các trường hợp sử dụng mà hoạt động phát hiện dự kiến sẽ được thực 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ố số thực trên SVGMatrix, SVGRect và SVGPoint
Khi đặt các thuộc tính hoặc đối số số thực trên SVGMatrix, SVGRect và SVGPoint, giờ đây, bạn không thể đặt các thuộc tính hoặc đối số này 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 2 phương thức API mới cho Selection API:
Selection.directiontrả về hướng của vùng chọn dưới dạng"none","forward"hoặc"backward"Selection.getComposedRanges()trả về danh sách gồm 0 hoặc 1 "composed" (được tạo thành)StaticRange
StaticRange "được tạo" được phép vượt qua ranh giới bóng, điều mà các Phạm vi thông thường không thể làm được.
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 "định phạm vi lại" để nằm bên ngoài cây đó. Điều này giúp đảm bảo chúng ta không để lộ các cây bóng không xác định.
Tiện ích phạm vi ứng dụng web
Thêm một 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 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 tệp cấu hình .well-known/web-app-origin-association.
{
"https://sample-app.com/": {
"scope": "/"
}
}
Gợi ý về 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 chỉ dẫn 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 phù hợp hơn về bố cục mã (cải thiện số lượt truy cập vào bộ nhớ đệm lệnh) và việc phân bổ thanh ghi.
WebGPU: GPUTextureView để liên kết externalTexture
Giờ đây, bạn có thể dùng GPUTextureView cho một 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 một phương thức nạp chồng mới với các tham số kích thước và độ lệch 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 nguồn gốc mới 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 chặn hiển thị mới có tốc độ khung hình đầy đủ vào các thuộc tính chặn. Khi 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 iframe chưa được kết xuất
Thêm chính sách về 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 nghe nhìn của iframe được nhúng chưa được kết xuất – tức là có thuộc tính "display" được đặt thành "none". Đ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ả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.
Rewriter API
Rewriter API chuyển đổi và diễn đạt lại văn bản đầu vào theo những 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 để loại bỏ những nội dung dư thừa trong văn bản nhằm đáp ứng giới hạn từ, diễn đạt lại thông điệp cho phù hợp với đối tượng mục tiêu hoặc mang 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 bài đăng hoặc bài viết để sử dụng từ ngữ và khái niệm đơn giản hơn, v.v.
Writer API
Bạn có thể dùng Writer API để viết tài liệu mới dựa trên lời nhắc về nhiệm vụ viết, được hỗ trợ bởi một mô hình ngôn ngữ AI trên thiết bị. Nhà phát triển sẽ 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à nhược điểm thành chế độ xem đầy đủ, v.v.