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

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:

Giờ đây, bạn có thể chỉ định một vùng cắt bằng tính năng chụp vùng khi sử dụng getDisplayMedia() để chụp thẻ hiện tại.
Bạn có thể viết cú pháp truy vấn nội dung nghe nhìn bằng cách sử dụng toán tử so sánh số học.
Tính năng Shared Element Transitions (Chuyển đổi phần tử dùng chung) sẽ bắt đầu quá trình dùng thử theo nguyên gốc.
Và còn nhiều tính năng khác.

Tôi là Pete LePage. Hãy cùng tìm hiểu kỹ hơn và xem 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() giúp bạn có thể 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 ảnh khu vực, một ứ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 giữ nguyên chế độ xem chỉnh sửa 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.

Truy vấn phương tiện dễ dàng hơn nhờ cú pháp cấp 4 và đánh giá

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ì dùng thông tin như thế này để biểu thị khung nhìn có kích thước 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. Truy vấn min- và max- bao gồm cả hai giá trị này, ví dụ: min-width: 400px kiểm thử 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. Trái lại, trên web, thao tác điều hướng toàn bộ có thể gây khó khăn 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));
}

Trong trường hợp này, hiệu ứng chuyển đổi phần tử dùng chung sẽ sử dụng Ảnh động CSS, vì vậy, bạn có thể thay đổi từ hiệu ứng làm mờ thành hiệu ứng trượt vào hoặc bất kỳ hình ảnh nào bạn muốn.

Tôi chỉ mới đề cập đến một số khía cạnh cơ bản, 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.
Chúng tôi đã cải thiện 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

Bài viết 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.

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