Trang này được dịch bởi Cloud Translation API.

Điểm mới trong Chrome 115

Adriana Jara

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

Sử dụng ScrollTimeline và ViewTimeline để tạo ảnh động do cuộn nhằm nâng cao trải nghiệm người dùng.
Khung bảo vệ hoạt động cùng với các API Hộp cát về quyền riêng tư khác để nhúng nội dung có liên quan, đồng thời ngăn chặn việc chia sẻ ngữ cảnh không cần thiết.
Với Topics API, trình duyệt có thể chia sẻ thông tin với bên thứ ba về mối quan tâm của người dùng trong khi vẫn đảm bảo quyền riêng 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 những điểm mới dành cho nhà phát triển trong Chrome 115.

Ảnh động do cuộn

Ảnh động do cuộn điều khiển là một mẫu trải nghiệm người dùng phổ biến trên web. Ảnh động do cuộn điều khiển được liên kết với vị trí cuộn của vùng chứa cuộn. Điều này có nghĩa là khi bạn cuộn lên hoặc xuống, ảnh động được liên kết sẽ tiến hoặc lùi trong phản hồi trực tiếp.

Các ví dụ sau đây minh hoạ một số trường hợp sử dụng. Ví dụ: bạn có thể tạo chỉ báo đọc sẽ di chuyển khi cuộn:

Chỉ báo đọc ở phía trên tài liệu, điều khiển bằng thao tác cuộn.

Ảnh động do cuộn cũng có thể tạo các phần tử mờ dần khi xuất hiện trong khung hiển thị:

Các hình ảnh trên trang này sẽ mờ dần khi xuất hiện.

Theo mặc định, ảnh động đính kèm vào một phần tử sẽ chạy trên dòng thời gian của tài liệu. Thời gian gốc bắt đầu từ 0 khi trang tải và bắt đầu tích luỹ khi thời gian đồng hồ trôi qua. Đây là dòng thời gian ảnh động mặc định và cho đến nay, đây là dòng thời gian ảnh động duy nhất mà bạn có quyền truy cập.

Quy cách ảnh động do cuộn điều khiển xác định hai loại tiến trình mới mà bạn có thể sử dụng:

Dòng thời gian tiến trình cuộn: một dòng thời gian được liên kết với vị trí cuộn của vùng chứa cuộn dọc theo một trục cụ thể.
Xem tiến trình: một dòng thời gian được liên kết với vị trí tương đối của một phần tử cụ thể trong vùng chứa cuộn của phần tử đó.

Dưới đây là mã mẫu sử dụng Dòng thời gian tiến trình cuộn ẩn danh để tạo chỉ báo tiến trình đọc cố định ở đầu khung nhìn.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Hãy đọc bài viết ảnh động trên thao tác cuộn để biết toàn bộ thông tin chi tiết và ví dụ khác.

Khung bảo vệ

Hộp cát về quyền riêng tư là một sáng kiến nhằm tạo ra các công nghệ vừa bảo vệ quyền riêng tư của người dùng trên mạng, vừa cung cấp cho nhà phát triển công cụ để xây dựng doanh nghiệp kỹ thuật số vững mạnh.

Nhiều đề xuất của nhóm này nhằm đáp ứng các trường hợp sử dụng trên nhiều trang web mà không cần cookie của bên thứ ba hoặc các cơ chế theo dõi khác. Ví dụ:

Protected Audience API: cho phép phân phát quảng cáo dựa trên mối quan tâm theo cách bảo đảm quyền riêng tư.
Bộ nhớ dùng chung: cho phép truy cập vào dữ liệu không được phân vùng trên nhiều trang web trong một môi trường an toàn.

Để bảo vệ quyền riêng tư, một số API này yêu cầu một cách mới để nhúng nội dung. Giải pháp này được gọi là khung bảo vệ.

Khung được phân vùng kết hợp với các đề xuất khác về Hộp cát về quyền riêng tư để hiển thị tài liệu từ nhiều phân vùng bộ nhớ trong một trang.

Khung bảo vệ là một phần tử HTML cho nội dung được nhúng, tương tự như iframe. Không giống như iframe, khung bảo vệ giới hạn hoạt động giao tiếp với ngữ cảnh nhúng để cho phép khung truy cập vào dữ liệu trên nhiều trang web mà không cần chia sẻ dữ liệu đó với ngữ cảnh nhúng.

Tương tự, mọi dữ liệu của bên thứ nhất trong ngữ cảnh nhúng đều không thể được chia sẻ với khung được phân vùng.

Tính năng	`iframe`	`fencedframe`
Nhúng nội dung	Có	Có
Nội dung được nhúng có thể truy cập DOM ngữ cảnh nhúng	Có	Không
Ngữ cảnh nhúng có thể truy cập vào DOM nội dung được nhúng	Có	Không
Thuộc tính có thể quan sát, chẳng hạn như `name`	Có	Không
URL (`http://example.com`)	Có	Có (tuỳ thuộc vào trường hợp sử dụng)
Nguồn mờ do trình duyệt quản lý (`urn:uuid`)	Không	Có
Quyền truy cập vào dữ liệu trên nhiều trang web	Không	Có (tuỳ thuộc vào trường hợp sử dụng)

Ví dụ: giả sử news.example (ngữ cảnh nhúng) nhúng một quảng cáo từ shoes.example vào một khung bảo vệ. news.example không thể lấy cắp dữ liệu từ quảng cáo shoes.example và shoes.example không thể tìm hiểu dữ liệu của bên thứ nhất từ news.example.

So sánh trạng thái trước và sau khi phân vùng bộ nhớ.

Hãy xem các bài viết này để biết tài liệu về Khung bảo vệ, Protected Audience API, Bộ nhớ dùng chung và nhiều nội dung khác

API chủ đề

Trước đây, cookie của bên thứ ba và các cơ chế khác đã được dùng để theo dõi hành vi duyệt web của người dùng trên các trang web nhằm suy luận những chủ đề được quan tâm. Các cơ chế này đang dần bị loại bỏ trong sáng kiến Hộp cát về quyền riêng tư.

API Chủ đề cho phép trình duyệt chia sẻ thông tin về mối quan tâm của người dùng với các bên thứ ba, đồng thời bảo vệ quyền riêng tư.

Topics API cho phép quảng cáo dựa trên mối quan tâm (IBA) mà không cần theo dõi các trang web mà người dùng truy cập. Trình duyệt quan sát và ghi lại những chủ đề mà có vẻ như người dùng quan tâm, dựa trên hoạt động duyệt web của họ. Thông tin này được ghi lại trên thiết bị của người dùng.

Ví dụ: API có thể đề xuất chủ đề "Fiber & Textile Arts" cho người dùng truy cập vào trang web knitting.example.

Chủ đề là một tín hiệu giúp nền tảng công nghệ quảng cáo chọn quảng cáo phù hợp. Không giống như cookie của bên thứ ba, thông tin này được chia sẻ mà không tiết lộ thêm thông tin về chính người dùng hoặc hoạt động duyệt web của người dùng.

Đọc bài viết tổng quan về Hộp cát về quyền riêng tư để biết toàn bộ thông tin chi tiết về cách phân loại chủ đề và cách sử dụng Topics API

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

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

Kích thước tối đa của WebAssembly.Module trên luồng chính tăng lên 8 megabyte
Thuộc tính display CSS hiện chấp nhận nhiều từ khoá dưới dạng giá trị, bên cạnh các từ khoá tạo sẵn cũ.
Có một bản dùng thử gốc cho Compute Pressure API, cung cấp thông tin cấp cao về trạng thái hiện tại của phần cứng thiết bị.

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

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

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