Điểm mới trong Chrome 114

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

  • Bạn có thể 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.
  • Popover API giúp bạn tạo cửa sổ bật lên dễ dàng hơn bao giờ hết.
  • Và còn nhiều lợi ích khác khác.

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

Xem 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ữ hay 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 khi có CHIPS (Cookie có trạng thái được chia sẻ), 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, ví dụ như trang web B, trang web C sẽ không nhận được cookie đã đặt khi C được nhúng vào 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 API Popover, việc tạo các phần tử giao diện người dùng (UI) tạm thời được hiển thị trên tất cả giao diện người dùng khác của ứng dụng web trở nên dễ dàng hơn.

Trong đó 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 cho phần tử biểu mẫu, bộ chọn nội dung và giao diện người dùng giảng dạy.

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 với bàn phím.

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, trong đó có hành vi bỏ qua đèn, quản lý hoạt động tương tác bật lên, hỗ trợ sự kiện và thiếu chế độ "phương thức".

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.
  • Hiện đã có bản dùng thử theo nguyên gốc cho tính năng Làm mờ trong 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ý

Để 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 115 được phát hành, tôi sẽ cho bạn biết về những tính năng mới trong Chrome!