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 sâu hơn và xem có gì mới dành cho nhà phát triển trong Chrome 104.

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

getDisplayMedia() giúp bạn có thể tạo luồng video từ thẻ hiện tại. Nhưng đôi khi, bạn không muốn toàn bộ thẻ, chỉ một phần nhỏ trong đó. Cho đến nay, cách duy nhất để làm việc đó 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, ứng dụng web có thể xác định vùng màn hình cụ thể 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 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 cho thấy một ứng dụng web làm nổi bật vùng nội dung chính và iframe trên nhiều nguồn gốc.
Vùng nội dung chính có màu xanh dương còn iframe trên nhiều nguồn gốc có màu đỏ.

Để sử dụng phần tử đó, hãy chọn phần tử bạn muố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 nhờ tính năng Chụp ảnh khu vực để biết thêm chi tiết.

Truy vấn phương tiện truyền thông dễ dàng hơn với cú pháp và đá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 các kích thước khung nhìn khác nhau. Tuy nhiên, trừ phi bạn sử dụng chúng mỗi ngày, cú pháp có thể hơi khó hiểu.

Chrome 104 hỗ trợ thêm Truy vấn phương tiện – Cấp 4 – Cú pháp và đánh giá, cho phép bạn viết các truy vấn 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ì biểu thị khung nhìn có độ phân giải từ 400 đến 600 pixel, hãy làm như sau:

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

Mã có thể được viết như sau:

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

Ngoài việc làm cho các truy vấn nội dung đa phương tiện ít chi tiết hơn, cú pháp mới có thể chính xác hơn. Các truy vấn min- và max- đều bao gồm, ví dụ: min-width: 400px kiểm tra chiều rộng từ 400px trở lên. Cú pháp mới cho phép bạn hiểu rõ hơn về ý 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. */
}

Cú pháp này đã được hỗ trợ trong Firefox và có một trình bổ trợ PostCSS sẽ ghi lại cú pháp mới theo cú pháp cũ nhằm đả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 đa phương tiện theo phạm vi trong Chrome 104 để biết thêm chi tiết.

Quá trình chuyển đổi phần tử dùng chung bắt đầu bản dùng thử theo nguyên gốc mới

Các ứng dụng dành riêng cho nền tảng thường có quá trình chuyển đổi mượt mà giữa các thành phần hiển thị, trông đẹp mắt, phù hợp với người dùng và giúp trải nghiệm có hiệu suất cao hơn. Trong khi trên web, thao tác điều hướng đầy đủ có thể rất khó và đôi khi chỉ là một màn hình trống tạm thời. Đối với ứng dụng trang đơn, ứng dụng có thể tốt hơn, nhưng việc chuyển đổi vẫn khó khăn.

Chuyển đổi phần tử dùng chung, bắt đầu bản dùng thử nguyên gốc mới trong Chrome 104, cho phép bạn cung cấp các chuyển đổi suôn sẻ, bất kể các hiệu ứng chuyển đổi là nhiều tài liệu (ví dụ: trong ứng dụng nhiều trang) hay trong tài liệu (ví dụ: trong ứng dụng trang đơn).

Dưới đây là ví dụ sơ bộ về cách hoạt động của hiệu ứng chuyển đổi đối với 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ần hiệu ứng chuyển đổi. Nếu có, hãy tạo transition() và gọi start() trên đó để cho API biết khi nào quá trình 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, tính năng Chuyển đổi phần tử dùng chung sử dụng Ảnh động CSS, vì vậy, bạn có thể thay đổi từ hiệu ứng mờ dần, trượt vào hoặc bất kỳ thứ gì bạn muốn.

Tôi vừa mới tìm hiểu một số kiến thức cơ bản, nên hãy xem video của Jake Đưa tính năng chuyển đổi trang lên web hoặc tìm hiểu kỹ phần giải thích.

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

Tất nhiên, vẫn còn nhiều lý do 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.
  • API vị trí cửa sổ nhiều màn hình có các cải tiến.
  • Đồng thời, thuộc tính CSS overflow-clip-margin chỉ định khoảng cách nội dung của một phần tử được phép vẽ trước khi được cắt.

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 104.

Đăng ký

Để 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 và ngay sau khi Chrome 105 được phát hành, tôi sẽ sẵn sàng cho bạn biết những tính năng mới của Chrome!