Chrome 133 beta

Rachel Andrew

Ngày xuất bản: 15 tháng 1 năm 2024

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 133 đang ở giai đoạn thử nghiệm beta kể từ ngày 15 tháng 1 năm 2024. 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 attr() nâng cao của CSS

Triển khai tính năng mở rộng cho attr() được chỉ định trong CSS cấp 5, cho phép các loại ngoài <string> và sử dụng trong tất cả các thuộc tính CSS (ngoài tính năng hỗ trợ hiện có cho phần tử giả content).

Tìm hiểu thêm trong bài viết CSS attr() được nâng cấp.

Lớp giả lập :open CSS

Lớp giả :open khớp với <dialog> và <details> khi các lớp này ở trạng thái mở, đồng thời khớp với <select> và <input> khi các lớp này ở chế độ có bộ chọn và bộ chọn đang hiển thị.

Truy vấn vùng chứa trạng thái cuộn CSS

Sử dụng truy vấn vùng chứa để tạo kiểu cho các phần tử con của vùng chứa dựa trên trạng thái cuộn của chúng.

Vùng chứa truy vấn là vùng chứa cuộn hoặc một phần tử chịu ảnh hưởng của vị trí cuộn của vùng chứa cuộn. Bạn có thể truy vấn các trạng thái sau:

  • stuck: Vùng chứa được đặt cố định được gắn vào một trong các cạnh của hộp cuộn.
  • snapped: Vùng chứa được căn chỉnh tính năng chụp nhanh cuộn hiện đang được chụp nhanh theo chiều ngang hoặc dọc.
  • scrollable: Liệu có thể cuộn vùng chứa cuộn theo hướng đã truy vấn hay không.

container-type: scroll-state mới cho phép truy vấn các vùng chứa.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

Tìm hiểu thêm trong phần scroll-state() CSS.

text-box, text-box-trim và text-box-edge của CSS

Để đạt được sự cân bằng tối ưu của nội dung văn bản, các thuộc tính text-box-trim và text-box-edge, cùng với thuộc tính viết tắt text-box, giúp bạn kiểm soát tốt hơn việc căn chỉnh theo chiều dọc của văn bản.

Thuộc tính text-box-trim chỉ định các cạnh cần cắt, ở trên hoặc ở dưới, còn thuộc tính text-box-edge chỉ định cách cắt cạnh.

Các thuộc tính này cho phép bạn kiểm soát khoảng cách dọc một cách chính xác bằng cách sử dụng các chỉ số phông chữ. Tìm hiểu thêm trong phần CSS text-box-trim.

Giá trị hint của thuộc tính popover

API cửa sổ bật lên chỉ định hành vi cho hai giá trị của thuộc tính popover: auto và manual. Tính năng này mô tả giá trị thứ ba là popover=hint. Gợi ý, thường được liên kết với các hành vi thuộc loại "chú giải công cụ", có hành vi hơi khác. Điểm khác biệt chính là hint phụ thuộc vào auto khi mở các ngăn xếp lồng nhau của cửa sổ bật lên. Vì vậy, bạn có thể mở một cửa sổ bật lên hint không liên quan trong khi ngăn xếp hiện có của các cửa sổ bật lên auto vẫn mở.

Ví dụ chuẩn là bộ chọn <select> đang mở (popover=auto) và chú giải công cụ được kích hoạt bằng thao tác di chuột (popover=hint) sẽ hiển thị. Thao tác đó không đóng bộ chọn <select>.

Cải thiện trình gọi cửa sổ bật lên và vị trí neo

Thêm một cách bắt buộc để thiết lập mối quan hệ của phương thức gọi giữa các cửa sổ bật lên bằng popover.showPopover({source}). Cho phép các mối quan hệ của phương thức gọi tạo tham chiếu phần tử neo ngầm ẩn.

Cửa sổ bật lên lồng trong trình gọi không được gọi lại

Trong trường hợp sau, việc nhấp vào nút sẽ kích hoạt đúng cách cửa sổ bật lên, tuy nhiên, việc nhấp vào chính cửa sổ bật lên sau đó sẽ không đóng cửa sổ bật lên.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

Trước đây, điều này xảy ra vì bong bóng nhấp vào cửa sổ bật lên chuyển đến <button> và kích hoạt trình gọi, giúp bật/tắt cửa sổ bật lên. Hành vi này hiện đã được thay đổi thành hành vi dự kiến.

API web

Animation.overallProgress

Cung cấp cho nhà phát triển thông tin trình bày thuận tiện và nhất quán về mức độ tiến triển của ảnh động trong các lần lặp lại, bất kể bản chất của tiến trình đó. Nếu không có thuộc tính overallProgress, bạn cần tính toán theo cách thủ công mức độ tiến triển của ảnh động, tính đến số lần lặp lại của ảnh động và liệu currentTime của ảnh động có phải là tỷ lệ phần trăm tổng thời gian (như trong trường hợp ảnh động do cuộn) hay một lượng thời gian tuyệt đối (như trong trường hợp ảnh động do thời gian) hay không.

Phương thức pause() của đối tượng Atomics

Thêm phương thức pause() vào đối tượng không gian tên Atomics để gợi ý cho CPU rằng mã hiện tại đang thực thi một spinlock.

Báo cáo hàm băm CSP cho tập lệnh

Các ứng dụng web phức tạp thường cần theo dõi các tài nguyên phụ mà chúng tải xuống, vì mục đích bảo mật.

Cụ thể, các tiêu chuẩn và phương pháp hay nhất sắp tới của ngành (ví dụ: PCI-DSS phiên bản 4) yêu cầu các ứng dụng web phải lưu giữ khoảng không quảng cáo của tất cả các tập lệnh mà chúng tải xuống và thực thi.

Tính năng này được xây dựng dựa trên CSP và API Báo cáo để báo cáo URL và hàm băm (dành cho CORS/cùng nguồn gốc) của tất cả tài nguyên tập lệnh mà tài liệu tải.

Di chuyển giữ nguyên trạng thái DOM

Thêm một phần tử DOM gốc (Node.prototype.moveBefore) cho phép bạn di chuyển các phần tử xung quanh cây DOM mà không cần đặt lại trạng thái của phần tử.

Khi di chuyển thay vì xoá và chèn, trạng thái sau đây sẽ được giữ nguyên:

  • Các phần tử <iframe> vẫn được tải.
  • Phần tử đang hoạt động vẫn là tiêu điểm.
  • Cửa sổ bật lên, toàn màn hình và hộp thoại phương thức vẫn mở.
  • Hiệu ứng chuyển đổi và ảnh động CSS tiếp tục.

Hiển thị thuộc tính attributionsrc trên <area>

Điều chỉnh mức độ hiển thị của thuộc tính attributionsrc trên <area> với hành vi xử lý hiện có của thuộc tính, ngay cả khi thuộc tính đó không được hiển thị.

Ngoài ra, bạn nên hỗ trợ thuộc tính trên <area> vì phần tử đó là một nền tảng điều hướng hạng nhất và Chrome đã hỗ trợ thuộc tính này trên các nền tảng khác của <a> và window.open

Hiển thị renderTime trên nhiều nguồn gốc thô trong thời gian phần tử và LCP (bất kể Timing-Allow-Origin)

Thời gian của phần tử và mục nhập LCP có thuộc tính renderTime, được căn chỉnh với khung đầu tiên mà hình ảnh hoặc văn bản được vẽ.

Thuộc tính này hiện được bảo vệ cho hình ảnh trên nhiều nguồn bằng cách yêu cầu tiêu đề Timing-Allow-Origin trên tài nguyên hình ảnh. Tuy nhiên, bạn có thể dễ dàng khắc phục quy định hạn chế đó (ví dụ: bằng cách hiển thị hình ảnh cùng nguồn gốc và hình ảnh khác nguồn gốc trong cùng một khung).

Vì đây là nguồn gây nhầm lẫn, nên chúng tôi dự định xoá quy định hạn chế này và tăng tất cả thời gian kết xuất thêm 4 ms khi tài liệu không được tách biệt giữa các nguồn gốc. Điều này có vẻ như đủ thô để tránh rò rỉ bất kỳ thông tin hữu ích nào về thời gian giải mã về hình ảnh trên nhiều nguồn gốc.

Giao diện FileSystemObserver

Giao diện FileSystemObserver thông báo cho các trang web về những thay đổi đối với hệ thống tệp. Các trang web quan sát những thay đổi đối với các tệp và thư mục mà người dùng đã cấp quyền trước đó, trong thiết bị cục bộ của người dùng hoặc trong Hệ thống tệp bộ chứa (còn gọi là Hệ thống tệp riêng của nguồn gốc) và được thông báo về thông tin thay đổi cơ bản, chẳng hạn như loại thay đổi.

Lỗi treo khi bật Trình tiết kiệm pin

Khi chế độ Tiết kiệm pin đang hoạt động, Chrome sẽ đóng băng một "nhóm ngữ cảnh duyệt web" đã bị ẩn và tắt trong hơn 5 phút nếu bất kỳ nhóm con nào của các khung cùng nguồn gốc trong đó vượt quá ngưỡng sử dụng CPU, trừ phi nhóm đó:

  • Cung cấp chức năng hội nghị âm thanh hoặc video (được phát hiện bằng cách xác định micrô, máy ảnh hoặc tính năng quay màn hình/cửa sổ/thẻ hoặc RTCPeerConnection có RTCDataChannel "mở" hoặc MediaStreamTrack "trực tiếp").
  • Kiểm soát một thiết bị bên ngoài (được phát hiện khi sử dụng WebUSB, Web Bluetooth, WebHID hoặc Web Serial).
  • Giữ Khoá web hoặc kết nối IndexedDB chặn bản cập nhật phiên bản hoặc giao dịch trên một kết nối khác.

Việc đóng băng bao gồm việc tạm dừng quá trình thực thi. API này được xác định chính thức trong API Vòng đời trang.

Ngưỡng sử dụng CPU sẽ được điều chỉnh để đóng băng khoảng 10% số thẻ ở chế độ nền khi Trình tiết kiệm pin đang hoạt động.

Nhiều bản đồ nhập

Bản đồ nhập hiện phải tải trước mọi mô-đun ES và mỗi tài liệu chỉ có thể có một bản đồ nhập. Điều đó khiến chúng dễ bị hỏng và có thể chậm khi sử dụng trong các tình huống thực tế: Mọi mô-đun tải trước chúng đều làm hỏng toàn bộ ứng dụng và trong các ứng dụng có nhiều mô-đun, chúng trở thành một tài nguyên chặn lớn, vì toàn bộ bản đồ cho tất cả mô-đun có thể cần tải trước.

Tính năng này cho phép nhiều bản đồ nhập cho mỗi tài liệu, bằng cách hợp nhất các bản đồ đó theo cách nhất quán và có thể xác định.

Tiêu đề truy cập bộ nhớ

Cung cấp một cách thay thế để các phần nhúng đã xác thực chọn sử dụng cookie không phân vùng. Các tiêu đề này cho biết liệu cookie chưa được phân vùng có (hoặc có thể) được đưa vào một yêu cầu mạng nhất định hay không, đồng thời cho phép máy chủ kích hoạt các quyền "truy cập bộ nhớ" mà chúng đã được cấp. Việc cung cấp một cách khác để kích hoạt quyền "truy cập bộ nhớ" cho phép các tài nguyên không phải iframe sử dụng và có thể giảm độ trễ cho các phần nhúng đã xác thực.

Hỗ trợ tạo ClipboardItem bằng Promise<DOMString>

ClipboardItem (dữ liệu đầu vào cho phương thức write() của bảng nhớ tạm không đồng bộ) hiện chấp nhận các giá trị chuỗi ngoài Blob trong hàm khởi tạo. ClipboardItemData có thể là một Blob, một chuỗi hoặc một Lời hứa phân giải thành một Blob hoặc một chuỗi.

WebAssembly Memory64

Đề xuất về bộ nhớ 64 thêm tính năng hỗ trợ cho bộ nhớ WebAssembly tuyến tính có kích thước lớn hơn 2^32 bit. Phiên bản này không cung cấp hướng dẫn mới mà mở rộng các hướng dẫn hiện có để cho phép chỉ mục 64 bit cho bộ nhớ và bảng.

​​API xác thực web: Phương thức getClientCapabilities() PublicKeyCredential

Phương thức PublicKeyCredential getClientCapabilities() cho phép bạn xác định những tính năng WebAuthn mà ứng dụng của người dùng hỗ trợ. Phương thức này trả về một danh sách các chức năng được hỗ trợ, cho phép nhà phát triển điều chỉnh trải nghiệm xác thực và quy trình làm việc dựa trên chức năng cụ thể của ứng dụng.

WebGPU: Định dạng đỉnh 1 thành phần (và unorm8x4-bgra)

Thêm các định dạng đỉnh bổ sung không có trong bản phát hành đầu tiên của WebGPU do thiếu tính năng hỗ trợ hoặc các phiên bản macOS cũ (không còn được trình duyệt nào hỗ trợ). Định dạng đỉnh 1 thành phần cho phép các ứng dụng chỉ yêu cầu dữ liệu cần thiết, trong khi trước đây, các ứng dụng phải yêu cầu ít nhất gấp đôi dữ liệu cho các loại dữ liệu 8 và 16 bit. Định dạng unorm8x4-bgra giúp bạn tải màu đỉnh được mã hoá BGRA một cách thuận tiện hơn một chút trong khi vẫn giữ nguyên chương trình đổ bóng.

Thuật toán X25519 của API Web Cryptography

Thuật toán "X25519" cung cấp các công cụ để thực hiện thoả thuận khoá bằng cách sử dụng hàm X25519 được chỉ định trong [RFC7748]. Bạn có thể sử dụng giá trị nhận dạng thuật toán "X25519" trong giao diện SubtleCrypto để truy cập vào các thao tác đã triển khai: generateKey, importKey, exportKey, deriveKey và deriveBits.

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

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

Chọn không sử dụng tính năng đóng băng khi bật Trình tiết kiệm pin

Bản dùng thử chọn không tham gia này cho phép các trang web chọn không tham gia hành vi đóng băng khi bật Trình tiết kiệm pin trong Chrome 133.

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

Phiên bản Chrome này giới thiệu các tính năng ngừng hoạt động và bị xoá được liệt kê bên dưới. Hãy truy cập vào ChromeStatus.com để xem danh sách các tính năng dự kiến ngừng hoạt động, các tính năng hiện đã ngừng hoạt động và các tính năng đã bị xoá trước đó.

Bản phát hành Chrome này không dùng một tính năng nữa.

Ngừng sử dụng giới hạn maxInterStageShaderComponents của WebGPU

maxInterStageShaderComponents limit không được dùng nữa do nhiều yếu tố. Ngày dự kiến xoá trong Chrome 135.

  • Tính năng dự phòng với maxInterStageShaderVariables: Giới hạn này đã phục vụ một mục đích tương tự, kiểm soát lượng dữ liệu được truyền giữa các giai đoạn chương trình đổ bóng.
  • Sự khác biệt nhỏ: Mặc dù có sự khác biệt nhỏ trong cách tính hai giới hạn này, nhưng những khác biệt này là nhỏ và có thể được quản lý hiệu quả trong giới hạn maxInterStageShaderVariables.
  • Đơn giản hoá: Việc xoá maxInterStageShaderComponents giúp đơn giản hoá giao diện chương trình đổ bóng và giảm độ phức tạp cho nhà phát triển. Thay vì quản lý hai giới hạn riêng biệt với những điểm khác biệt nhỏ, họ có thể tập trung vào maxInterStageShaderVariables được đặt tên phù hợp và toàn diện hơn.

Bản phát hành Chrome này xoá hai tính năng.

Trước đây, khi một tài nguyên được tìm nạp trước bằng <link rel=prefetch>, Chrome sẽ bỏ qua ngữ nghĩa của bộ nhớ đệm (cụ thể là max-age và no-cache) trong lần sử dụng đầu tiên trong vòng 5 phút để tránh tìm nạp lại. Giờ đây, Chrome sẽ xoá trường hợp đặc biệt này và sử dụng ngữ nghĩa bộ nhớ đệm HTTP thông thường.

Điều này có nghĩa là nhà phát triển web cần thêm các tiêu đề lưu vào bộ nhớ đệm thích hợp (Cache-Control hoặc Expires) để thấy được lợi ích của <link rel=prefetch>.

Điều này cũng ảnh hưởng đến <link rel=prerender> không chuẩn.

Xoá tính năng kích hoạt trang Chào mừng của Chrome bằng các thẻ chạy lần đầu theo lựa chọn ưu tiên ban đầu

Việc đưa chrome://welcome vào thuộc tính first_run_tabs của tệp initial_preferences hiện sẽ không có hiệu lực. Trang này bị xoá vì trang đó không cần thiết với Trải nghiệm chạy lần đầu kích hoạt trên các nền tảng máy tính.