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

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

Adriana Jara

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

Tạo hiệu ứng chuyển đổi tinh tế trong ứng dụng một trang bằng API Chuyển đổi thành phần hiển thị.
Nâng tầm màu sắc lên một cấp độ mới nhờ tính năng hỗ trợ Màu CSS cấp 4.
Khám phá các công cụ mới trong bảng điều khiển kiểu để khai thác tối đa chức năng màu mới.
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 tính năng mới dành cho nhà phát triển trong Chrome 111.

API Chuyển đổi thành phần hiển thị.

Việc tạo hiệu ứng chuyển đổi mượt mà trên web là một nhiệm vụ phức tạp. API Chuyển đổi thành phần hiển thị giúp bạn tạo các hiệu ứng chuyển đổi tinh tế một cách đơn giản hơn bằng cách chụp nhanh các thành phần hiển thị và cho phép DOM thay đổi mà không có bất kỳ sự chồng chéo nào giữa các trạng thái.

Các hiệu ứng chuyển đổi được tạo bằng View Transition API. Dùng thử trang web minh hoạ – Yêu cầu Chrome 111 trở lên.

Hiệu ứng chuyển đổi chế độ xem mặc định là hiệu ứng chuyển đổi chéo, đoạn mã sau đây sẽ triển khai trải nghiệm này.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Khi .startViewTransition() được gọi, API sẽ ghi lại trạng thái hiện tại của trang.

Sau khi hoàn tất, callback được truyền đến .startViewTransition() sẽ được gọi. Đó là nơi DOM được thay đổi. Sau đó, API sẽ ghi lại trạng thái mới của trang.

Xin lưu ý rằng API này được ra mắt cho Ứng dụng một trang (SPA) nhưng chúng tôi cũng đang triển khai tính năng hỗ trợ cho các mô hình khác.

API này có nhiều thông tin chi tiết, hãy tìm hiểu thêm trong bài viết của chúng tôi có chứa các mẫu và thông tin chi tiết hoặc khám phá tài liệu về Chuyển đổi thành phần hiển thị trên MDN.

CSS Color Cấp 4.

Với màu CSS cấp 4, CSS hiện hỗ trợ màn hình độ phân giải cao, chỉ định màu sắc từ các gam màu HD, đồng thời cung cấp không gian màu có chuyên môn.

Tóm lại, bạn có thêm 50% màu để chọn! Bạn nghĩ rằng 16 triệu màu là rất nhiều. Tôi cũng nghĩ vậy.

Một loạt hình ảnh được hiển thị chuyển đổi giữa các gam màu rộng và hẹp, minh hoạ độ sống động của màu sắc và hiệu ứng của màu sắc.
Tự mình dùng thử

Quá trình triển khai bao gồm hàm color(); bạn có thể sử dụng hàm này cho bất kỳ không gian màu nào chỉ định màu bằng các kênh R, G và B. color() trước tiên sẽ lấy một tham số không gian màu, sau đó là một loạt giá trị kênh cho RGB và một số alpha (không bắt buộc).

Dưới đây là một số ví dụ về cách sử dụng hàm màu với các không gian màu khác nhau.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Hãy xem bài viết này để biết thêm tài liệu về cách tận dụng tối đa màu sắc có độ phân giải cao bằng CSS.

Công cụ phát triển màu mới.

Công cụ dành cho nhà phát triển có các tính năng mới để hỗ trợ thông số kỹ thuật màu css cấp 4.

Ngăn Kiểu hiện hỗ trợ 12 không gian màu mới và 7 gam màu mới được nêu trong thông số kỹ thuật. Dưới đây là ví dụ về định nghĩa màu CSS bằng color(), lch(), oklab() và color-mix().

Ví dụ về định nghĩa màu CSS.

Khi sử dụng color-mix(), cho phép trộn một tỷ lệ phần trăm của một màu vào một màu khác, bạn có thể xem kết quả màu cuối cùng trong ngăn Computed (Đã tính toán) Kết quả của hàm color-mix trong ngăn Computed (Đã tính toán).

Ngoài ra, công cụ chọn màu còn hỗ trợ tất cả không gian màu mới với nhiều tính năng hơn. Ví dụ: nhấp vào bảng màu của color(display-p3 1 0 1). Chúng tôi cũng đã thêm một đường ranh giới gam màu để phân biệt giữa gam màu sRGB và gam màu display-p3 nhằm giúp bạn hiểu rõ hơn về gam màu của màu đã chọn. Đường ranh giới gam màu.

Bộ chọn màu cũng hỗ trợ chuyển đổi màu giữa các định dạng màu.

Chuyển đổi màu giữa các định dạng màu.

Hãy xem bài đăng này để biết thêm thông tin về tính năng gỡ lỗi màu và các tính năng mới khác trong công cụ phát triển.

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

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

CSS đã thêm các hàm lượng giác, các đơn vị phông chữ gốc bổ sung và mở rộng bộ chọn giả lập con thứ n.
Document Picture in Picture API đang trong giai đoạn thử nghiệm theo nguyên gốc
Các thao tác previousslide và nextslide hiện là một phần của Media Session API (API Phiên phát nội dung đa phương tiện). Xem bản minh hoạ tại đây.

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

Để 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 112 đượ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!