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 theo hướng 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 xem có tính năng mới nào dành cho nhà phát triển trong Chrome 115.

Ảnh động dựa trên cuộn

Ảnh động điều khiển cuộn là một mẫu trải nghiệm người dùng phổ biến trên web. Ảnh động di chuyể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, được điều khiển bằng thao tác cuộn.

Ảnh động theo hướng cuộn cũng có thể tạo các phần tử mờ dần khi xuất hiện:

Hình ảnh trên trang này mờ dần khi xuất hiện.

Theo mặc định, ảnh động được đính kèm với 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 của thời gian bắt đầu từ 0 khi trang tải và bắt đầu tua đi khi thời gian đồng hồ tăng dần. Đây là dòng thời gian ảnh động mặc định và cho đến bây giờ là dòng thời gian ảnh động duy nhất mà bạn có quyền truy cập.

Thông số kỹ thuật về ảnh động theo hướng cuộn xác định hai loại dòng thời gian mới mà bạn có thể sử dụng:

Dòng thời gian tiến trình cuộn: 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ác công cụ để xây dựng các doanh nghiệp kỹ thuật số vững mạnh.

Nhiều đề xuất của họ 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 trong số 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 bảo vệ hoạt động kết hợp với các đề xuất khác trong 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ự, bạn không thể chia sẻ bất kỳ dữ liệu nào của bên thứ nhất trong ngữ cảnh nhúng với khung bảo vệ.

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 của 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ể trích xuất dữ liệu của 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 của phân vùng bộ nhớ.

Hãy tham khảo các bài viết này để xem 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 ra những chủ đề họ quan tâm. Những cơ chế này sẽ bị loại bỏ dần trong sáng kiến Hộp cát về quyền riêng tư.

Topics API cho phép trình duyệt 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ư.

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 các chủ đề có vẻ như được 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 trang web knitting.example.

Chủ đề là một tín hiệu giúp các 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ề bản thân 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 là còn nhiều tính năng khác nữa.

Kích thước tối đa của WebAssembly.Module trên luồng chính đã tăng lên 8 megabyte
Tài sản CSS display hiện chấp nhận nhiều từ khoá dưới dạng một giá trị, bên cạnh các từ khoá kết hợp sẵn cũ.
Chúng tôi có một bản dùng thử theo nguyên gốc cho Compute Áp lực API. API này 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

Trên đây chỉ là 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 dưới đây các thay đổi bổ sung trong Chrome 115.

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

Adriana Jara thân mến! Ngay sau khi Chrome 116 được phát hành, tôi sẽ ở ngay đây để cho bạn biết các tính năng mới của Chrome!