Điểm mới trong Chrome 114

Adriana Jara

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

  • Bạn có thể sử dụng CSS text-wrap: balance để cải thiện bố cục văn bản.
  • Các cookie được phân vùng theo trang web cấp cao nhất (CHIPS) nằm ở đây.
  • Giờ đây, bạn có thể tạo cửa sổ bật lên dễ dàng hơn bao giờ hết nhờ Popover API.
  • Và còn nhiều tính năng khác.

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 114.

text-wrap:balance.

Sử dụng text-wrap: balance để cải thiện bố cục văn bản. Ảnh động bên dưới cho thấy sự khác biệt mà bạn có thể tạo ra với một dòng mã này.

Dùng thử bản minh hoạ

Là nhà phát triển, bạn không biết kích thước cuối cùng, cỡ chữ hoặc thậm chí là ngôn ngữ của văn bản. Tất cả biến đều cần thiết để xử lý hiệu quả việc xuống dòng văn bản. Vì trình duyệt biết tất cả các yếu tố, nên với text-wrap:balance, bạn có thể yêu cầu trình duyệt tìm ra giải pháp ngắt dòng cân bằng nhất.

Hai ví dụ trước được hiển thị cùng nhau, một ví dụ được đánh dấu là không cân bằng và ví dụ còn lại được đánh dấu là cân bằng.

Khối văn bản cân bằng sẽ dễ nhìn hơn đối với người đọc. Phông chữ này thu hút sự chú ý tốt hơn và nhìn chung dễ đọc hơn.

Cân bằng dòng tiêu đề sẽ và nên là trường hợp sử dụng chính của text-wrap: balance. Việc cân bằng văn bản sẽ gây ra một mức hao tổn hiệu suất. Vì vậy, để giảm thiểu mức hao tổn này, tính năng này chỉ hoạt động với tối đa 4 dòng.

Hãy xem bài viết này để biết các mẫu và thông tin chi tiết hơn nhằm cải thiện bố cục văn bản.

CHIPS: Cookie có trạng thái được phân vùng độc lập.

CHIPS (Cookies Having Independent Partitioned State) (Cookie có trạng thái được phân vùng độc lập) cho phép chọn sử dụng cookie của bên thứ ba được phân vùng theo trang web cấp cao nhất bằng cách sử dụng thuộc tính cookie mới Partitioned.

Trước CHIPS, khi người dùng truy cập vào trang web A, trang web C được nhúng có thể đặt cookie trên máy của người dùng. Sau đó, nếu người dùng truy cập vào trang web B cũng nhúng trang web C, thì trang web C có thể truy cập vào cùng một cookie đã được đặt trên trang web A. Điều này cho phép trang web C biên dịch hoạt động duyệt web của người dùng trên trang web A, B và mọi trang web mà trang web C được nhúng vào.

Sơ đồ thể hiện các trang web và bộ nhớ có cookie chưa được phân vùng.

Mặc dù việc theo dõi trên nhiều trang web là một vấn đề, nhưng có những nhu cầu hợp lệ về cookie trên nhiều trang web mà bạn có thể đáp ứng theo cách bảo đảm quyền riêng tư bằng cách phân vùng cookie.

Với CHIPS, khi người dùng truy cập vào trang web A và nội dung được nhúng từ trang web C đặt một cookie có thuộc tính Phân vùng, cookie đó sẽ được lưu trong một tệp jar được phân vùng chỉ dành cho các cookie mà trang web C đặt khi được nhúng trên trang web A. Trình duyệt sẽ chỉ gửi cookie đó khi trang web cấp cao nhất là A.

Sơ đồ thể hiện các trang web và bộ nhớ được phân vùng bằng cookie.

Khi người dùng truy cập vào một trang web mới, chẳng hạn như trang web B, trang web C sẽ không nhận được cookie được đặt khi C được nhúng trong trang web A.

Hãy xem bài viết này để biết thêm thông tin chi tiết về quy trình loại bỏ cookie của bên thứ ba.

Popover API.

Với Popover API, bạn có thể dễ dàng tạo các thành phần giao diện người dùng (UI) tạm thời hiển thị trên tất cả các giao diện người dùng ứng dụng web khác.

Các thành phần này bao gồm các phần tử tương tác với người dùng như trình đơn thao tác, đề xuất phần tử biểu mẫu, bộ chọn nội dung và giao diện người dùng hướng dẫn.

Thuộc tính cửa sổ bật lên mới cho phép mọi phần tử tự động hiển thị trong lớp trên cùng. Điều này có nghĩa là nhà phát triển không còn phải lo lắng về việc định vị, xếp chồng các phần tử, tiêu điểm hoặc tương tác bằng bàn phím nữa.

Phần tử này tương tự như phần tử <dialog>, nhưng có một số điểm khác biệt quan trọng, bao gồm hành vi đóng nhẹ, quản lý hoạt động tương tác với cửa sổ bật lên và hỗ trợ sự kiện, cũng như không có chế độ "cửa sổ bật lên".

Hãy xem bài viết này để biết thêm thông tin.

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

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

  • DevTools cho phép bạn tạm dừng và gỡ lỗi mã C và C++ trong các ứng dụng WebAssembly có hỗ trợ DWARF.
  • Tuỳ chọn exclusionFilters trong navigator.bluetooth.requestDevice() cho phép nhà phát triển web loại trừ một số thiết bị khỏi bộ chọn trình duyệt.
  • Có một bản dùng thử theo nguyên gốc cho tính năng Làm mờ nền.

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 bên dưới để biết thêm các thay đổi trong Chrome 114.

Đă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 115 đượ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!