Các đơn vị khung nhìn CSS mới, API quản lý thông tin xác thực liên kết, phông chữ biến COLRv1, v.v.
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 Chrome mới nhất dành cho Android, ChromeOS, Linux, macOS và Windows. Tìm hiểu thêm về các tính năng nêu tại đây thông qua đường liên kết đi kèm hoặc trong danh sách trên ChromeStatus.com. Chrome 108 đang trong giai đoạn thử nghiệm beta kể từ ngày 27 tháng 10 năm 2022. 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 trên Cửa hàng Google Play trên Android.
CSS
Chrome 108 có một số tính năng CSS mới.
Nút bổ sung 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ó với các thành phần được thay thế vẽ bên ngoài hộp nội dung. Kết hợp với object-view-box, bạn có thể dùng tính năng này để tạo hình ảnh có áp dụng ánh sáng hoặc bóng tuỳ chỉnh, với hành vi tràn mực thích hợp 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 đối với tràn trên các phần tử được thay thế.
Đơn vị khung nhìn nhỏ, lớn, động và logic
Việc này 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à đơn vị logic (vi, vb).
Hỗ trợ CSS break-after, break-before và break-inside
Hỗ trợ giá trị tránh của các thuộc tính phân mảnh CSS break-before, break-after và break-inside khi in. Giá trị này yêu cầu trình duyệt tránh phá vỡ trước, sau hoặc bên trong phần tử được áp dụng. Ví dụ: CSS sau đây tránh việc con số bị hỏng tại điểm ngắt trang.
figure {
break-inside: avoid;
}
Tính năng này đã được thêm vào do Chrome 108 thêm tính năng hỗ trợ cho in LayoutNG.
Căn chỉnh mục 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ì theo đường cơ sở đầu tiên. Bạn có thể thực hiện việc này 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 sẽ kích hoạt trên một phần tử có content-visibility: auto khi trạng thái hiển thị của phần tử đó thay đổi do bất kỳ thuộc tính nào làm cho phần tử đó có liên quan đến người dùng.
Trường hợp sử dụng này cho phép nhà phát triển kiểm soát chặt chẽ hơn thời điểm dừng hoặc bắt đầu kết xuất để phản hồi khi tác nhân người dùng dừng hoặc bắt đầu kết xuất cây con của 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à phát triển có thể muốn ngừ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 được liên kết của họ để đă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 đa phương tiện trong worker
Cho phép sử dụng API Tiện ích nguồn nội dung đa phương tiện (MSE) từ ngữ cảnh DedicatedWorker để cải thiện hiệu suất của việc lưu nội dung nghe nhìn vào bộ đệm để phát lại bằng HTMLMediaElement trên ngữ cảnh Cửa sổ chính. Bằng cách tạo đối tượng MediaSource trên ngữ cảnh DedicatedWorker, sau đó, ứng dụng có thể lấy MediaSourceHandle từ đối tượng đó và chuyển tên người dùng đó sang luồng chính để sử dụng khi đính kèm vào HTMLMediaElement. Sau đó, ngữ cảnh đã tạo đối tượng MediaSource có thể dùng để lưu nội dung nghe nhìn vào vùng đệm.
Tiêu đề Gợi ý ứng dụng về các tính năng nội dung nghe nhìn ưu tiên dành cho người dùng của Sec-CH-Prefers-Reduced-Motion
Tiêu đề Gợi ý ứng dụng tính năng nội dung nghe nhì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 ý ứng dụng HTTP xung quanh các tính năng đ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 sử dụng làm Gợi ý ứng dụng quan trọng, các tiêu đề này sẽ cho phép máy chủ đưa ra lựa chọn thông minh, chẳng hạn như nội tuyến CSS. Sec-CH-Prefers-Reduced-Motion phản ánh lựa chọn ưu tiên của người dùng về prefers-reduced-motion.
Người đọc WebTransport BYOB
Hỗ trợ trình đọc BYOB(bring-your-own-buffer) cho WebTransport để cho phép đọc trong vùng đệ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 chính sách về quyền
Nội dung đặc tả của Chính sách về quyền xác định một cơ chế cho phép nhà phát triển bật và tắt một cách có chọn lọc 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 các tính năng chỉ được bật 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 qua một nguồn gốc có thể được lưu trữ trên một trong 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/). Để làm như vậy, HOST phải là một miền có thể đăng ký. Tức là https://*.bar.foo.com/ hoạt động nhưng https://*.com/ sẽ không (nếu bạn muốn cho phép tất cả miền sử dụng tính năng này, bạn chỉ cần uỷ quyền cho *).
Các 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() và truncate() trong FileSystemSyncAccessHandle của API Truy cập hệ thống tệp thành các phương thức đồng bộ.
FileSystemSyncAccessHandle hiện có sự kết hợp giữa các phương thức đồng bộ hoá và không đồng bộ, gây trở ngại về 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 tính 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à thay đổi có thể có thể gây lỗi, bạn có thể đọc thêm trong 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. Giao diện người dùng WebAuthn trên các nền tảng máy tính cũng đã được làm mới.
Tính năng phát hiện tính năng phông chữ và phông chữ biến đổi COLRv1
Hỗ trợ phông chữ biến COLRv1
Phông chữ vectơ màu COLRv1 được hỗ trợ kể từ Chrome 98, nhưng bản phát hành ban đầu 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 các Biến thể OpenType, cho phép sửa đổi các thuộc tính phông chữ của độ dốc và biến đổi bằng cách thay đổi các tham số trục thay đổi. 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() và font-format() thành CSS @supports
Việc sử dụng font-tech() và font-format() cùng với các CSS @supports giúp phát hiện công nghệ phông chữ và hỗ trợ định dạng, cũng như cải thiện dần nội dung. Các ví dụ sau đây sẽ kiểm tra khả năng hỗ trợ phông chữ COLRv1.
@supports font-tech(color-COLRv1) {
}
Hỗ trợ hàm tech() trong phần mô tả @font-face src:
Phông chữ CSS cấp 4 cung cấp các phương thức 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 vào đó, 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
Android OSK hiện đổi kích thước khung nhìn hình ảnh theo mặc định
Bàn phím ảo Android đổi kích thước khung nhìn hình ảnh theo mặc định thay vì khối chứa ban đầu. Tác giả có thể chọn không áp dụng điều này bằng cách sử dụng khoá meta-viewport mới interactive-widget.
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ử gốc mới.
Danh tính người bán trong canmakepayment sự kiện
Sự kiện 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. Sự kiện này tự động 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 giữa các nguồn gốc này diễn ra trên bản dựng PaymentRequest trong JavaScript, không yêu cầu cử chỉ của người dùng và không hiển thị bất kỳ giao diện người dùng nào. Bạn có thể bật bản dùng thử dành cho nhà phát triển để xoá các trường danh tính khỏi sự kiện "canmakepayment" thông 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 sự kiện "canmakepayment" (và Ý định IS_READY_TO_PAY của Android).
Tìm hiểu thêm trong bài viết Cập nhật hoạt động của sự kiện CanMakePayment của API Trình xử lý thanh toán.
API bộ nhớ đệm cho thao tác tiến/lùi
API Notkhôi phục sẽ báo cáo danh sách các lý do tại sao một trang không được phân phát từ BFcache trong cấu trúc cây khung, thông qua API PerformanceNavigationTiming.
Trang có thể bị chặn khỏi BFcache vì nhiều lý do, chẳng hạn như các lý do bắt buộc theo quy cách 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 mình bằng cách sử dụng tham số duy trì 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 phần điều hướng lịch sử, nhờ đó, các trang web có thể thực hiện hành động dựa trên từng lý do và làm cho trang của chúng tương thích với BFCache.
Ngừng sử dụng và xoá
Phiên bản Chrome này giới thiệu các ngừng sử dụng và xoá được liệt kê dưới đây. Hãy truy cập vào ChromeStatus.com để xem danh sách các phương thức ngừng hoạt động theo kế hoạch, không dùng nữa 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 nữa.
Không dùng nữa và xoá window.defaultStatus cũng như window.defaultstatus
Đây là các API không chuẩn, không được tất cả trình duyệt triển khai và không ảnh hưởng đến hành vi của trình duyệt. Việc này sẽ làm sạch chúng và loại bỏ tín hiệu tạo vân tay có thể có.
Ban đầu, chúng được dùng để sửa đổi/kiểm soát văn bản "thanh trạng thái" ở cuối cửa sổ trình duyệt. Tuy nhiên, các thuộc tính này chưa từng có bất kỳ ảnh hưởng thực tế nào đến thanh trạng thái của Chrome và không phải là các thuộc tính được chuẩn hoá. Gecko không hỗ trợ các thuộc tính này kể từ phiên bản 23; Metric vẫn hỗ trợ các thuộc tính này. Thuộc tính window.status có liên quan được chuẩn hoá, nhưng cũng không được có tác động đến thanh trạng thái của 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 quan sát được tác động nào trong các trường hợp sử dụng chính, nhưng có thể hạn chế việc triển khai ở mức 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 soạn thảo thông số kỹ thuật WebCodecs và việc thiếu sử dụng (0,000000339% - 0,00000687% tải trang trên 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 theo cách giống hệt nhau, ngoại trừ việc 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 đi qua (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 sẽ thay đổi cùng với sự 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à các nhà phát triển báo cáo. chặn() hoạt động gần giống với TransitionTransition Đ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, muộn hơn và trực quan hơn so với transitionWhile().
Xoá googIPv6 của WebRTC mediaConstraint
Bạn có thể sử 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 sẽ không thể tắt nó. Đây là một API cũ không tồn tại trong quy cách.