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 những tính năng mới dành cho nhà phát triển trong Chrome 121.

Nội dung cập nhật về CSS.

Hãy bắt đầu với các bản cập nhật CSS:

Các thuộc tính scrollbar-color và scrollbar-width hiện đã có. Với các thuộc tính này, bạn có thể tuỳ chỉnh thanh cuộn và thay đổi (như bạn có thể đoán) màu sắc và chiều rộng của thanh cuộ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 màu sẽ trở thành quá trình 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 sắc cho lỗi chính tả và ngữ pháp, làm nổi bật các từ bị sai chính tả bằng màu nền hoặc các phần trang trí khác và triển khai tính năng kiểm tra chính tả tuỳ chỉnh với giao diện tích hợp hơn.

Chúng tôi đã cải thiện tính năng che bằng CSS cho SVG, đây là phần tiếp theo của tính năng hỗ trợ mặt nạ CSS cải tiến trong Chrome 120, thêm tính năng hỗ trợ mặt nạ mới vào SVG (nhiều mặt nạ, cũng như mask-mode, mask-composite, mask-position và mask-repeat). Ngoài ra, chúng tôi hiện hỗ trợ mặt nạ SVG từ xa (ví dụ: mặt nạ: url(masks.svg#star)).

Chỉnh sửa: 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ợ cho các điều kiện supports() vào @import, nhưng thực tế không phải vậy. Thay đổi này có trong Chrome 122.

Nội dung cập nhật về API Quy tắc suy đoán

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

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

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à một 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 tài nguyên văn bản có loại MIME "application/speculationrules+json". Quy tắc của tài nguyên sẽ được thêm vào tập hợp quy tắc của tài liệu.

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

Hãy truy cập vào bài viết Các điểm cải tiến đối với API Quy tắc đầu cơ để 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ó 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ể. Phương thức này chuyển đổi bản ghi toàn bộ thẻ thành bản ghi một cây con DOM cụ thể, chỉ ghi lại các phần tử 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 che khuất và bị che khuất.

Ví dụ về trường hợp Element Capture API hữu ích là ứng dụng hội nghị truyền hình cho phép bạn nhúng các ứng dụng bên thứ ba vào một iframe. Trong trường hợp này, bạn nên chụp iframe đó dưới dạng video và truyền video đó đế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 sử dụng một ứng dụng 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 Ghi vùng để thực hiện việc đó, nhưng trong trường hợp đó, nếu một số nội dung (chẳng hạn như danh sách thả xuống) được vẽ lên trên nội dung đã chọn, thì danh sách thả xuống đó sẽ nằm trong bản ghi.

Ảnh chụp màn hình danh sách thả xuống đã chụp.
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 đến phần tử mà bạn 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.

Xem bài viết Ghi lại luồng video từ bất kỳ phần tử nào để biết các mẫu mã và đăng ký dùng thử phiên bản gốc ElementCapture

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

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

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

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

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

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

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết sau để biết thêm các thay đổi trong Chrome 121.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. 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.

Tôi là Adriana Jara. Ngay khi Chrome 122 được phát hành, tôi sẽ ở đây để giới thiệu cho bạn những tính năng mới trong Chrome!