Các loại màu và không gian màu CSS mới, các hàm lượng giác CSS và API Chuyển đổi chế độ xem.
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 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 trong danh sách trên ChromeStatus.com. Chrome 111 đang ở giai đoạn thử nghiệm beta kể từ ngày 9 tháng 2 năm 2023. 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
Các loại màu và khoảng trắng CSS mới
Tất cả các tính năng được mô tả trong CSS Color Level 4 hiện đã được bật. Bộ này bao gồm 4 loại màu độc lập với thiết bị (lab, Oklab, lch và Oklch), hàm color() và không gian màu do người dùng xác định cho hiệu ứng chuyển màu và ảnh động.
Hãy đọc Hướng dẫn về màu sắc CSS có độ phân giải cao để tìm hiểu về các loại màu và không gian màu mới này.
Hàm color-mix()
Hàm color-mix() cực kỳ hữu ích trong CSS Color 5 cũng được cung cấp. Hàm này cho phép trộn một tỷ lệ phần trăm của một màu vào một màu khác, trong bất kỳ không gian màu nào được hỗ trợ. Ví dụ sau đây pha trộn 10% blue vào white trong SRGB.
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
Bộ chọn CSS 4 Lớp giả lập :nth-child(an + b of S)
Mở rộng :nth-child(an + b) và :nth-last-child() để lấy một bộ chọn. Ví dụ: :nth-child(3 of .c) là .c thứ ba trong một phần tử mẹ nhất định. Để tìm hiểu thêm, hãy đọc bài đăng Kiểm soát nhiều hơn đối với các lựa chọn :nth-child() bằng cú pháp of S.
Đơn vị phông chữ gốc CSS
Thêm các đơn vị phông chữ gốc: rex, rch, ric và rlh vào đơn vị phông chữ gốc hiện có của rem.
Hàm lượng giác CSS
Thêm các hàm lượng giác sin(), cos(), tan(), asin(), acos(), atan(), atan2() vào biểu thức toán học CSS.
Truy vấn vùng chứa kiểu cho thuộc tính tuỳ chỉnh CSS
Thêm hàm style() vào các quy tắc @container để có thể áp dụng kiểu dựa trên các giá trị được tính toán của các thuộc tính tuỳ chỉnh của phần tử cấp trên.
Thuộc tính baseline-source
Thuộc tính baseline-source cho phép nhà phát triển web chỉ định xem hộp cấp nội tuyến có nên sử dụng đường cơ sở first hay last để căn chỉnh trong hộp dòng hay không.
API web
Quyền window-management và chuỗi chính sách quyền
Chrome 111 thêm window-management làm bí danh cho quyền window-placement và chuỗi chính sách quyền. Đây là một phần trong nỗ lực lớn hơn nhằm đổi tên các chuỗi bằng cách ngừng sử dụng và xoá window-placement. Thay đổi về thuật ngữ giúp tăng thời gian hoạt động của chỉ số mô tả khi Window Management API phát triển theo thời gian.
Media Session API: Trình bày các thao tác trên trang trình bày
Thêm các thao tác previousslide và nextslide vào API Phiên phát nội dung đa phương tiện hiện có.
ArrayBuffer có thể đổi kích thước và SharedArrayBuffer có thể mở rộng
Mở rộng hàm khởi tạo ArrayBuffer để lấy thêm độ dài tối đa cho phép tăng và giảm kích thước bộ đệm tại chỗ. Tương tự, SharedArrayBuffer được mở rộng để có thêm độ dài tối đa cho phép tăng trưởng tại chỗ.
Quy tắc suy đoán: khoá chính sách liên kết giới thiệu
Điều này mở rộng cú pháp quy tắc suy đoán để cho phép nhà phát triển chỉ định chính sách liên kết để sử dụng với các yêu cầu suy đoán do quy tắc suy đoán kích hoạt. Điều này cũng đưa ra lại yêu cầu về "chính sách liên kết đủ nghiêm ngặt".
Truyền phát DOM bóng đổ khai báo
Điều này giúp hỗ trợ thêm tính năng truyền trực tuyến bằng cách đính kèm gốc bóng trên thẻ mẫu mở, thay vì thẻ mẫu đóng.
API chuyển đổi thành phần hiển thị
Cho phép tạo các hiệu ứng chuyển đổi tinh tế trong Ứng dụng một trang (SPA) bằng cách chụp nhanh các thành phần hiển thị và cho phép DOM thay đổi mà không có bất kỳ sự chồng chéo nào giữa các trạng thái. Sử dụng tính năng Chuyển đổi thành phần hiển thị để tạo hiệu ứng chuyển đổi tuỳ chỉnh hoặc sử dụng hiệu ứng chuyển đổi chéo mặc định đơn giản để cải thiện trải nghiệm người dùng.
Hãy xem bài viết dành cho nhà phát triển Chrome để biết thêm thông tin và ví dụ về hiệu ứng chuyển đổi giúp bạn bắt đầu.
Tiện ích mã hoá video có thể mở rộng của WebRTC
Tiện ích này xác định một phương thức tiêu chuẩn để chọn giữa các cấu hình Mã hoá video có thể mở rộng (SVC) có thể có trên một kênh video WebRTC đi.
Thuộc tính enabledFeatures của WebXR
Trả về tập hợp tính năng đã được bật cho XRSession này theo quy định của XRSessionInit và các Tính năng ngụ ý mà thông số kỹ thuật yêu cầu cho chế độ và tính năng đã cho. Đối với một Phiên được cấp, phiên này sẽ chứa tất cả requiredFeatures, nhưng có thể là một tập hợp con của optionalFeatures. Hầu hết các tính năng đều có cách khác để phát hiện xem tính năng đó có được cấp hay không; tuy nhiên, đối với một số tính năng, tín hiệu về việc một tính năng có được bật hay không có thể liên quan chặt chẽ với dữ liệu về một tính năng hiện không hoạt động, thay vì dữ liệu không bao giờ hoạt động. Bằng cách truy vấn enabledFeatures, bạn có thể xác định xem có nên hiển thị gợi ý hữu ích nào (ví dụ: để cải thiện hoặc bắt đầu theo dõi) hay không, hoặc liệu một tính năng có bao giờ được hỗ trợ trong phiên hiện tại hay không.
Bản dùng thử theo nguyên gốc đang diễn ra
Trong Chrome 111, bạn có thể chọn tham gia các bản dùng thử theo nguyên gốc mới sau đây.
Thử nghiệm ngừng sử dụng để xoá tính năng bỏ qua CSP connect-src trong API Thanh toán trên web
Ngừng sử dụng khả năng API Thanh toán trên web bỏ qua chính sách CSP connect-src khi tìm nạp tệp kê khai. Sau khi chính sách này ngừng hoạt động, chính sách CSP connect-src của trang web sẽ cần cho phép URL phương thức thanh toán được chỉ định trong lệnh gọi PaymentRequest, cũng như mọi URL khác mà chuỗi phương thức dùng để tìm nạp tệp kê khai của phương thức đó.
Khả năng bỏ qua này bị xoá trong Chrome 111 với bản dùng thử nguồn gốc đảo ngược từ 111 đến 113 dành cho những nhà phát triển cần tạm thời bật lại tính năng bỏ qua. Để chọn sử dụng tính năng này, hãy đăng ký dùng thử tính năng ngừng sử dụng ngược cho tính năng bỏ qua CSP connect-src.
Ghi lại chế độ Hình trong hình
API Chế độ hình trong hình của tài liệu là một API mới để mở một cửa sổ luôn ở trên cùng có thể được điền sẵn nội dung HTML tuỳ ý. Đây là phần mở rộng của API Hình trong hình hiện có, chỉ cho phép đặt HTMLVideoElement vào cửa sổ PiP. Điều này cho phép các nhà phát triển web mang đến trải nghiệm PiP tốt hơn cho người dùng.
Đọc tài liệu về Chế độ Hình trong hình cho tài liệu.
Đăng ký dùng thử chế độ Hình trong hình theo nguồn gốc cho tài liệu.
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á như đượ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 đây.
Bản phát hành Chrome này xoá 3 tính năng.
Xoá PaymentInstruments
PaymentInstruments là API Web hỗ trợ cài đặt không phải JIT của các ứng dụng thanh toán (xem https://w3c.github.io/payment-handler/). API này được thiết kế với giả định rằng trình duyệt sẽ lưu trữ thông tin chi tiết về phương thức thanh toán thực tế, nhưng điều này không đúng và có một số rò rỉ quyền riêng tư. Chế độ này cũng chưa được cung cấp trên bất kỳ trình duyệt nào khác và chúng tôi cũng chưa thấy nhà cung cấp trình duyệt nào khác quan tâm đến chế độ này. Do đó, API này không còn được dùng nữa và đã bị xoá.
Xoá tính năng bỏ qua CSP connect-src trong API Thanh toán trên web
Ngừng sử dụng khả năng Web Payment API bỏ qua chính sách CSP connect-src khi tìm nạp tệp kê khai. Sau khi xoá, chính sách CSP connect-src của trang web sẽ cần cho phép URL phương thức thanh toán được chỉ định trong lệnh gọi PaymentRequest, cũng như mọi URL khác mà chuỗi phương thức dùng để tìm nạp tệp kê khai.
Hãy xem thông tin trong phần thử nghiệm theo nguồn gốc để biết cách chọn tham gia thử nghiệm ngừng sử dụng nhằm có thêm thời gian thực hiện các thay đổi bắt buộc do việc xoá này.
Danh tính người bán trong sự kiện canmakepayment
Sự kiện worker dịch vụ canmakepayment cho phép 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 nguồn gốc của người bán và dữ liệu tuỳ ý đến worker dịch vụ từ nguồn gốc ứng dụng thanh toán. Quá trình giao tiếp giữa các nguồn gốc này diễn ra trong quá trình tạo PaymentRequest bằng 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. Luồng dữ liệu thầm lặng này đã bị xoá khỏi sự kiện canmakepayment và Ý định IS_READY_TO_PAY của Android).