Tính năng mới trong CSS và giao diện người dùng: Phiên bản I/O 2023

Una Kravets

Bramus

Adam Argyle

Vài tháng qua đã mở ra một kỷ nguyên vàng cho giao diện người dùng trên web. Các chức năng mới của nền tảng đã được ra mắt với khả năng tương thích chặt chẽ trên nhiều trình duyệt, hỗ trợ nhiều chức năng web và tính năng tuỳ chỉnh hơn bao giờ hết.

Dưới đây là 20 tính năng thú vị và có tác động lớn nhất vừa ra mắt hoặc sắp ra mắt:

• Truy vấn vùng chứa
• Truy vấn kiểu
• Bộ chọn :has()
• nth-of microsyntax
• text-wrap: balance
• initial-letter
• Đơn vị khung nhìn động
• Không gian màu có gam màu rộng
• color-mix()
• Lồng ghép
• Lớp xếp tầng
• Kiểu có phạm vi
• Hàm lượng giác
• Các thuộc tính biến đổi riêng lẻ
• popover
• vị trí cố định
• selectmenu
• Chuyển đổi thuộc tính rời rạc
• Ảnh động dựa trên thao tác cuộn
• Hiệu ứng chuyển đổi khung hiển thị

Mẫu quảng cáo thích ứng mới

Hãy bắt đầu với một số tính năng mới về thiết kế thích ứng. Các tính năng mới của nền tảng cho phép bạn tạo giao diện logic bằng các thành phần có thông tin về kiểu phản hồi riêng, tạo giao diện tận dụng các chức năng của hệ thống để mang đến giao diện người dùng có cảm giác tự nhiên hơn và cho phép người dùng tham gia vào quy trình thiết kế bằng các truy vấn về lựa chọn ưu tiên của người dùng để có khả năng tuỳ chỉnh hoàn toàn.

Container Queries

Truy vấn vùng chứa gần đây đã trở nên ổn định trên tất cả các trình duyệt hiện đại. Các hook này cho phép bạn truy vấn kích thước và kiểu của một phần tử mẹ để xác định những kiểu cần áp dụng cho bất kỳ phần tử con nào của phần tử mẹ đó. Truy vấn nội dung nghe nhìn chỉ có thể truy cập và tận dụng thông tin từ khung nhìn. Điều này có nghĩa là truy vấn nội dung nghe nhìn chỉ có thể hoạt động trên chế độ xem tổng quan về bố cục trang. Mặt khác, truy vấn vùng chứa là một công cụ chính xác hơn có thể hỗ trợ bất kỳ số lượng bố cục hoặc bố cục nào trong bố cục.

Trong ví dụ về hộp thư đến sau đây, cả Hộp thư đến chính và thanh bên Mục yêu thích đều là vùng chứa. Các email trong đó sẽ điều chỉnh bố cục dạng lưới và hiện hoặc ẩn dấu thời gian của email dựa trên không gian có sẵn. Đây chính là thành phần đó trong trang, chỉ xuất hiện ở các chế độ xem khác nhau

Vì chúng ta có một truy vấn vùng chứa, nên kiểu của các thành phần này là động. Nếu bạn điều chỉnh kích thước và bố cục trang, các thành phần sẽ phản hồi theo không gian được phân bổ riêng cho từng thành phần. Thanh bên sẽ trở thành thanh trên cùng có nhiều không gian hơn và bố cục sẽ trông giống với hộp thư đến chính hơn. Khi có ít không gian, cả hai đều hiển thị ở định dạng cô đọng.

Tìm hiểu thêm về các truy vấn vùng chứa và cách tạo các thành phần logic trong bài đăng này.

Truy vấn về kiểu

Quy cách truy vấn vùng chứa cũng cho phép bạn truy vấn các giá trị kiểu của một vùng chứa mẹ. Tính năng này hiện được triển khai một phần trong Chrome 111, trong đó bạn có thể sử dụng các thuộc tính tuỳ chỉnh CSS để áp dụng kiểu vùng chứa.

Ví dụ sau đây sử dụng các đặc điểm thời tiết được lưu trữ trong các giá trị thuộc tính tuỳ chỉnh (chẳng hạn như mưa, nắng và nhiều mây) để tạo kiểu cho nền và biểu tượng chỉ báo của thẻ.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Đây mới chỉ là bước khởi đầu cho các cụm từ tìm kiếm theo phong cách. Trong tương lai, chúng ta sẽ có các truy vấn boolean để xác định xem có giá trị thuộc tính tuỳ chỉnh hay không và giảm việc lặp lại mã. Hiện tại, chúng ta đang thảo luận về truy vấn theo phạm vi để áp dụng kiểu dựa trên một phạm vi giá trị. Điều này sẽ giúp bạn có thể áp dụng các kiểu hiển thị ở đây bằng cách sử dụng giá trị phần trăm cho khả năng mưa hoặc độ che phủ của mây.

Bạn có thể tìm hiểu thêm và xem thêm các bản minh hoạ trong bài đăng trên blog của chúng tôi về truy vấn kiểu.

:has()

Nói đến các tính năng mạnh mẽ và linh hoạt, bộ chọn:has() là một trong những chức năng CSS mới mạnh mẽ nhất xuất hiện trong các trình duyệt hiện đại. Với :has(), bạn có thể áp dụng các kiểu bằng cách kiểm tra xem một phần tử mẹ có chứa sự hiện diện của các phần tử con cụ thể hay không, hoặc liệu các phần tử con đó có ở một trạng thái cụ thể hay không. Điều này có nghĩa là giờ đây, chúng ta có một bộ chọn phần tử mẹ.

Dựa trên ví dụ về truy vấn vùng chứa, bạn có thể dùng :has() để làm cho các thành phần trở nên linh hoạt hơn nữa. Trong đó, một mục có phần tử "ngôi sao" sẽ có nền màu xám được áp dụng và một mục có hộp đánh dấu đã đánh dấu sẽ có nền màu xanh dương.

Tuy nhiên, API này không chỉ giới hạn ở việc chọn đối tượng là cha mẹ. Bạn cũng có thể tạo kiểu cho mọi phần tử con trong phần tử mẹ. Ví dụ: tiêu đề sẽ được in đậm khi mục có phần tử dấu sao. Bạn có thể thực hiện việc này bằng .item:has(.star) .title. Khi sử dụng bộ chọn :has(), bạn có thể truy cập vào các phần tử mẹ, phần tử con và thậm chí cả phần tử ngang hàng. Nhờ đó, đây là một API thực sự linh hoạt, với các trường hợp sử dụng mới xuất hiện mỗi ngày.

Để tìm hiểu thêm và khám phá một số bản minh hoạ khác, hãy xem bài đăng này trên blog về :has().

Cú pháp nth-of

Nền tảng web hiện có tính năng chọn phần tử con thứ n nâng cao hơn. Cú pháp nth-child nâng cao cung cấp một từ khoá mới ("of"), cho phép bạn sử dụng cú pháp vi mô hiện có của An+B, với một tập hợp con cụ thể hơn để tìm kiếm.

Nếu bạn sử dụng nth-child thông thường, chẳng hạn như :nth-child(2) trên lớp đặc biệt, trình duyệt sẽ chọn phần tử có lớp đặc biệt được áp dụng và cũng là phần tử con thứ hai. Điều này trái ngược với :nth-child(2 of .special), trước tiên sẽ lọc trước tất cả các phần tử .special, sau đó chọn phần tử thứ hai trong danh sách đó.

Tìm hiểu thêm về tính năng này trong bài viết về cú pháp nth-of.

text-wrap: balance

Bộ chọn và truy vấn kiểu không phải là những nơi duy nhất mà chúng ta có thể nhúng logic vào kiểu; kiểu chữ cũng là một nơi như vậy. Từ Chrome 114, bạn có thể sử dụng tính năng cân bằng dòng văn bản cho tiêu đề bằng cách dùng thuộc tính text-wrap với giá trị balance.

Để cân bằng văn bản, trình duyệt sẽ thực hiện một tìm kiếm nhị phân hiệu quả cho chiều rộng nhỏ nhất không gây ra bất kỳ dòng nào khác, dừng ở một pixel CSS (không phải pixel hiển thị). Để giảm thiểu thêm các bước trong tìm kiếm nhị phân, trình duyệt sẽ bắt đầu với 80% chiều rộng dòng trung bình.

Tìm hiểu thêm về vấn đề này trong bài viết này.

initial-letter

Một điểm cải tiến đáng chú ý khác đối với kiểu chữ trên web là initial-letter. Thuộc tính CSS này giúp bạn kiểm soát tốt hơn việc tạo kiểu cho chữ cái đầu dòng lồng ghép.

Bạn sử dụng initial-letter trên phần tử giả :first-letter để chỉ định: Kích thước của chữ cái dựa trên số dòng mà chữ cái đó chiếm. Độ lệch khối hoặc "độ lún" của chữ cái, cho biết vị trí chữ cái sẽ nằm.

Tìm hiểu thêm về cách sử dụng intial-letter tại đây.

Đơn vị khung nhìn động

Một vấn đề thường gặp mà các nhà phát triển web gặp phải hiện nay là kích thước chính xác và nhất quán của toàn bộ khung hiển thị, đặc biệt là trên thiết bị di động. Là một nhà phát triển, bạn muốn 100vh (100% chiều cao khung nhìn) có nghĩa là "cao bằng khung nhìn", nhưng đơn vị vh không tính đến những yếu tố như thanh điều hướng có thể thu gọn trên thiết bị di động, nên đôi khi đơn vị này quá dài và gây ra hiện tượng cuộn.

Để giải quyết vấn đề này, chúng tôi hiện có các giá trị đơn vị mới trên nền tảng web, bao gồm: - Chiều cao và chiều rộng của khung hiển thị nhỏ (hoặc svh và svw), thể hiện kích thước khung hiển thị đang hoạt động nhỏ nhất. – Chiều cao và chiều rộng khung nhìn lớn (lvh và lvw), thể hiện kích thước lớn nhất. – Chiều cao và chiều rộng khung hiển thị linh động (dvh và dvw).

Các đơn vị khung nhìn động thay đổi giá trị khi các thanh công cụ trình duyệt động bổ sung (chẳng hạn như địa chỉ ở trên cùng hoặc thanh thẻ ở dưới cùng) hiển thị và khi chúng không hiển thị.

Để biết thêm thông tin về các đơn vị mới này, hãy đọc bài viết Các đơn vị khung nhìn lớn, nhỏ và động.

Không gian màu có gam màu rộng

Một điểm bổ sung quan trọng khác cho nền tảng web là không gian màu wide-gamut. Trước khi có màu có dải màu rộng trên nền tảng web, bạn có thể chụp ảnh với màu sắc sống động, có thể xem trên các thiết bị hiện đại, nhưng bạn không thể làm cho nút, màu văn bản hoặc nền khớp với những giá trị sống động đó.

Nhưng hiện tại, chúng ta có nhiều không gian màu mới trên nền tảng web, bao gồm REC2020, P3, XYZ, LAB, OKLAB, LCH và OKLCH. Tìm hiểu về các không gian màu mới trên web và nhiều thông tin khác trong Hướng dẫn về màu sắc có độ phân giải cao.

Và bạn có thể thấy ngay trong Công cụ cho nhà phát triển cách dải màu mở rộng, với đường màu trắng phân định nơi dải sRGB kết thúc và nơi dải màu có gam màu rộng hơn bắt đầu.

Có nhiều công cụ khác để bạn sử dụng màu sắc! Đừng bỏ lỡ tất cả những điểm cải tiến tuyệt vời về chuyển màu. Thậm chí, Adam Argyle còn tạo ra một công cụ hoàn toàn mới để giúp bạn dùng thử bộ chọn màu và trình tạo gradient mới trên web. Hãy dùng thử tại gradient.style.

color-mix()

Hàm color-mix() là hàm mở rộng cho các không gian màu mở rộng. Hàm này hỗ trợ việc trộn hai giá trị màu để tạo ra các giá trị mới dựa trên các kênh của màu được trộn. Không gian màu mà bạn sử dụng để trộn sẽ ảnh hưởng đến kết quả. Khi làm việc trong một không gian màu mang tính cảm quan hơn như oklch, bạn sẽ sử dụng một dải màu khác so với những không gian màu như srgb.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Hàm color-mix() cung cấp một chức năng được yêu cầu từ lâu: khả năng giữ nguyên các giá trị màu sắc không trong suốt trong khi thêm một số độ trong suốt cho các giá trị đó. Giờ đây, bạn có thể sử dụng các biến màu thương hiệu trong khi tạo các biến thể của những màu đó ở các độ mờ khác nhau. Cách thực hiện việc này là trộn một màu với màu trong suốt. Khi kết hợp màu xanh dương của thương hiệu với 10% độ trong suốt, bạn sẽ có được màu thương hiệu có độ mờ là 90%. Bạn có thể thấy cách này giúp bạn nhanh chóng xây dựng các hệ thống màu.

Bạn có thể thấy tính năng này hoạt động trong Chrome DevTools ngay hôm nay với một biểu tượng sơ đồ Venn xem trước rất đẹp trong ngăn kiểu.

Xem thêm ví dụ và thông tin chi tiết trong bài đăng trên blog của chúng tôi về tính năng color-mix hoặc dùng thử sân chơi color-mix().

CSS Foundations

Xây dựng các chức năng mới mang lại lợi ích rõ ràng cho người dùng là một phần của phương trình, nhưng nhiều tính năng xuất hiện trong Chrome có mục tiêu cải thiện trải nghiệm của nhà phát triển và tạo ra cấu trúc CSS đáng tin cậy và có tổ chức hơn. Những tính năng này bao gồm việc lồng CSS, các lớp xếp tầng, kiểu có phạm vi, hàm lượng giác và các thuộc tính biến đổi riêng lẻ.

Dạng lồng ghép

Tính năng lồng CSS (một tính năng được nhiều người yêu thích trong Sass và là một trong những yêu cầu hàng đầu của nhà phát triển CSS trong nhiều năm) cuối cùng cũng đã xuất hiện trên nền tảng web. Việc lồng ghép cho phép nhà phát triển viết theo một định dạng ngắn gọn và được nhóm lại, giúp giảm sự dư thừa.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Bạn cũng có thể lồng Media Queries (Truy vấn nội dung nghe nhìn), tức là bạn cũng có thể lồng Container Queries (Truy vấn vùng chứa). Trong ví dụ sau, thẻ sẽ thay đổi từ bố cục dọc sang bố cục ngang nếu có đủ chiều rộng trong vùng chứa của thẻ:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Việc điều chỉnh bố cục thành flex xảy ra khi vùng chứa có nhiều (hoặc bằng) 480px không gian nội tuyến có sẵn. Trình duyệt sẽ chỉ áp dụng kiểu hiển thị mới đó khi các điều kiện được đáp ứng.

Để biết thêm thông tin và ví dụ, hãy xem bài đăng của chúng tôi về tính năng lồng CSS.

Lớp xếp tầng

Một điểm khó khăn khác của nhà phát triển mà chúng tôi đã xác định là đảm bảo tính nhất quán trong việc kiểu nào sẽ được ưu tiên hơn, và một phần của việc giải quyết vấn đề này là có khả năng kiểm soát tốt hơn đối với tầng CSS.

Lớp xếp tầng giải quyết vấn đề này bằng cách cho phép người dùng kiểm soát lớp nào có mức độ ưu tiên cao hơn các lớp khác, tức là kiểm soát chính xác hơn thời điểm áp dụng kiểu.

Tìm hiểu thêm về cách sử dụng các lớp xếp tầng trong bài viết này.

CSS có phạm vi

Kiểu có phạm vi CSS cho phép nhà phát triển chỉ định ranh giới mà các kiểu cụ thể áp dụng, về cơ bản là tạo không gian tên gốc trong CSS. Trước đây, nhà phát triển dựa vào tập lệnh của bên thứ ba để đổi tên các lớp hoặc quy ước đặt tên cụ thể để ngăn xung đột về kiểu. Tuy nhiên, trong thời gian tới, bạn có thể sử dụng @scope.

Ở đây, chúng ta đang đặt phạm vi cho một phần tử .title thành một .card. Điều này sẽ ngăn phần tử tiêu đề đó xung đột với bất kỳ phần tử .title nào khác trên trang, chẳng hạn như tiêu đề bài đăng trên blog hoặc tiêu đề khác.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

Bạn có thể xem @scope cùng với các giới hạn về phạm vi và @layer trong bản minh hoạ trực tiếp này:

Tìm hiểu thêm về @scope trong quy cách css-cascade-6.

Hàm lượng giác

Một phần khác của cơ sở hạ tầng CSS mới là các hàm lượng giác được thêm vào các hàm toán học CSS hiện có. Các hàm này hiện đã ổn định trong tất cả các trình duyệt hiện đại và cho phép bạn tạo bố cục tự nhiên hơn trên nền tảng web. Một ví dụ tiêu biểu là bố cục trình đơn dạng tròn này. Giờ đây, bạn có thể thiết kế và tạo ảnh động bằng cách sử dụng các hàm sin() và cos().

Trong bản minh hoạ bên dưới, các dấu chấm xoay quanh một điểm trung tâm. Thay vì xoay từng dấu chấm quanh tâm của chính nó rồi di chuyển dấu chấm đó ra ngoài, mỗi dấu chấm sẽ được dịch trên trục X và Y. Khoảng cách trên trục X và Y được xác định bằng cách tính đến cos() và sin() tương ứng của --angle.

Hãy xem bài viết của chúng tôi về hàm lượng giác để biết thêm thông tin chi tiết về chủ đề này.

Thuộc tính biến đổi riêng lẻ

Công thái học của nhà phát triển tiếp tục được cải thiện nhờ các hàm biến đổi riêng lẻ. Kể từ lần gần nhất chúng tôi tổ chức I/O, các phép biến đổi riêng lẻ đã ổn định trên tất cả các trình duyệt hiện đại.

Trước đây, bạn sẽ dựa vào hàm biến đổi để áp dụng các hàm phụ nhằm điều chỉnh tỷ lệ, xoay và dịch một phần tử trên giao diện người dùng. Việc này đòi hỏi nhiều thao tác lặp lại và đặc biệt gây khó chịu khi áp dụng nhiều phép biến đổi tại các thời điểm khác nhau trong ảnh động.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Giờ đây, bạn có thể có tất cả thông tin chi tiết này trong ảnh động CSS bằng cách tách các loại biến đổi và áp dụng riêng từng loại.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Nhờ đó, các thay đổi về bản dịch, xoay hoặc tỷ lệ có thể xảy ra đồng thời ở các tốc độ thay đổi khác nhau trong các thời điểm khác nhau trong quá trình tạo ảnh động.

Hãy xem bài đăng này về các hàm biến đổi riêng lẻ để biết thêm thông tin.

Thành phần có thể tuỳ chỉnh

Để đảm bảo giải quyết một số nhu cầu chính của nhà phát triển thông qua nền tảng web, chúng tôi đang hợp tác với nhóm cộng đồng OpenUI và đã xác định được 3 giải pháp để bắt đầu:

1. Chức năng bật lên tích hợp sẵn với trình xử lý sự kiện, cấu trúc DOM khai báo và các giá trị mặc định có thể truy cập.
2. Một CSS API để liên kết hai phần tử với nhau nhằm bật tính năng định vị phần tử neo.
3. Một thành phần trình đơn thả xuống có thể tuỳ chỉnh, dùng khi bạn muốn tạo kiểu cho nội dung bên trong một lựa chọn.

Cửa sổ bật lên

API popover cung cấp cho các phần tử một số tính năng hỗ trợ trình duyệt tích hợp sẵn như:

• Hỗ trợ lớp trên cùng, vì vậy bạn không cần quản lý z-index. Khi mở một cửa sổ bật lên hoặc hộp thoại, bạn đang chuyển đổi phần tử đó thành một lớp đặc biệt ở trên cùng của trang.
• Hành vi đóng nhanh cho các cửa sổ bật lên auto miễn phí, vì vậy khi bạn nhấp vào bên ngoài một phần tử, cửa sổ bật lên sẽ bị đóng, bị xoá khỏi cây hỗ trợ tiếp cận và tiêu điểm được quản lý đúng cách.
• Khả năng hỗ trợ tiếp cận mặc định cho mô liên kết của mục tiêu của cửa sổ bật lên và chính cửa sổ bật lên.

Tất cả những điều này có nghĩa là bạn sẽ phải viết ít JavaScript hơn để tạo tất cả chức năng này và theo dõi tất cả các trạng thái này.

Cấu trúc DOM cho cửa sổ bật lên có tính khai báo và có thể được viết rõ ràng như khi bạn cung cấp cho phần tử cửa sổ bật lên một id và thuộc tính popover. Sau đó, bạn đồng bộ hoá mã nhận dạng đó với phần tử sẽ mở cửa sổ bật lên, chẳng hạn như một nút có thuộc tính popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover là cách viết tắt của popover=auto. Một phần tử có popover=auto sẽ buộc đóng các cửa sổ bật lên khác khi được mở, nhận tiêu điểm khi được mở và có thể đóng nhanh. Ngược lại, các phần tử popover=manual không buộc đóng bất kỳ loại phần tử nào khác, không nhận được tiêu điểm ngay lập tức và không loại bỏ nhanh. Người dùng đóng các cửa sổ này thông qua một nút bật/tắt hoặc thao tác đóng khác.

Bạn có thể xem tài liệu mới nhất về cửa sổ bật lên trên MDN.

Vị trí điểm neo

Popover cũng thường được dùng trong các phần tử như hộp thoại và chú thích. Những phần tử này thường cần được liên kết với các phần tử cụ thể. Hãy xem ví dụ về sự kiện này. Khi bạn nhấp vào một sự kiện trên lịch, một hộp thoại sẽ xuất hiện gần sự kiện mà bạn đã nhấp vào. Mục lịch là điểm neo và cửa sổ bật lên là hộp thoại hiển thị thông tin chi tiết về sự kiện.

Bạn có thể tạo một chú thích ở giữa bằng hàm anchor(), sử dụng chiều rộng của phần tử neo để đặt chú thích ở 50% vị trí x của phần tử neo. Sau đó, hãy sử dụng các giá trị định vị hiện có để áp dụng các kiểu vị trí còn lại.

Nhưng điều gì sẽ xảy ra nếu cửa sổ bật lên không vừa với khung hiển thị dựa trên cách bạn đặt cửa sổ đó?

Để giải quyết vấn đề này, API định vị điểm neo có các vị trí dự phòng mà bạn có thể tuỳ chỉnh. Ví dụ sau đây sẽ tạo một vị trí dự phòng có tên là "top-then-bottom". Trước tiên, trình duyệt sẽ cố gắng đặt chú thích ở trên cùng và nếu không vừa với khung nhìn, thì trình duyệt sẽ đặt chú thích đó bên dưới phần tử liên kết, ở dưới cùng.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Tìm hiểu thêm về vị trí cố định trong bài đăng này trên blog.

<selectmenu>

Với cả vị trí neo và vị trí cửa sổ bật lên, bạn có thể tạo các trình đơn chọn hoàn toàn có thể tuỳ chỉnh. Nhóm cộng đồng OpenUI đã nghiên cứu cấu trúc cơ bản của các trình đơn này và tìm cách cho phép tuỳ chỉnh mọi nội dung trong trình đơn. Hãy xem những ví dụ trực quan sau:

Để tạo ví dụ selectmenu ở ngoài cùng bên trái, với các dấu chấm có màu tương ứng với màu sẽ xuất hiện trong một sự kiện trên lịch, bạn có thể viết như sau:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Chuyển đổi thuộc tính rời rạc

Để tất cả các cửa sổ bật lên này chuyển đổi vào và ra một cách mượt mà, web cần có cách nào đó để tạo hiệu ứng cho các thuộc tính riêng biệt. Đây là những thuộc tính thường không thể tạo ảnh động trong quá khứ, chẳng hạn như tạo ảnh động đến và đi từ lớp trên cùng cũng như tạo ảnh động đến và đi từ display: none.

Trong quá trình triển khai các hiệu ứng chuyển đổi mượt mà cho cửa sổ bật lên, trình đơn chọn và thậm chí cả các phần tử hiện có như hộp thoại hoặc thành phần tuỳ chỉnh, các trình duyệt đang bật cơ chế mới để hỗ trợ những ảnh động này.

Bản minh hoạ popover sau đây tạo ảnh động cho popover xuất hiện và biến mất bằng cách sử dụng :popover-open cho trạng thái mở, @starting-style cho trạng thái trước khi mở và áp dụng trực tiếp giá trị biến đổi cho phần tử cho trạng thái sau khi mở và đóng. Để tất cả hoạt động này diễn ra với màn hình, bạn cần thêm vào thuộc tính transition, như sau:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Lượt tương tác

Điều này đưa chúng ta đến với các hoạt động tương tác, điểm dừng chân cuối cùng trong chuyến tham quan các tính năng giao diện người dùng trên web này.

Chúng ta đã nói về việc tạo ảnh động cho các thuộc tính rời rạc, nhưng cũng có một số API thực sự thú vị sẽ xuất hiện trong Chrome liên quan đến ảnh động dựa trên thao tác cuộn và hiệu ứng chuyển đổi khung hiển thị

Ảnh động dựa trên thao tác cuộn

Ảnh động dựa trên thao tác cuộn cho phép bạn kiểm soát việc phát ảnh động dựa trên vị trí cuộn của một vùng chứa có thể cuộn. Điều này có nghĩa là khi bạn cuộn lên hoặc xuống, ảnh động sẽ tua đi hoặc tua lại. Ngoài ra, với ảnh động dựa trên thao tác cuộn, bạn cũng có thể kiểm soát ảnh động dựa trên vị trí của một phần tử trong vùng chứa cuộn. Điều này cho phép bạn tạo các hiệu ứng thú vị như hình nền thị sai, thanh tiến trình cuộn và hình ảnh tự xuất hiện khi hiển thị.

API này hỗ trợ một tập hợp các lớp JavaScript và thuộc tính CSS giúp bạn dễ dàng tạo ảnh động dựa trên thao tác cuộn theo cách khai báo.

Để điều khiển một CSS Animation bằng thao tác cuộn, hãy sử dụng các thuộc tính scroll-timeline, view-timeline và animation-timeline mới. Để điều khiển JavaScript Web Animations API, hãy truyền một thực thể ScrollTimeline hoặc ViewTimeline làm tuỳ chọn timeline cho Element.animate()

Các API mới này hoạt động cùng với API Web Animations và CSS Animations hiện có, tức là chúng được hưởng lợi từ những ưu điểm của các API này. Điều này bao gồm cả khả năng chạy các ảnh động này ngoài luồng chính. Đúng vậy, bạn không nghe nhầm đâu: giờ đây, bạn có thể có ảnh động mượt mà, được điều khiển bằng thao tác cuộn, chạy ngoài luồng chính, chỉ với vài dòng mã bổ sung. Bạn không thích điều gì?!

Để xem hướng dẫn chi tiết và toàn diện về cách tạo các ảnh động dựa trên thao tác cuộn này, vui lòng tham khảo bài viết này về ảnh động dựa trên thao tác cuộn.

Xem hiệu ứng chuyển cảnh

View Transition API giúp bạn dễ dàng thay đổi DOM chỉ trong một bước, đồng thời tạo hiệu ứng chuyển đổi giữa hai trạng thái. Đây có thể là những hiệu ứng mờ đơn giản giữa các khung hiển thị, nhưng bạn cũng có thể kiểm soát cách chuyển đổi của từng phần trên trang.

Bạn có thể dùng hiệu ứng chuyển đổi khung hiển thị làm một tính năng Nâng cao dần: lấy mã cập nhật DOM bằng bất kỳ phương thức nào và gói mã đó trong API hiệu ứng chuyển đổi khung hiển thị với một giải pháp dự phòng cho những trình duyệt không hỗ trợ tính năng 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));
}

Bạn có thể kiểm soát giao diện của hiệu ứng chuyển đổi thông qua CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Như minh hoạ trong bản minh hoạ tuyệt vời này của Maxi Ferreira, các hoạt động tương tác khác trên trang (chẳng hạn như phát video) vẫn hoạt động trong khi quá trình Chuyển đổi chế độ xem đang diễn ra.

Chuyển đổi chế độ xem hiện hoạt động với Ứng dụng một trang (SPA) từ Chrome 111. Chúng tôi đang nỗ lực hỗ trợ ứng dụng nhiều trang. Để biết thêm thông tin, hãy xem hướng dẫn đầy đủ về hiệu ứng chuyển đổi chế độ xem để tìm hiểu tất cả.

Kết luận

Hãy theo dõi tất cả các thông tin mới nhất về CSS và HTML ngay tại đây trên developer.chrome.com, đồng thời xem các video về I/O để biết thêm thông tin về web.