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ề mối quan tâm của người dùng với các bên thứ ba trong khi vẫn bảo vệ quyền riêng tư.
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 đ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ẽ chuyển tiếp hoặc lùi theo 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 các chỉ báo đọc di chuyển khi bạn cuộn:

Chỉ báo đọc trên một tài liệu, được đ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 tắc 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ể.
Dòng thời gian tiến trình xem: 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.

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 do cuộn điều khiển để biết tất cả thông tin chi tiết và nhiều 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 những 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 chưa được phân vùng trên nhiều trang web trong một môi trường bảo mật.

Để 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 có hàng rào.

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 được khoanh 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 được khoanh giới hạn chế 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 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 vào 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
Các 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 trong một khung có hàng rào. 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.

Hãy đọc tổng quan về Hộp cát về quyền riêng tư để biết tất cả thông tin chi tiết về cách phân loại chủ đề và sử dụng API Chủ đề

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.

Tôi là Adriana Jara. Ngay khi Chrome 116 đượ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!