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 giúp nâng cao trải nghiệm người dùng.
Khung được 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 trong khi 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 các 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 tính năng khác.

Tôi là Adriana Jara. Hãy cùng tìm hiểu sâu hơn và xem những tính năng mới dành cho nhà phát triển trong Chrome 115.

Ảnh động dựa trên thao tác cuộn

Hoạt ảnh khi cuộn là một mẫu trải nghiệm người dùng phổ biến trên web. Ảnh động hướng cuộ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.

Những 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 di chuyển khi bạn cuộn:

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

Ảnh động di chuyể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 đi 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 bắt đầu từ 0 khi tải trang và bắt đầu đếm ngược về phía trước khi thời gian đồng hồ diễn ra. Đây là dòng thời gian hoạt ảnh mặc định và cho đến bây giờ là dòng thời gian hoạt ảnh duy nhất bạn có quyền truy cập.

Thông số kỹ thuật của ảnh động điều khiển cuộn xác định hai loại tiến trình mới mà bạn có thể sử dụng:

Cuộn tiến trình dòng thời gian: 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 tiến trình: 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();
}

Đọc nội dung về ảnh động khi di chuyển lên xuống để biết toàn bộ thông tin chi tiết và xem thêm ví dụ.

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 các doanh nghiệp kỹ thuật số vững mạnh.

Nhiều đề xuất của công cụ này hướng đến việc đá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 hay 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 liên quan đến Hộp cát về quyền riêng tư để hiển thị tài liệu từ nhiều phân vùng lưu trữ 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 giao tiếp với ngữ cảnh nhúng của nó để cho phép khung truy cập vào dữ liệu trên nhiều trang web mà không chia sẻ khung với ngữ cảnh nhúng.

Tương tự, bạn không thể chia sẻ bất kỳ dữ liệu của bên thứ nhất nào trong bối cảnh nhúng với khung được 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 vào DOM ngữ cảnh nhúng	Có	Không
Khi nhúng ngữ cảnh, bạn 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 khung bảo vệ. news.example không thể đánh 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 để tham khảo tài liệu về Khung bảo vệ, Protected Audience API, Bộ nhớ dùng chung và nhiều tài liệu 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ủ đề mà người dùng quan tâm. Những cơ chế này sắp bị loại bỏ 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 bảo vệ quyền riêng tư.

Topics API bật 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 theo dõi và ghi lại những chủ đề 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 một người dùng truy cập vào trang web knitting.example.

Chủ đề là 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ề chính người dùng hoặc hoạt động duyệt web của người dùng.

Đọ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à cách sử dụng Topics API

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do 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 CSS display hiện chấp nhận nhiều từ khoá làm giá trị, bên cạnh các từ khoá kết hợp sẵn cũ.
Hiện có một bản dùng thử ban đầu dành cho Compute Compute 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

Bài viết này chỉ bao gồm 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 bên dưới để biết thêm các thay đổi khác trong Chrome 115.

Để 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ẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!