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 sâu hơn và xem Chrome 121 có gì mới dành cho nhà phát triển.

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

Hãy bắt đầu với thông tin cập nhật về CSS:

Bạn hiện có thể sử dụng các thuộc tính scrollbar-color và scrollbar-width. Với tiện ích này, 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ể để kết xuất 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ẽ diễn ra suôn sẻ giữa hai bảng màu đã chọn.

Các yếu 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 từ sai chính tả bằng màu nền hoặc các thành phần trang trí khác, đồng thời 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.

Tính năng tạo mặt nạ CSS cho SVG được cải thiện. Đây là nội dung tiếp nối việc hỗ trợ mặt nạ CSS được cải tiến trong Chrome 120, bổ sung khả 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, các 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ó đề 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 của Speculation Rules API (API Quy tắc suy đoán)

Các trang web có thể sử dụng API Quy tắc suy đoán để cho Chrome biết trang nào sẽ kết xuất trước theo phương thức lập trình, qua đó 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 hỗ trợ cả quy tắc tài liệu: chúng là phần mở rộng cho cú pháp của 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ử trong một trang. Quy tắc cho tài liệu có thể bao gồm các tiêu chí để dùng đường liên kết nào trong số này. Tính năng 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 các đường liên kết trên trang ngay lập tức, khi di chuột hoặc khi di chuột xuống.

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

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

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 (Quy tắc suy đoán). 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 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 sẽ cho phép tìm nạp trước theo suy đoán 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 một số hoặc tất cả các phần trong truy vấn của URL có thể bị bỏ qua cho mục đích so khớp. Trình phân tích cú pháp có thể khai báo rằng thứ tự của các khoá tham số truy vấn không được ngăn chặn việc so khớp, các 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 mới gây ra kết quả không khớp.

Hãy truy cập vào bài viết 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

API Element Capture hiện 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ể. Thao tác này chuyển đổi ảnh chụp toàn bộ thẻ thành ảnh 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à loại bỏ cả nội dung bị che khuất và bị che khuất.

Một ví dụ về những điểm hữu ích của API Element Capture 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 iframe. Trong trường hợp này, bạn có thể muốn chụp iframe đó dưới dạng video và truyền video đó cho những người tham gia từ xa.

Ảnh chụp màn hình một cuộc gọi hội nghị truyền hình trên Chrome.
Elad sử 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ể dùng tính năng Chụp ảnh khu vực để làm 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ẽ trên 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 sẽ xuất hiện ở đầu nội dung mà François nhận được.

API Element Capture 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à bạn muốn chia sẻ.

Ảnh chụp màn hình của phần tử mục tiêu không có danh sách thả xuống đang hiển thị.
François không thấy danh sách thả xuống từ 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ý bản dùng thử theo nguyên gốc ElementCapture

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

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

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

  • scope_extensions đang ở giai đoạn thử nghiệm theo nguyên gốc nên cho phép mở rộng hành vi của ứng dụng web để bao gồm cả 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 liên quan.

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

Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết sau để biết thêm những thay đổi khác trong Chrome 121.

Đăng ký

Để 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.

Chào Adriana Jara! Ngay sau khi Chrome 122 được phát hành, tôi luôn sẵn sàng cho bạn biết các tính năng mới của Chrome!