Chrome 108 thử nghiệm

Đơn vị khung nhìn CSS mới, API quản lý thông tin đăng nhập liên kết, phông chữ COLRv1 biến và nhiều đơn vị khác.

Trừ phi có ghi chú khác, những thay đổi được mô tả bên dưới sẽ áp dụng cho bản phát hành kênh thử nghiệm beta mới nhất của 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 từ danh sách trên ChromeStatus.com. Chrome 108 là phiên bản thử nghiệm kể từ ngày 27 tháng 10 năm 2022. Bạn có thể tải xuống những bản phát hành mới nhất trên Google.com dành cho máy tính hoặc trên Cửa hàng Google Play trên Android.

CSS

Chrome 108 có một số tính năng mới của CSS.

Tràn CSS cho các phần tử được thay thế

Chrome sẽ bắt đầu triển khai một thay đổi cho phép nhà phát triển sử dụng thuộc tính overflow hiện có bằng các phần tử thay thế được tô bên ngoài hộp nội dung. Bạn có thể ghép nối với object-view-box để tạo hình ảnh có ánh sáng hoặc bóng tuỳ chỉnh được áp dụng, với hành vi tràn mực đúng cách như bóng CSS sẽ có.

Đây có thể là một thay đổi có thể gây lỗi. Hãy tìm hiểu thêm trong bài viết Thay đổi tràn đối với các phần tử được thay thế.

Các đơn vị khung nhìn nhỏ, lớn, động và logic

Thao tác này sẽ hỗ trợ thêm các đơn vị nhỏ (svw, svh, svi, svb, svmin, svmax), lớn (lvw, lvh, lvi, lvb, lvmin, lvmax), động (dvw, dvh, dvi, dvb, dvmin, dvmax) và logic (vi, vb).

Dịch vụ hỗ trợ break-after, break-beforebreak-inside của CSS

Hỗ trợ giá trị tránh của các thuộc tính phân mảnh CSS break-before, break-afterbreak-inside khi in. Giá trị này yêu cầu trình duyệt tránh bị hỏng trước, sau hoặc bên trong phần tử được áp dụng. Ví dụ: CSS sau đây tránh cho hình ảnh bị hỏng khi ngắt trang.

figure {
    break-inside: avoid;
}

Tính năng này được thêm vào để Chrome 108 hỗ trợ thêm tính năng in LayoutNG.

Căn chỉnh mục đường cơ sở gần đây nhất

Tính năng này cho phép nhà phát triển căn chỉnh các mục trong bố cục linh hoạt hoặc bố cục lưới theo đường cơ sở cuối cùng thay vì đường cơ sở đầu tiên. Việc này được thực hiện thông qua các thuộc tính sau:

  • align-items: last baseline;
  • justify-items: last baseline;
  • align-self: last baseline;
  • justify-self: last baseline;

ContentVisibilityAutoStateChanged sự kiện

Một sự kiện kích hoạt trên một phần tử có content-visibility: auto khi trạng thái kết xuất của phần tử thay đổi do bất kỳ thuộc tính nào làm cho phần tử đó phù hợp với người dùng.

Trường hợp sử dụng cho phép nhà phát triển có nhiều quyền kiểm soát hơn đối với thời điểm dừng hoặc bắt đầu hiển thị để phản hồi tác nhân người dùng dừng hoặc bắt đầu hiển thị cây con chế độ hiển thị nội dung. Ví dụ: nhà phát triển có thể muốn dừng cập nhật React trong một cây con không do tác nhân người dùng kết xuất. Tương tự như vậy, nhà phát triển có thể muốn dừng mọi hoạt động cập nhật tập lệnh khác (ví dụ: cập nhật canvas) khi tác nhân người dùng không hiển thị phần tử.

API web

Quản lý thông tin xác thực liên kết (trước đây là WebID)

API Quản lý thông tin xác thực liên kết cho phép người dùng sử dụng danh tính liên kết để đăng nhập vào các trang web theo cách phù hợp với những điểm cải tiến về quyền riêng tư của trình duyệt.

Tiện ích nguồn nội dung nghe nhìn trong trình thực thi

Cho phép sử dụng API Tiện ích nguồn phương tiện (MSE) từ ngữ cảnh DedicatedWorker để cải thiện hiệu suất lưu nội dung nghe nhìn vào bộ đệm nhằm phát lại bằng HTMLMediaElement trên ngữ cảnh Cửa sổ chính. Bằng cách tạo một đối tượng MediaSource trên ngữ cảnh DedicatedWorker, ứng dụng có thể nhận MediaSourceHandle từ đối tượng đó và chuyển xử lý đó sang luồng chính để sử dụng trong việc đính kèm vào HTMLMediaElement. Sau đó, ngữ cảnh đã tạo đối tượng MediaSource có thể sử dụng đối tượng đó để lưu nội dung nghe nhìn vào vùng đệm.

Sec-CH-Prefers-Reduced-Motion Tiêu đề Gợi ý của ứng dụng về các tính năng của nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng

Tiêu đề Gợi ý của ứng dụng tính năng nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng xác định một tập hợp các tiêu đề Gợi ý về ứng dụng khách HTTP xung quanh các tính năng nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng như được xác định theo Truy vấn nội dung nghe nhìn cấp 5. Nếu được dùng làm Gợi ý quan trọng về ứng dụng, thì các tiêu đề này sẽ cho phép máy chủ đưa ra lựa chọn thông minh về nội dung CSS, chẳng hạn như CSS. Sec-CH-Prefers-Reduced-Motion cho biết lựa chọn ưu tiên của người dùng về prefers-reduced-motion.

Trình đọc WebTransport BYOB

Hỗ trợ trình đọc BYOB(bring-your-own-buffer) cho WebTransport để cho phép đọc vào bộ đệm do nhà phát triển cung cấp. Trình đọc BYOB có thể giảm thiểu các bản sao vùng đệm và giảm mức phân bổ bộ nhớ.

Ký tự đại diện trong nguồn gốc của chính sách về quyền

Thông số kỹ thuật của Chính sách về quyền xác định cơ chế cho phép nhà phát triển bật và tắt lựa chọn sử dụng nhiều tính năng và API của trình duyệt. Một khả năng của cơ chế này cho phép bạn chỉ bật các tính năng trên các nguồn gốc được liệt kê rõ ràng (ví dụ: https://foo.com/). Cơ chế này không đủ linh hoạt để thiết kế một số CDN để phân phối nội dung thông qua một nguồn gốc có thể được lưu trữ trên một trong số vài trăm miền con có thể có.

Do đó, tính năng này hỗ trợ thêm ký tự đại diện trong chính sách về quyền có cấu trúc như SCHEME://*.HOST:PORT (ví dụ: https://*.foo.com/), trong đó Nguồn gốc hợp lệ có thể được tạo từ SCHEME://HOST:PORT (ví dụ: https://foo.com/). Điều này yêu cầu HOST là một miền có thể đăng ký. Điều này có nghĩa là https://*.bar.foo.com/ hoạt động nhưng https://*.com/ thì không (nếu muốn cho phép tất cả các miền sử dụng tính năng này, bạn chỉ nên uỷ quyền cho *).

Phương thức đồng bộ hoá cho AccessHandles trong API Truy cập hệ thống tệp

Cập nhật các phương thức không đồng bộ flush(), getSize()truncate() trong FileSystemSyncAccessHandle trong API Truy cập hệ thống tệp thành các phương thức đồng bộ. FileSystemSyncAccessHandle hiện kết hợp cả phương thức đồng bộ hoá và không đồng bộ, gây trở ngại cho hiệu suất và khả năng hữu dụng, đặc biệt là đối với các ứng dụng chuyển C/C++ sang Wasm. Bản cập nhật này sẽ mang lại sự nhất quán trong việc sử dụng API và cải thiện hiệu suất cho các thư viện dựa trên Wasm.

Đây là một thay đổi có thể gây lỗi, bạn có thể đọc thêm ở bài viết Thay đổi có thể gây lỗi: phương thức đồng bộ hoá cho AccessHandles.

Giao diện người dùng có điều kiện WebAuthn

Giao diện người dùng có điều kiện cho WebAuthn được hỗ trợ trên Windows 22H2 trở lên, macOS và Android P trở lên. Chúng tôi cũng đã làm mới giao diện người dùng WebAuthn trên các nền tảng dành cho máy tính.

Phát hiện tính năng phông chữ và phông chữ COLRv1 biến đổi

Hỗ trợ phông chữ có thể thay đổi COLRv1

Kể từ Chrome 98, chúng tôi đã hỗ trợ Phông chữ vectơ màu COLRv1, nhưng bản phát hành đầu tiên này chỉ hỗ trợ chức năng tĩnh của bảng COLRv1. Thông số kỹ thuật COLRv1 xác định việc tích hợp với Biến thể OpenType, cho phép sửa đổi thuộc tính phông chữ của độ dốc và biến đổi bằng cách thay đổi tham số trục biến. Bước thứ hai này hỗ trợ các biến thể như vậy cho COLRv1.

Phần mở rộng điều kiện font-tech()font-format() thành CSS @supports

Khi sử dụng font-tech()font-format() cùng với CSS @supports, bạn có thể phát hiện công nghệ phông chữ và khả năng hỗ trợ định dạng cũng như cải thiện dần nội dung. Ví dụ sau đây về các bài kiểm thử khả năng hỗ trợ phông chữ COLRv1.

@supports font-tech(color-COLRv1) {

}

Hỗ trợ hàm tech() trong bộ mô tả @font-face src:

Phông chữ CSS cấp 4 cung cấp các phương tiện bổ sung để chọn hoặc lọc tài nguyên phông chữ. Ra mắt hàm tech(), cho phép truyền danh sách công nghệ phông chữ mà blob phông chữ tương ứng này yêu cầu để hoạt động. Dựa trên đó, Tác nhân người dùng sẽ chọn tài nguyên phù hợp đầu tiên.

Chrome trên Android

Theo mặc định, Android OSK nay sẽ đổi kích thước khung nhìn trực quan

Bàn phím ảo Android sẽ đổi kích thước khung nhìn trực quan theo mặc định thay vì khối chứa ban đầu. Tác giả có thể chọn không sử dụng tính năng này bằng cách sử dụng khoá khung nhìn meta interactive-widget mới.

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

Bản phát hành Chrome này có hai bản dùng thử theo nguyên gốc mới.

Danh tính người bán trong canmakepayment sự kiện

Sự kiện của trình chạy dịch vụ canmakepayment cho người bán biết liệu người dùng có thẻ trong hồ sơ trong ứng dụng thanh toán đã cài đặt hay không. Dịch vụ này ngầm chuyển dữ liệu tuỳ ý và nguồn gốc của người bán cho một trình chạy dịch vụ từ nguồn gốc của ứng dụng thanh toán. Hoạt động giao tiếp trên nhiều nguồn gốc này diễn ra trong quá trình tạo PaymentRequest trong JavaScript, không yêu cầu cử chỉ của người dùng và không hiển thị giao diện người dùng nào. Bản dùng thử cho nhà phát triển để xoá trường danh tính khỏi "canmakepayment" sự kiện có thể được bật qua: chrome://flags/#clear-identity-in-can-make-payment. Việc bật cờ này sẽ làm trống các trường nhận dạng trong "canmakepayment" sự kiện (và Ý định IS_READY_TO_PAY của Android).

Tìm hiểu thêm trong bài viết Cập nhật hành vi của sự kiện CanMakePayment của API Trình xử lý thanh toán.

Bộ nhớ đệm cho thao tác tiến/lùi NotRestoreReason API

API NotrecoveryReason sẽ báo cáo danh sách lý do khiến một trang không được phân phát từ BFcache trong cấu trúc cây khung, thông qua PerformanceNavigationTiming API.

Các trang có thể bị chặn khỏi BFcache vì nhiều lý do, chẳng hạn như theo yêu cầu của bản đặc tả kỹ thuật và lý do cụ thể cho việc triển khai trình duyệt. Các nhà phát triển có thể thu thập tỷ lệ truy cập của BFCache trên trang web của họ bằng cách sử dụng thông số được duy trì của trình xử lý pageshow và PerformanceNavigationTiming.type(back-forward). API này giúp các trang web có thể thu thập thông tin về lý do BFCache không được sử dụng trong thao tác điều hướng lịch sử để các trang web có thể thực hiện hành động đối với từng lý do và làm cho trang BFCache tương thích với trang.

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

Phiên bản Chrome này đã ngừng sử dụng và loại bỏ được liệt kê bên dưới. Truy cập vào ChromeStatus.com để biết danh sách các miền ngừng sử dụng theo kế hoạch, các lượt ngừng sử dụng hiện tại và các lượt xoá trước đây.

Ngừng sử dụng

Bản phát hành Chrome này sẽ ngừng sử dụng một tính năng.

Không dùng nữa và xoá window.defaultStatuswindow.defaultstatus

Đây là những API không chuẩn và không được tất cả trình duyệt triển khai và không ảnh hưởng đến hoạt động của trình duyệt. Thao tác này sẽ dọn dẹp các dữ liệu đó và loại bỏ tín hiệu tạo vân tay số tiềm ẩn.

Ban đầu, chúng được dùng để sửa đổi/kiểm soát "thanh trạng thái" ở cuối cửa sổ trình duyệt. Tuy nhiên, chúng chưa bao giờ có bất kỳ ảnh hưởng thực tế nào trên thanh trạng thái của Chrome và chúng không phải là thuộc tính được chuẩn hoá. Kể từ phiên bản 23, Gecko không hỗ trợ các thuộc tính này; WebKit vẫn hỗ trợ các thuộc tính này. Thuộc tính window.status liên quan được chuẩn hoá, nhưng cũng không được ảnh hưởng đến thanh trạng thái cửa sổ.

Xoá

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

Xoá ImageDecoderInit.premultiplyAlpha

Tính năng này không có tác động có thể quan sát được trong các trường hợp sử dụng chính, nhưng có thể hạn chế việc triển khai theo những cách dưới mức tối ưu. Hãy xem vấn đề này để biết nội dung mô tả chi tiết hơn. Theo sự đồng thuận của các trình chỉnh sửa thông số kỹ thuật của WebCodecs và thiếu mức sử dụng (0,000000339% - 0,00000687% lượt tải trang cho mỗi bộ đếm sử dụng trong M106).

Xoá navigateEvent.restoreScroll()

restoreScroll() sẽ được thay thế bằng navigateEvent.scroll(). scroll() hoạt động giống hệt nhau, ngoại trừ việc nó cho phép nhà phát triển kiểm soát thời gian cuộn đối với các thao tác điều hướng không theo chiều ngang (scroll() hoạt động khi thao tác cuộn không phải là thao tác khôi phục, do đó tên thay đổi cùng với thay đổi về hành vi).

Xoá navigateEvent.transitionWhile()

transitionWhile() đang được thay thế bằng navigateEvent.intercept() do các lỗi thiết kế mà nhà phát triển báo cáo. Blocking() hoạt động gần giống với TransitionWhile(), nhưng thay vì nhận tham số Promise bắt buộc, hàm này sẽ sử dụng hàm xử lý tuỳ chọn để trả về Promise. Điều này cho phép trình duyệt kiểm soát thời điểm trình xử lý thực thi, sau này và trực quan hơn so với transitionWhile().

Xoá googIPv6 của WebRTC mediaConstraint

Bạn có thể dùng "googIPv6: false" để tắt tính năng hỗ trợ IPv6 trong WebRTC, như trong ví dụ sau.

new RTCPeerConnection({}, {mandatory:{googIPv6:false}});

IPv6 đã được bật theo mặc định trong nhiều năm và chúng ta không thể tắt nó. Đây là một API cũ không tồn tại trong thông số kỹ thuật.