Tính năng mới trong Chrome 121

Adriana Jara

Dưới đây là những gì bạn cần phải biết:

Tôi là Adriana Jara. Hãy cùng tìm hiểu xem có tính năng mới nào dành cho nhà phát triển trong Chrome 121.

Cập nhật CSS.

Hãy bắt đầu từ việc cập nhật CSS:

Hiện đã có các thuộc tính scrollbar-color và scrollbar-width. Với thanh cuộn, bạn có thể tuỳ chỉnh thanh cuộn và thay đổi màu sắc và chiều rộng như bạn có thể đoán.

Thuộc tính font-palette cho phép bạn chọn một bảng màu cụ thể để hiển thị phông chữ màu. Thuộc tính này hiện hỗ trợ ảnh động, vì vậy việc chuyển đổi giữa các bảng khung hiển thị sẽ trở thành sự chuyển đổi mượt mà giữa hai bảng màu đã chọn.

Các phần tử giả ::spelling-error và ::grammar-error cho phép bạn tuỳ chỉnh màu cho các lỗi chính tả và ngữ pháp, làm nổi bật từ sai chính tả bằng màu nền hoặc các thành phần trang trí khác, cũng như triển khai tính năng kiểm tra lỗi chính tả tuỳ chỉnh với giao diện tích hợp hơn.

Cải thiện tính năng tạo mặt nạ CSS cho SVG. Đây là nội dung tiếp nối tính năng hỗ trợ mặt nạ CSS được cải tiến trong Chrome 120, bổ sung tính năng hỗ trợ mặt nạ mới cho SVG (nhiều mặt nạ, cũng như mask-mode, mask-composite, mask-position và mask-repeat). Ngoài ra, mặt nạ SVG từ xa (ví dụ: mặt nạ: url(masks.svg#star)) hiện cũng được hỗ trợ.

Đính chính: Phiên bản trước của bài viết này đã đề cập đến việc thêm tính năng hỗ trợ các điều kiện supports() vào @import, nhưng trường hợp này không đúng. Thay đổi này có trong Chrome 122.

Thông tin cập nhật về Speculation Rules API

Các trang web có thể sử dụng API Quy tắc suy đoán để cho Chrome biết những trang nào cần kết xuất trước theo phương thức lập trình, qua đó giúp cải thiện trải nghiệm người dùng bằng cách giảm thời gian điều hướng trang.

API này hiện đã hỗ trợ các quy tắc tài liệu: chúng là một phần mở rộng cho cú pháp quy tắc suy đoán cho phép trình duyệt lấy danh sách URL để tải theo suy đoán từ các phần tử trên một trang. Các quy tắc trong tài liệu có thể bao gồm tiêu chí để sử dụng những đường liên kết nào trong số này. Việc này, cùng với trường "eagerness" mới cho phép bạn tự động tìm nạp trước hoặc kết xuất trước liên kết trên các trang ngay lập tức, khi di chuột hoặc di chuột xuống.

Dưới đây là ví dụ về quy tắc tài liệu:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Một thay đổi riêng biệt cho phép chỉ định các quy tắc suy đoán bằng cách sử dụng tiêu đề phản hồi HTTP Speculation-Rules. Tiêu đề là giải pháp thay thế cho việc sử dụng các phần tử <script> cùng dòng. Giá trị của tiêu đề này phải là một URL trỏ đến một tài nguyên văn bản có loại MIME "application/speculationrules+json". Các quy tắc của tài nguyên sẽ được thêm vào bộ quy tắc của tài liệu.

Ngoài ra, gợi ý No-Vary-Search cho phép tìm nạp trước theo suy đoán sao cho khớp ngay cả khi tham số truy vấn URL thay đổi. Tiêu đề phản hồi HTTP No-Vary-Search khai báo rằng có thể bỏ qua một số hoặc tất cả phần trong truy vấn của URL nếu so khớp. Mã này có thể khai báo rằng thứ tự của các khoá tham số truy vấn không được ngăn việc so khớp, một số tham số truy vấn cụ thể không được ngăn việc so khớp, hoặc chỉ một số tham số truy vấn đã biết nhất định mới gây ra việc không khớp.

Hãy truy cập nội dung Các điểm cải tiến đối với Speculation Rules API để biết thêm thông tin về những thay đổi này.

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

Element Capture API được cung cấp trong bản dùng thử theo nguyên gốc. API này cho phép bạn chụp và ghi lại một phần tử HTML cụ thể. Việc này biến đổi việc chụp toàn bộ thẻ, thành việc chụp một cây con DOM cụ thể, chỉ chụp các thành phần con trực tiếp của phần tử mục tiêu. Nói cách khác, công cụ này sẽ cắt và xoá cả nội dung bị che khuất và nội dung bị che khuất.

Một ví dụ về trường hợp hữu ích của Element Capture API là ứng dụng hội nghị truyền hình cho phép bạn nhúng các ứng dụng của bên thứ ba vào iframe. Trong trường hợp này, bạn có thể muốn ghi lại iframe đó dưới dạng video và truyền đến những người tham gia từ xa.

Ảnh chụp màn hình cuộc gọi hội nghị truyền hình trong Chrome.
Elad dùng ứng dụng của bên thứ ba trong cuộc gọi hội nghị truyền hình với François.

Xin lưu ý rằng bạn có thể sử dụng tính năng Chụp ảnh khu vực để thực hiện việc đó. Tuy nhiên, trong trường hợp đó, nếu một số nội dung, chẳng hạn như danh sách thả xuống, vẽ lên đầu nội dung đã chọn, thì trình đơn thả xuống đó sẽ là một phần của bản ghi.

Đã chụp ảnh màn hình danh sách thả xuống.
Danh sách thả xuống của Elad xuất hiện ở đầu nội dung mà François nhận được.

Element Capture API giải quyết vấn đề này bằng cách cho phép bạn nhắm mục tiêu phần tử mình muốn chia sẻ.

Ảnh chụp màn hình phần tử mục tiêu không có danh sách thả xuống trong chế độ xem.
François không thấy danh sách thả xuống của Elad.

Hãy xem bài viết Ghi lại luồng video từ phần tử bất kỳ để xem mã mẫu và đăng ký dùng thử theo nguyên gốc ElementCapture

Và nhiều tính năng khác!

Tất nhiên là còn nhiều tính năng khác nữa.

  • Phương thức resizeBy() và resizeTo(), một phần của API Hình trong hình của tài liệu, hiện yêu cầu người dùng thực hiện một cử chỉ.

  • Bạn có thể lập trình để mở bộ chọn tuỳ chọn của phần tử <select> bằng phương thức showPicker() của HTMLSelectElement.

  • scope_extensions đang trong giai đoạn dùng thử theo nguyên gốc, cho phép mở rộng hành vi của ứng dụng web để bao gồm cả các nguồn khác, nếu có sự thoả thuận giữa nguồn gốc chính của ứng dụng web và nguồn gốc liên quan.

Tài liệu đọc thêm

Trên đây chỉ là một số điểm nổi bật chính. Kiểm tra các đường liên kết sau để các thay đổi bổ sung trong Chrome 121.

Đăng ký

Để cập nhật thông tin, hãy đăng ký Kênh YouTube dành cho nhà phát triển Chrome, và bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Xin chào Adriana Jara! Ngay sau khi Chrome 122 được phát hành, tôi sẽ cho bạn biết các tính năng mới trong Chrome!