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 các hiệu ứng chuyển cảnh đẹp mắt trong ứng dụng trang đơn bằng View Transitions API.
Đưa màu sắc lên một tầm cao mới với tính năng hỗ trợ dành cho Cấp màu CSS 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ới về màu.
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 Chrome 111 có gì mới dành cho nhà phát triển.

View Transitions API (API Chuyển đổi thành phần hiển thị).

Tạo chuyển đổi mượt mà trên web là một nhiệm vụ phức tạp. View Transitions API (API Chuyển tiếp khung hiển thị) được thiết kế để giúp quá trình tạo các hiệu ứng chuyển đổi chỉn chu hơn bằng cách chụp nhanh các khung hiển thị và cho phép DOM thay đổi mà không có sự chồng chéo nào giữa các trạng thái.

Các chuyển đổi được tạo bằng View Transition API (API Chuyển đổi khung hiển thị). Thử trang web minh hoạ – Cần có Chrome 111 trở lên.

Hiệu ứng chuyển đổi khung hiển thị mặc định là hiệu ứng mờ dần, đoạn mã sau đây 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 bị thay đổi. Sau đó, API này sẽ ghi lại trạng thái mới của trang.

Xin lưu ý rằng API đã ra mắt cho Ứng dụng trang đơn (SPA) nhưng việc hỗ trợ các mô hình khác cũng đang được triển khai.

Có nhiều thông tin chi tiết về API này, hãy tìm hiểu thêm trong bài viết của chúng tôi có 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 khung hiển thị trên MDN.

CSS cấp màu 4.

Với CSS cấp màu 4, CSS hiện hỗ trợ các màn hình có độ phân giải cao, chỉ định màu từ gam màu HD trong khi vẫn cung cấp hệ màu theo chuyên môn.

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

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

Cách triển khai bao gồm hàm color(); có thể dùng 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() lấy một tham số không gian màu trước, sau đó là một chuỗi các giá trị kênh cho RGB và 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 hệ 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 để xem thêm tài liệu nhằm tận dụng tối đa các màu có độ phân giải cao bằng CSS.

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

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

Ngăn Styles (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 phần 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ới một màu khác, bạn có thể xem kết quả đầu ra màu cuối cùng trong ngăn Computed (Tính toán) kết quả phối màu trong ngăn Đã tính toán.

Ngoài ra, công cụ chọn màu hỗ trợ tất cả các hệ 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 màu sắc(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 để bạn hiểu rõ hơn về gam màu đã chọn. Một đường ranh giới gam màu.

Công cụ 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ề cách gỡ lỗi màu và các tính năng mới khác trong công cụ cho nhà phát triển.

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

Tất nhiên, vẫn còn nhiều lý do khác.

CSS đã thêm các hàm lượng giác, đơn vị phông chữ gốc bổ sung và mở rộng bộ chọn giả con thứ n.
API Hình ảnh trong hình ảnh tài liệu đang ở giai đoạn dùng thử 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. Xem bản minh hoạ tại đây.

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

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