Tính năng mới trong Chrome 104

Pete LePage

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

Tôi là Pete LePage. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 104.

Chỉ định vùng cắt bằng tính năng chụp vùng

getDisplayMedia() cho phép tạo luồng video từ thẻ hiện tại. Tuy nhiên, đôi khi bạn không muốn toàn bộ thẻ mà chỉ muốn một phần nhỏ của thẻ đó. Cho đến nay, cách duy nhất để làm việc này là cắt từng khung hình video theo cách thủ công.

Với tính năng Chụp vùng, ứng dụng web có thể xác định khu vực cụ thể trên màn hình mà ứng dụng đó muốn chia sẻ. Ví dụ: Google Trang trình bày có thể cho phép bạn ở chế độ xem chỉnh sửa tiêu chuẩn và chia sẻ trang trình bày hiện tại.

Ảnh chụp màn hình cửa sổ trình duyệt có một ứng dụng web làm nổi bật khu vực nội dung chính và một iframe trên nhiều nguồn gốc.
Khu vực nội dung chính có màu xanh dương và iframe trên nhiều nguồn gốc có màu đỏ.

Để sử dụng tính năng này, hãy chọn phần tử cần chia sẻ, sau đó tạo một CropTarget mới dựa trên phần tử đó. Tiếp theo, hãy bắt đầu chia sẻ màn hình bằng cách gọi getDisplayMedia(). Thao tác này sẽ nhắc người dùng cấp quyền chia sẻ màn hình. Sau đó, hãy gọi track.cropTo() và truyền cropTarget đã tạo trước đó.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Hãy xem bài viết Chia sẻ thẻ hiệu quả hơn bằng tính năng Chụp vùng để biết thêm thông tin chi tiết.

Dễ dàng truy vấn nội dung nghe nhìn hơn bằng cú pháp và hoạt động đánh giá cấp 4

Truy vấn phương tiện rất quan trọng đối với thiết kế thích ứng, cho phép bạn xác định các kiểu cụ thể cho nhiều kích thước khung nhìn. Tuy nhiên, trừ phi bạn sử dụng các hàm này mỗi ngày, cú pháp có thể hơi khó hiểu.

Chrome 104 hỗ trợ thêm Truy vấn nội dung đa phương tiện – Cấp 4 – Cú pháp và đánh giá, cho phép bạn viết truy vấn nội dung đa phương tiện bằng các toán tử so sánh toán học thông thường.

Vì vậy, thay vì sử dụng mã như sau để chỉ báo khung nhìn từ 400 đến 600 pixel:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Bạn có thể viết như sau:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Ngoài việc giúp truy vấn nội dung nghe nhìn ít dài dòng hơn, cú pháp mới có thể chính xác hơn. Các truy vấn min- và max- là bao gồm, ví dụ: kiểm thử min-width: 400px cho chiều rộng từ 400px trở lên. Cú pháp mới cho phép bạn diễn đạt rõ ràng hơn ý định của mình.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Firefox đã hỗ trợ tính năng này và có một trình bổ trợ PostCSS sẽ ghi lại cú pháp mới thành cú pháp cũ, đảm bảo khả năng tương thích với trình duyệt!

Hãy xem bài viết của Rachel Cú pháp mới cho truy vấn nội dung đa phương tiện theo phạm vi trong Chrome 104 để biết thêm chi tiết.

Chuyển đổi phần tử dùng chung bắt đầu thử nghiệm nguồn mới

Các ứng dụng dành riêng cho nền tảng thường có chuyển đổi mượt mà giữa các chế độ xem, trông đẹp mắt, giúp người dùng nắm bắt được bối cảnh và mang lại trải nghiệm hiệu quả hơn. Trong khi đó, trên web, việc điều hướng toàn bộ có thể gây khó chịu và đôi khi có nghĩa là màn hình trống tạm thời. Đối với ứng dụng một trang, việc này có thể tốt hơn, nhưng các hiệu ứng chuyển đổi vẫn khó thực hiện.

Hiệu ứng chuyển đổi thành phần dùng chung, bắt đầu một bản dùng thử theo nguyên gốc mới trong Chrome 104, cho phép bạn cung cấp hiệu ứng chuyển đổi mượt mà, bất kể hiệu ứng chuyển đổi đó là giữa các tài liệu (ví dụ: trong ứng dụng nhiều trang) hay trong cùng một tài liệu (ví dụ: trong ứng dụng một trang).

Dưới đây là ví dụ sơ bộ về cách hoạt động của hiệu ứng chuyển đổi cho một ứng dụng trang đơn. Trong hàm điều hướng, hãy lấy nội dung trang mới, sau đó kiểm tra xem hiệu ứng chuyển đổi có được hỗ trợ hay không, nếu không, hãy cập nhật trang mà không có hiệu ứng chuyển đổi. Nếu có, hãy tạo một transition() và gọi start() trên đó, cho API biết thời điểm thay đổi DOM hoàn tất.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

Về cơ bản, tính năng Chuyển đổi phần tử được chia sẻ sử dụng Ảnh động CSS, vì vậy, bạn có thể thay đổi từ hiệu ứng mờ dần sang hiệu ứng trượt vào hoặc bất kỳ hiệu ứng nào bạn muốn.

Tôi chỉ mới giới thiệu sơ lược về chủ đề này. Vì vậy, hãy xem video của Jake Đưa hiệu ứng chuyển đổi trang lên web hoặc tìm hiểu video giải thích.

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

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

  • Khi cookie được đặt bằng thuộc tính Expires hoặc Max-Age rõ ràng, giá trị hiện sẽ được giới hạn ở mức không quá 400 ngày.
  • Có các tính năng nâng cao cho API vị trí cửa sổ nhiều màn hình.
  • Và thuộc tính CSS overflow-clip-margin chỉ định khoảng cách mà nội dung của một phần tử được phép vẽ trước khi bị cắt.

Tài liệu đọc thêm

Phần 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 104.

Đăng ký

Để 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à Pete LePage. Ngay khi Chrome 105 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!