Chrome 150 beta

Rachel Andrew

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

Trừ phi có ghi chú khác, những thay đổi sau đây áp dụng cho bản phát hành mới nhất của kênh Chrome beta 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 đang ở giai đoạn thử nghiệm 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 Cửa hàng Google Play cho Android.

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

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

Bạn có thể 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 dáng giống như ứng dụng cho nội dung trên web trong những ngữ 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 sử dụng một ứng dụng web đã cài đặt trên hồ sơ ban đầu để xem màu nhấn của 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 polygon() CSS. Nhà phát triển có thể chỉ định 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 trong 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 chế độ thu phóng để điều chỉnh tỷ lệ 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 tỷ lệ dựa trên phép biến đổi hiện có.

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

Các hàm url() của CSS chấp nhận các đố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 giá trị 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 ngay từ CSS mà không yêu cầu thay đổi đối với mã đá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 tỷ lệ cỡ chữ của các nút văn bản sao cho vừa khít với chiều rộng của hộp chứa.

Thuộc tính này giúp nhà phát triển đảm bảo tiêu đề hoặc nội dung động lấp đầy khoảng trống theo chiều ngang mà không cần tính toán kích thước phông chữ theo cách thủ công hoặc sử dụng 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.

CSS background-clip: border-area

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 cắt nền của một phần tử vào vùng được vẽ bằng các 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 đường 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 đơn sắc từ bất kỳ màu nào. Cú pháp là: image() = image( <color> ).

CSS light-dark() 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 quy cách 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 con

Chúng tôi sẽ thực hiện một số thay đổi nhỏ đố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 các bước chèn, xoá hoặc di chuyển để khắc phục các vấn đề về 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 vi tác vụ.

Các 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 có ít nhất một truy vấn trùng khớp.

Khả năng này giúp bạn có thể sử dụng các truy vấn dự phòng cho những tính năng không được hỗ trợ trong tất cả cá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 số 4 cạnh của tờ giấy mà máy 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 các 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ể dùng bộ mô tả CSS page-margin-safety để tránh những 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 kết hợp tính năng điều hướng bằng phím mũi tên, một điểm dừng phím tab được đảm bảo và bộ nhớ được lấy tiêu điểm lần cuối, thay thế các tập lệnh roving tabindex đượ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ả của phần tử đa phương tiện

Các giả lớp 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 trọng tâm của Interop 2026.

popover=hint thay đổi về hành vi

Thay đổi này triển khai một mô hình xếp chồng đã được sửa đổi và đơn giản hoá cho thuộc tính popover=hint và các hoạt động tương tác của thuộc tính này với popover=auto. Trước đây, các hoạt động 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. Chú thích chỉ bị ẩn khi popover=auto tổ tiên của chú thích bị ẩn hoặc khi một popover=auto mới, không liên quan được mở. Ngoài ra, các nhà phát triển có thể lồng một cửa sổ bật lên tự động vào bên trong một cửa sổ bật lên gợi ý một cách an toàn; thay vì đưa ra một ngoại lệ hoặc làm gián đoạn ngăn xếp, popover=auto được lồng sẽ giảm cấp một cách duyên dáng và hoạt động như một popover=hint. Khả năng này cho phép nhà phát triển đặt một <select> có thể tuỳ chỉnh 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 từ bê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 có thể xảy ra, nhưng không phải tất cả. Thay đổi này sẽ cải tiến cơ chế dùng để phát hiện những trường hợp này nhằm đưa ra InvalidStateError một cách đáng tin cậy hơn cho tất cả những trường hợp như vậy. Thay đổi này đảm bảo rằng việc quản lý trạng thái của cửa sổ bật lên vẫn ổn định và ngăn chặn các lỗi lặp lại.

Những thay đổi này được thúc đẩy bởi các cuộc thảo luận về tiêu chuẩn với Mozilla về yêu cầu kéo đặc 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 để tạo ra 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 đó. Hiện tại, các nhà phát triể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 dùng cùng một màu nhưng có độ mờ khác nhau. Hàm alpha() CSS Color 5 giữ nguyên các thành phần màu gốc và chỉ thay đổi alpha, giúp giảm chi phí soạn thảo và giúp các mã màu dễ dàng được sử dụng lại và duy trì hơn.

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 đườ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 CSS @supports

Hàm named-feature() cho phép các quy tắc @supports CSS truy vấn một nhóm nhỏ các tính năng cụ thể được đặt tên mà 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 hai hiệu ứng độc lập: lan truyền thao tác cuộn và hiệu ứng đường viền cục bộ. Ví dụ: hiệu ứng kéo giãn khi cuộn quá mức.

• none: không có hiệu ứng lan truyền khi cuộn, không có hiệu ứng đường viền cục bộ.
• auto: lan truyền thao tác cuộn, hiệu ứng ranh giới cục bộ.
• contain: không có hiệu ứng lan truyền khi di chuyển, hiệu ứng đườ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 bộ giá trị: chain: lan truyền thao tác cuộn, không có hiệu ứng ranh giới 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 dài và dịch. Tuy nhiên, thao tác cuộn sau đó sẽ liên kết với phần tử mẹ.

Web API

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 việc áp dụng bộ lọc Đồ họa vectơ có thể mở rộng (SVG) cho các iFrame nhiều nguồn gốc hoặc bị hạn chế (ví dụ: iFrame chạy trong môi trường hộp cát) và các trình bổ trợ được nhúng (ví dụ: PDF). Khi một khung hình 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 qua để tìm tổ tiên cao nhất không có bộ lọc SVG và hiệu ứng đó sẽ được áp dụng thay thế.

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ế việc triển khai trước đó sử dụng kết hợp LevelDB và tệp phẳng. Thay đổi này không ảnh hưởng đến Web API.

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

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

MediaStreamTrackProcessor bộ đếm khung hình

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 giám sát trạng thái của 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 được và loại bỏ.

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ý URL data:. 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, các trình xử lý này được chỉ định một nguồn gốc duy nhất, không rõ ràng.

Thay đổi này tuân theo 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 trình 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, những worker này vẫn nằm trong cùng một phân vùng lưu trữ (ví dụ: bằng cách giữ lại trang web cấp cao nhất hoặc số chỉ dùng một lần) với trình tạo của chúng.

Chế độ điều chỉnh bảo mật này được bật theo mặc định trên 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ấu hình tập trung. Để 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ề quy cách, hãy xem Bước 3 trong phần Chế độ cài đặt worker theo tiêu chuẩn HTML Living Standard.

Di chuyển nguồn gốc PWA

Khi người dùng cài đặt mộ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. Việc liên kết này gây ra một thách thức đáng kể cho những 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 một PWA đã cài đặt sang một nguồn gốc mới trên cùng một trang web, duy trì sự tin tưởng và các 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 của 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 quy trình di chuyển cho người dùng khi quản trị viên doanh nghiệp buộc cài đặt một ứng dụng, mà 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 chỉ thị 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ể dùng các chỉ thị này để biểu thị các dải cần phát trực tuyến hoặc làm nổi bật mà không cần đến các phần tử DOM mới và thay đổi cấu trúc DOM theo như CSS, hoặc làm 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 truyền phát không theo thứ tự cho phép bạn sử dụng <template for> và các dải chỉ dẫn 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

Khả năng này cung cấp một tín hiệu đáng tin cậy cho trạng thái hoàn thành của một 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 phân giải khi hoàn tất thao tác cuộn và giá trị được phân giải 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à phương thức setImmediateData() trên các bộ mã hoá đường truyền kết xuất, đường truyền tính toán và gói kết xuất, cho phép truyền trực tiếp một lượng nhỏ dữ liệu thường xuyên được cập nhật đến các chương 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 những ứng dụng cần cập nhật các thông số cho 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 cho mỗi hàm 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ý vùng đệm và nhóm liên kết.

Web Speech API: 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.

Liệt kê 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. Khả 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 độ rủi ro cao (chẳng hạn như bản chép lời cuộc họp) hay họ cần quay lại các dịch vụ đám mây, 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 các thử nghiệm 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ã hoá về quyền sở hữu một cách liền mạch thay vì nhập 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 quy trình không dùng nữa và xoá sau đây.

Xoá [LegacyNoInterfaceObject] khỏi IDL FontFaceSet

Trước đây, IDL FontFaceSet của Chromium đã sử dụng [LegacyNoInterfaceObject] không chính xác, ẩn FontFaceSet dưới dạng một thuộc tính chung 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 quy cách Tải phông chữ CSS và khác với hành vi của Safari và Firefox.

Thao tá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 chung. 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ẽ ném TypeError: Illegal constructor một cách chính xác, khớp với hành vi bắt buộc theo quy cách.