Chrome 150 beta

Rachel Andrew

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

Trừ phi có ghi chú khác, những thay đổi sau đây sẽ á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 đang ở giai đoạn beta kể từ ngày 2 tháng 6 năm 2026. Bạn có thể tải phiên bản mới nhất xuống trên Google.com cho máy tính hoặc trên Google Play Store trên Android.

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

Màu hệ thống AccentColor và AccentColorText

Bạn có thể sử dụng màu hệ thống AccentColor và AccentColorText trong CSS để truy cập vào màu nhấn hệ thống được chỉ định trên thiết bị của người dùng. Tính năng này cho phép nhà phát triển áp dụng kiểu giống như ứng dụng cho nội dung web của họ trong các bối cảnh mà người dùng mong đợi tính năng tích hợp giao diện hệ điều hành, chẳng hạn như một ứng dụng web đã cài đặt. Người dùng phải ở trong một ứng dụng web đã cài đặt trên hồ sơ ban đầu để thấy màu nhấn hệ thống được kết xuất.

Cho phép tham số làm tròn không bắt buộc cho polygon()

Cho phép bạn chỉ định một tham số làm tròn góc không bắt buộc trong hàm hình dạng CSS polygon(). Nhà phát triển có thể chỉ định một giá trị độ dài để làm tròn các góc đa giác mà không cần tính toán đường cong bezier theo cách thủ công.

Thu phóng có thể tạo ảnh động

Thuộc tính zoom của CSS có thể tạo ảnh động và nội suy dưới dạng <number>. Nhà phát triển có thể chuyển đổi và tạo ảnh động cho tính năng thu phóng để điều chỉnh các phần tử và bố cục của chúng một cách mượt mà, bổ sung cho tính năng điều chỉnh dựa trên phép biến đổi hiện có.

Đối tượng sửa đổi yêu cầu URL CSS

Các hàm url() của CSS chấp nhận đối tượng sửa đổi yêu cầu không bắt buộc sau chuỗi URL được trích dẫn: cross-origin(), integrity() và referrer-policy(). Các đối tượng sửa đổi này kiểm soát hành vi tìm nạp của tài nguyên được tham chiếu trực tiếp từ CSS mà không cần thay đổi đánh dấu HTML hoặc JavaScript.

Ví dụ: background-image: url("image.png" cross-origin(anonymous)) tìm nạp hình ảnh bằng chế độ ẩn danh CORS.

Thuộc tính text-fit của CSS

Điều chỉnh kích thước phông chữ của các nút văn bản cho vừa với chiều rộng của hộp chứa.

Thuộc tính này cho phép nhà phát triển đảm bảo tiêu đề hoặc nội dung động lấp đầy khoảng trống ngang hiện có mà không cần tính toán kích thước phông chữ theo cách thủ công hoặc các giải pháp phức tạp bằng JavaScript. Thuộc tính này cung cấp một giải pháp mạnh mẽ, gốc CSS cho kiểu chữ thích ứng, duy trì sự căn chỉnh trực quan trên nhiều kích thước màn hình và độ dài văn bản khác nhau.

background-clip: border-area của CSS

Triển khai giá trị border-area cho thuộc tính background-clip của CSS, như được xác định trong CSS Backgrounds Level 4. Giá trị background-clip sẽ cắt nền của một phần tử theo vùng được vẽ bằng nét viền, có tính đến border-width và border-style trong khi bỏ qua độ trong suốt từ border-color. Giá trị này cho phép bạn tạo viền chuyển màu mà không cần border-image.

Hàm image(<color>) của CSS

Hàm image() cho phép nhà phát triển tạo hình ảnh có màu đồng nhất từ bất kỳ màu nào. Cú pháp là: image() = image( <color> ).

light-dark() của CSS với các giá trị hình ảnh

Mở rộng hàm light-dark() của CSS để chấp nhận các giá trị hình ảnh, chẳng hạn như url(), image-set() và none trong biểu định kiểu của tác giả, cho phép các thuộc tính hình ảnh như background-image, list-style-image, border-image-source, cursor và content tự động chuyển đổi giữa các hình ảnh dựa trên bảng phối màu mà người dùng ưu tiên. Trước đây, hành vi này chỉ được phép trong biểu định kiểu của Tác nhân người dùng. Thay đổi này phù hợp với thông số kỹ thuật CSS Color 5 và khớp với cách triển khai hiện có của Firefox.

Sao chép vào tất cả các phần tử selectedcontent hậu duệ

Một số thay đổi nhỏ đang được thực hiện đối với các trường hợp đặc biệt của phần tử selectedcontent:

• Khi nhiều phần tử selectedcontent được đặt trong một phần tử <select> cùng một lúc, tất cả các phần tử đó đều được cập nhật thay vì chỉ phần tử đầu tiên theo thứ tự DOM.
• Việc cập nhật phần tử selectedcontent sẽ bị hoãn lại khi phần tử này chạy trong quá trình chèn, xoá hoặc di chuyển các bước để khắc phục vấn đề bảo mật. Quá trình cập nhật sẽ bị hoãn lại bằng cách sử dụng các bước sau khi chèn hoặc các tác vụ vi mô.

Truy vấn vùng chứa được phân tách bằng dấu phẩy

Hỗ trợ nhiều truy vấn cho mỗi quy tắc @container. Quy tắc @container sẽ áp dụng nếu ít nhất một trong các truy vấn khớp.

Tính năng này giúp bạn có thể truy vấn dự phòng cho các tính năng không được hỗ trợ trong tất cả trình duyệt, chẳng hạn như.

Ví dụ:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

Cùng với việc hỗ trợ nhiều truy vấn, mô hình đối tượng được mở rộng để hỗ trợ thuộc tính conditions trên API CSSContainerRule.

Hiển thị các vùng không in được cho CSS

Máy in thường có một vùng nhỏ ở mỗi trong 4 cạnh của một tờ giấy mà chúng không thể đánh dấu một cách đáng tin cậy, thường là do cơ chế xử lý giấy của máy in. Lề trang mặc định dự kiến sẽ lớn hơn các vùng này, nhưng nếu tác giả tự đặt lề và thậm chí muốn thêm hộp lề @page, chẳng hạn như cho tiêu đề và chân trang tuỳ chỉnh, thì họ cần một cách để xác định vị trí in an toàn.

Bạn có thể sử dụng bộ mô tả CSS page-margin-safety để tránh các vùng không in được như vậy.

Thuộc tính focusgroup

Cho phép tác giả khai báo cung cấp cho các tiện ích tổng hợp tính năng di chuyển bằng phím mũi tên, một điểm dừng thẻ được đảm bảo và bộ nhớ được tập trung gần đây nhất, thay thế các tập lệnh tabindex di chuyển được mã hoá thủ công. Ví dụ:

<div focusgroup="toolbar wrap" aria-label="Formatting">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

Lớp giả phần tử nội dung nghe nhìn

Các lớp giả CSS :playing, :paused, :seeking, :buffering, :stalled, :muted, và :volume-locked khớp với các phần tử <audio> và <video> dựa trên trạng thái của chúng.

Tính năng này là một trong những lĩnh vực trọng tâm trong Interop 2026.

Thay đổi hành vi popover=hint

Thay đổi này triển khai một mô hình xếp chồng đã sửa đổi và đơn giản hoá cho thuộc tính popover=hint và các tương tác của thuộc tính này với popover=auto. Trước đây, các tương tác giữa hai loại cửa sổ bật lên này có thể phức tạp trong một số trường hợp đặc biệt, chẳng hạn như lồng popover=auto bên trong popover=hint và có thể dẫn đến hành vi không mong muốn. Theo mô hình mới, việc mở popover=hint sẽ không vô tình đóng các phần tử popover=auto không liên quan nữa. Cửa sổ bật lên gợi ý chỉ bị ẩn khi popover=auto tổ tiên của chúng bị ẩn hoặc khi một popover=auto mới, không liên quan được mở. Ngoài ra, nhà phát triển có thể lồng một cửa sổ bật lên tự động bên trong một cửa sổ bật lên gợi ý một cách an toàn; thay vì gửi một ngoại lệ hoặc làm hỏng ngăn xếp, popover=auto lồng sẽ hạ cấp một cách linh hoạt và hoạt động như một popover=hint. Tính năng này cho phép nhà phát triển đặt một <select> trong một popover=hint.

Để cải thiện hơn nữa khả năng dự đoán và ngăn chặn các đột biến trạng thái phức tạp, Chrome cũng đang thắt chặt hành vi mở và đóng cửa sổ bật lên trong sự kiện beforetoggle. Trước đây, có các biện pháp bảo vệ cho một số trường hợp, nhưng không phải tất cả các trường hợp có thể xảy ra. Thay đổi này sẽ cải tiến cơ chế dùng để phát hiện các trường hợp này nhằm gửi InvalidStateError một cách đáng tin cậy hơn cho tất cả các trường hợp như vậy. Thay đổi này đảm bảo rằng tính năng quản lý trạng thái cửa sổ bật lên vẫn ổn định và ngăn chặn các lỗi nhập lại vòng lặp.

Những thay đổi này được thúc đẩy bởi các cuộc trò chuyện về tiêu chuẩn với Mozilla về yêu cầu kéo thông số kỹ thuật HTML trên GitHub.

Màu alpha tương đối

Màu alpha tương đối cung cấp một cách trực tiếp bằng CSS để lấy phiên bản mờ của một màu hiện có mà không cần viết lại các kênh màu của màu đó. Nhà phát triển hiện cần sao chép các giá trị thành phần hoặc tạo các mã thông báo được tính toán trước riêng biệt khi họ muốn cùng một màu với độ mờ khác nhau. Hàm alpha() của CSS Color 5 giữ nguyên các thành phần màu ban đầu và chỉ thay đổi alpha, giúp giảm chi phí viết và giúp các mã thông báo màu dễ dàng tái sử dụng và duy trì hơn.

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

Cho phép các trang web chọn tham gia vào iframe có kích thước thích ứng, điều chỉnh kích thước phần tử <iframe> trong tài liệu mẹ theo kích thước tràn bố cục của tài liệu iframe để tránh cuộn trong tài liệu con.

flex-wrap:balance

flex-wrap:balance cho phép nhà phát triển phân phối nội dung giữa các dòng linh hoạt để nội dung đó xuất hiện cân bằng hơn, tương tự như text-wrap:balance.

Hàm named-feature() cho @supports của CSS

Hàm named-feature() cho phép các quy tắc @supports của CSS truy vấn một nhóm nhỏ các tính năng cụ thể được đặt tên mà bạn không thể kiểm thử bằng các cơ chế @supports khác nhưng được coi là rất có giá trị để kiểm thử.

overscroll-behavior: chain

overscroll-behavior có 3 giá trị: none, auto và contain. Các giá trị này ảnh hưởng đến 2 hiệu ứng độc lập: lan truyền cuộn và hiệu ứng viền cục bộ. Ví dụ: hiệu ứng kéo giãn khi cuộn quá mức.

• none: không lan truyền cuộn, không có hiệu ứng viền cục bộ.
• auto: lan truyền cuộn, hiệu ứng viền cục bộ.
• contain: không lan truyền cuộn, hiệu ứng viền cục bộ.

Bản phát hành này theo dõi một giá trị mới để hoàn tất tập hợp: chain: lan truyền cuộn, không có hiệu ứng viền cục bộ.

Giá trị này hữu ích cho các hiệu ứng như trình đơn bên được triển khai dưới dạng trình cuộn. Bạn có thể đưa trình đơn vào và khi trình đơn chạm vào cạnh, trình đơn sẽ không cuộn quá mức hoặc kéo giãn và dịch. Tuy nhiên, sau đó, thao tác cuộn sẽ liên kết với đối tượng cấp trên.

API web

Tắt bộ lọc SVG trên các trình bổ trợ và iframe nhiều nguồn gốc hoặc bị hạn chế

Chrome 150 ngăn không cho các bộ lọc Đồ hoạ vectơ có thể mở rộng (SVG) được áp dụng cho các iFrame nhiều nguồn gốc hoặc bị hạn chế, ví dụ: các iFrame chạy trong môi trường hộp cát và các trình bổ trợ được nhúng, ví dụ: tệp PDF. Khi một khung hoặc trình bổ trợ được vẽ bằng hiệu ứng bộ lọc SVG, cây hiệu ứng sẽ được duyệt để tìm tổ tiên cao nhất không có bộ lọc SVG và hiệu ứng đó sẽ được áp dụng.

IndexedDB: phần phụ trợ SQLite

Việc triển khai IndexedDB của Chromium được viết lại trên SQLite để thay thế cách triển khai trước đó sử dụng kết hợp LevelDB và các tệp phẳng. Thay đổi này không ảnh hưởng đến API web.

Việc viết lại này dự kiến sẽ cải thiện độ tin cậy và ở mức độ thấp hơn, hiệu suất.

Hiện tại, thay đổi này áp dụng cho các kho lưu trữ dữ liệu mới. Thay đổi này là bước 2 của bản phát hành tiến bộ nhiều giai đoạn. Hãy xem trang tính năng ChromeStatus cho các ngữ cảnh trong bộ nhớ SQLite theo dõi bước 1.

Bộ đếm khung MediaStreamTrackProcessor

Thêm các thuộc tính discardedFrames và totalFrames vào giao diện MediaStreamTrackProcessor. Các bộ đếm này cho phép nhà phát triển web theo dõi tình trạng của các quy trình xử lý nội dung nghe nhìn bằng cách theo dõi số lượng khung hình mà bộ xử lý nhận và bỏ qua.

Nguồn gốc không rõ ràng cho URL data:

Chrome 150 cập nhật cách DedicatedWorker và SharedWorker xử lý data: URL. Thay vì tự động kế thừa nguồn gốc bảo mật của tập lệnh hoặc trang đã tạo chúng, các trình chạy này được chỉ định một nguồn gốc không rõ ràng duy nhất.

Thay đổi này phù hợp với thông số kỹ thuật HTML của trình chạy và tăng cường tính bảo mật bằng cách tách biệt các trình chạy này khỏi trạng thái cùng nguồn gốc của người tạo, ngăn chúng truy cập vào dữ liệu nhạy cảm thông qua các cơ chế như BroadcastChannel hoặc bộ nhớ cùng nguồn gốc. Để duy trì ranh giới cách ly chính xác, các trình chạy này vẫn nằm trong cùng một phân vùng bộ nhớ (ví dụ: bằng cách giữ lại trang web cấp cao nhất hoặc nonce) như người tạo chúng.

Điều chỉnh bảo mật này được bật theo mặc định trên các nền tảng máy tính và thiết bị di động. Quản trị viên có thể xem xét hoặc xác minh ranh giới bảo mật thông qua các cấu hình tập trung của họ. Để biết thông tin chi tiết về cách triển khai kỹ thuật và tài liệu tham khảo về thông số kỹ thuật, hãy xem Bước 3 trong phần Cài đặt trình chạy theo Tiêu chuẩn HTML đang hoạt động.

Di chuyển nguồn gốc PWA

Khi người dùng cài đặt Ứng dụng web tiến bộ (PWA), danh tính và bối cảnh bảo mật của ứng dụng đó sẽ được liên kết chặt chẽ với nguồn gốc trang web của ứng dụng, ví dụ: app.example.com. Liên kết này gây ra một thách thức đáng kể cho các nhà phát triển cần thay đổi nguồn gốc của PWA do đổi mới thương hiệu, tái cấu trúc miền hoặc tái cấu trúc kỹ thuật. Thay đổi như vậy buộc người dùng phải gỡ cài đặt ứng dụng cũ theo cách thủ công và cài đặt lại ứng dụng mới, dẫn đến trải nghiệm gián đoạn và có thể mất số người dùng ngừng sử dụng. Chrome 150 giới thiệu một cơ chế để nhà phát triển di chuyển PWA đã cài đặt sang một nguồn gốc mới, cùng trang web, duy trì sự tin cậy và quyền của người dùng.

Chính sách WebAppInstallForceList chặn quá trình di chuyển. Vì các chính sách dành cho doanh nghiệp về ứng dụng web chủ yếu dựa trên URL và nguồn gốc, nên có nguy cơ quá trình di chuyển có thể bỏ qua một số chính sách mà quản trị viên có thể đã định cấu hình. Chrome không cung cấp quá trình di chuyển cho người dùng khi ứng dụng được quản trị viên doanh nghiệp cài đặt bắt buộc và thay vào đó sẽ hiển thị một biểu ngữ giải thích điều này cho người dùng.

Phân tích cú pháp các lệnh xử lý trong HTML

Lệnh xử lý (cú pháp: <?target data>) là một cấu trúc DOM hiện có, được hiển thị trong XML, cho phép các đối tượng nút không phải là phần tử nhưng có thể có một số ý nghĩa ngữ nghĩa để xử lý tài liệu.

Ví dụ: bạn có thể sử dụng các lệnh này để biểu thị các phạm vi phát trực tuyến hoặc làm nổi bật mà không cần các phần tử DOM mới và thay đổi cấu trúc DOM theo CSS hoặc dưới dạng chỉ thị cho trình phân tích cú pháp HTML về cách đệm và phát trực tuyến.

Phát trực tuyến không theo thứ tự

Tính năng phát trực tuyến không theo thứ tự cho phép bạn sử dụng <template for> và các phạm vi lệnh xử lý (<?start> và <?end>) để phân phối HTML theo thứ tự không tuần tự và cập nhật các phần hiện có của tài liệu mà không cần JavaScript.

Lời hứa cuộn có lập trình

Tính năng này cung cấp một tín hiệu đáng tin cậy cho trạng thái hoàn tất của thao tác cuộn mượt có lập trình. Tất cả các phương thức cuộn trong Element và Window đều trả về các đối tượng Promise được giải quyết khi hoàn tất thao tác cuộn và giá trị đã giải quyết cho biết thao tác cuộn có bị gián đoạn hay không.

WebGPU Immediates

Thêm một không gian địa chỉ tức thì mới trong WGSL và một phương thức setImmediateData() trên đường kết xuất, đường tính toán và bộ mã hoá gói kết xuất cho phép truyền một lượng nhỏ dữ liệu được cập nhật thường xuyên trực tiếp đến trình đổ bóng mà không cần tạo các đối tượng bộ đệm GPU hoặc nhóm liên kết. Điều này đặc biệt hữu ích cho các ứng dụng cần cập nhật các tham số trên mỗi bản vẽ, chẳng hạn như chỉ mục đối tượng, chỉ mục vật liệu hoặc ma trận biến đổi mỗi lần gọi vẽ, giúp cải thiện đáng kể hiệu suất bằng cách tránh chi phí quản lý bộ đệm và nhóm liên kết.

API Web Speech: Chất lượng nhận dạng trên thiết bị

Mở rộng giao diện SpeechRecognition bằng cách thêm thuộc tính quality vào SpeechRecognitionOptions. Thuộc tính này cho phép nhà phát triển chỉ định khả năng ngữ nghĩa cần thiết để nhận dạng trên thiết bị bằng cách sử dụng processLocally: true.

Enum quality được đề xuất hỗ trợ 3 cấp độ – command, dictation và conversation – tương ứng với độ phức tạp của tác vụ và yêu cầu về phần cứng ngày càng tăng. Tính năng này cho phép nhà phát triển xác định xem thiết bị cục bộ có thể xử lý các trường hợp sử dụng có mức độ quan trọng cao (như phiên âm cuộc họp) hay không hoặc liệu họ có cần quay lại các dịch vụ trên đám mây hay không, giải quyết bản chất không rõ ràng của các khả năng mô hình trên thiết bị.

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

Trong Chrome 150, bạn có thể chọn tham gia vào các bản dùng thử theo nguyên gốc mới sau đây .

Giao thức xác minh email (EVP)

Giao thức xác minh email (EVP) giúp người dùng tạo, truy cập và khôi phục tài khoản bằng cách cung cấp bằng chứng mật mã về quyền sở hữu một cách liền mạch thay vì mã OTP qua email theo cách thủ công.

Ngừng sử dụng và xoá

Bản phát hành Chrome này giới thiệu các tính năng ngừng sử dụng và xoá sau đây.

Xoá [LegacyNoInterfaceObject] khỏi FontFaceSet IDL

IDL FontFaceSet của Chromium trước đây đã sử dụng [LegacyNoInterfaceObject] không chính xác, ẩn FontFaceSet dưới dạng một thuộc tính toàn cục và xoá thuộc tính hàm khởi tạo khỏi nguyên mẫu của nó. Hành vi này khác với thông số kỹ thuật Tải phông chữ CSS và khác với hành vi của Safari và Firefox.

Việc xoá này sẽ xoá [LegacyNoInterfaceObject] khỏi IDL FontFaceSet, giúp FontFaceSet có thể truy cập đúng cách dưới dạng một thuộc tính toàn cục. Vì không có constructor() nào được xác định trong IDL, nên việc gọi FontFaceSet() mới từ JavaScript sẽ gửi TypeError: Illegal constructor một cách chính xác, khớp với hành vi bắt buộc theo thông số kỹ thuật.