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 thời kỳ hoàng kim cho giao diện người dùng web. Các tính năng mới của nền tảng đã ra mắt với khả năng hỗ trợ nhiều tính năng tuỳ chỉnh và khả năng web hơn bao giờ hết, đồng thời được áp dụng rộng rãi trên nhiều trình duyệt.

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

• Cụm từ tìm kiếm 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 gam màu rộng
• color-mix()
• Lồng ghép
• Lớp xếp chồng
• Kiểu có giới hạn
• Hàm lượng giác
• Thuộc tính biến đổi riêng lẻ
• thành phần hiển thị bật lên
• định vị neo
• selectmenu
• Chuyển đổi thuộc tính riêng biệt
• Ảnh động do cuộn
• Xem hiệu ứng chuyển đổi

Kiểu thiết kế thích ứng mới

Hãy bắt đầu với một số tính năng thiết kế thích ứng mới. 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 với các thành phần sở hữu thông tin kiểu dáng thích ứng, tạo giao diện tận dụng các tính năng của hệ thống để mang lại giao diện người dùng gốc hơn và cho phép người dùng tham gia vào quá 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ó thể tuỳ chỉnh hoàn toàn.

Truy vấn vùng chứa

Gần đây, truy vấn vùng chứa đã trở nên ổn định trên tất cả trình duyệt hiện đại. Các thuộc tính này cho phép bạn truy vấn kích thước và kiểu của phần tử mẹ để xác định kiểu sẽ áp dụng cho bất kỳ phần tử con nào. 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, tức là chúng 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ụ sau về hộp thư đến, thanh bên Hộp thư đến chính và Yêu thích đều là vùng chứa. Các email trong đó sẽ điều chỉnh bố cục lưới và hiển thị hoặc ẩn dấu thời gian của email dựa trên không gian có sẵn. Đây là cùng một thành phần trong trang, chỉ xuất hiện ở các chế độ xem khác nhau

Vì chúng ta có 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 không gian được phân bổ riêng lẻ. Thanh bên trở thành thanh trên cùng với nhiều không gian hơn và chúng ta thấy bố cục trông giống như hộp thư đến chính. Khi có ít không gian hơn, cả hai đều hiển thị ở định dạng thu gọn.

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

Truy vấn kiểu

Thông số kỹ thuật 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 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 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 kiểu. Trong tương lai, chúng ta sẽ có các truy vấn boolean để xác định xem giá trị thuộc tính tuỳ chỉnh có tồn tại 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 phạm vi để áp dụng kiểu dựa trên một phạm vi giá trị. Điều này cho phép bạn á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 có mưa hoặc lượng mây che phủ.

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 về truy vấn kiểu.

:has()

Nói về các tính năng mạnh mẽ và linh động, bộ chọn:has() là một trong những tính 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 kiểu bằng cách kiểm tra xem phần tử mẹ có chứa các phần tử con cụ thể hay không hoặc các phần tử con đó có ở trạng thái cụ thể hay không. Điều này có nghĩa là về cơ bản, chúng ta hiện có một bộ chọn mẹ.

Dựa trên ví dụ về truy vấn vùng chứa, bạn có thể sử dụng :has() để làm cho các thành phần trở nên linh động hơn nữa. Trong đó, một mục có phần tử "star" (sao) sẽ có nền màu xám và một mục có hộp đánh dấu được chọn 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 thành phần mẹ. Bạn cũng có thể tạo kiểu cho bất kỳ phần tử con nào trong phần tử mẹ. Ví dụ: tiêu đề đượ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. Việc sử dụng bộ chọn :has() cho phép bạn truy cập vào các phần tử mẹ, phần tử con và thậm chí là các phần tử đồng cấp, giúp API này trở nên linh hoạt hơn bao giờ hế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ó lựa chọn con thứ n nâng cao hơn. Cú pháp nâng cao nth-child 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 phần tử con thứ n 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 cho phần tử đó 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 đó.

Hãy khám phá 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 chúng ta có thể nhúng logic vào kiểu; kiểu chữ cũng là một nơi khác. Kể 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 sử 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 thực hiện hiệu quả một lượt tìm kiếm nhị phân cho chiều rộng nhỏ nhất không gây ra dòng nào khác, dừng lại ở một pixel CSS (không phải pixel hiển thị). Để giảm thiểu thêm các bước trong quá trình tìm kiếm nhị phân, trình duyệt 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

initial-letter là một điểm cải tiến khác về kiểu chữ trên web. Thuộc tính CSS này giúp bạn kiểm soát tốt hơn kiểu chữ cái đầu tiên 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 của chữ cái hoặc "vùng chứa" cho 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

Ngày nay, nhà phát triển web thường gặp phải một vấn đề phổ biến là việc định cỡ toàn bộ khung nhìn chính xác và nhất quán, đặc biệt là trên thiết bị di động. Là 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 thứ như thu gọn thanh điều hướng trên thiết bị di động, vì vậy đôi khi nó sẽ 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 khung nhìn nhỏ (hoặc svh và svw), thể hiện kích thước khung nhìn đ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 nhìn độ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 không hiển thị.

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

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

Một điểm mới khác được bổ sung vào nền tảng web là không gian màu rộng. Trước khi màu sắc gam rộng xuất hiện 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 được trên các thiết bị hiện đại, nhưng bạn không thể có nút, màu văn bản hoặc nền phù hợp với các giá trị sống động đó.

Nhưng giờ đây, chúng tôi có một loạt 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 web mới và nhiều thông tin khác trong Hướng dẫn về màu HD.

Và bạn có thể thấy ngay trong DevTools cách phạm vi màu đã mở rộng, với đường màu trắng đó xác định điểm kết thúc phạm vi srgb và điểm bắt đầu phạm vi màu có gam màu rộng hơn.

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

color-mix()

Hàm color-mix() mở rộng không gian màu mở rộng. Hàm này hỗ trợ việc kết hợp hai giá trị màu để tạo giá trị mới dựa trên các kênh của màu sắc được kết hợp. Không gian màu mà bạn kết hợp sẽ ảnh hưởng đến kết quả. Việc làm việc trong không gian màu cảm nhận được nhiều hơn như oklch sẽ chạy qua một dải màu khác với các 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 duy trì các giá trị màu mờ trong khi thêm một số độ trong suốt vào 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 là kết hợp một màu với màu trong suốt. Khi pha màu xanh dương của thương hiệu với 10% độ trong suốt, bạn sẽ có màu thương hiệu mờ 90%. Bạn có thể thấy cách làm này giúp bạn nhanh chóng xây dựng hệ thống màu sắc.

Bạn có thể xem tính năng này hoạt động trong Công cụ của Chrome cho nhà phát triển ngay hôm nay với 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 về color-mix hoặc thử sân chơi color-mix().

Kiến thức cơ bản về CSS

Việc xây dựng các tính 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 đều 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. Các tính năng này bao gồm lồng CSS, lớp xếp chồng, kiểu trong 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 mà mọi 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 đã ra mắt trên nền tảng web. Tính năng lồng cho phép nhà phát triển viết theo định dạng nhóm ngắn gọn hơn, giúp giảm bớt mã thừa.

.card {}
.card:hover {}

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

  }
}

Bạn cũng có thể lồng Truy vấn nội dung nghe nhìn, tức là bạn có thể lồng Truy vấn vùng chứa. Trong ví dụ sau, thẻ sẽ được 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 không gian nội tuyến hơn (hoặc bằng) 480px. 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ề lồng CSS.

Lớp xếp chồng

Một vấn đề khác mà nhà phát triển gặp phải mà chúng tôi đã xác định được là đảm bảo tính nhất quán trong việc kiểu nào thắng kiểu khác. Một phần để giải quyết vấn đề này là có quyền kiểm soát tốt hơn đối với CSS dạng thác nước.

Lớp xếp chồ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 so với các lớp khác, nghĩa là có thể kiểm soát chi tiết hơn thời điểm áp dụng kiểu.

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

CSS có giới hạn

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

Ở đây, chúng ta đang đặt phạm vi cho phần tử .title thành .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ể thấy @scope với các giới hạn phạm vi cùng với @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ấu trúc 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ả 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ụ tuyệt vời là bố cục trình đơn hình tròn này. Giờ đây, bạn có thể thiết kế và tạo ảnh động bằ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 xung quanh tâm của chính dấu chấm đó rồi di chuyển ra ngoài, mỗi dấu chấm đượ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() của --angle tương ứng.

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

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

Các chức năng chuyển đổi riêng lẻ tiếp tục cải thiện tính công thái học cho nhà phát triển. Kể từ lần tổ chức I/O gần đây nhất, các phép biến đổi riêng lẻ đã hoạt động ổn định trên tất 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ụ cho việc điều chỉnh tỷ lệ, xoay và dịch một thành phần trên giao diện người dùng. Việc này liên quan đến nhiều hoạt động lặp lại và đặc biệt 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 phép biến đổi và áp dụng từng loại.

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

.target:hover {
  scale: 2;
}

Nhờ đó, các thay đổi về dịch chuyển, xoay hoặc tỷ lệ có thể xảy ra đồng thời ở các tốc độ thay đổi khác nhau tại các thời điểm khác nhau trong ả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 được 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 cửa sổ 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 API CSS để liên kết hai phần tử với nhau nhằm cho phép định vị neo.
3. Một thành phần trình đơn thả xuống có thể tuỳ chỉnh, dành cho trường hợp bạn muốn tạo kiểu cho nội dung bên trong một phần lựa chọn.

Cửa sổ bật lên

API cửa sổ bật lên 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, chẳng hạn như:

• Hỗ trợ lớp trên cùng để bạn không phải 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 quảng bá phần tử đó lên một lớp đặc biệt ở đầu trang.
• Hành vi đóng nhẹ trong cửa sổ bật lên auto, 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.
• Tính 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 phải viết ít mã 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 là khai báo và có thể được viết rõ ràng như việc 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ư 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à 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 mở, nhận tiêu điểm khi mở và có thể đóng nhẹ. 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 tiêu điểm ngay lập tức và không đóng nhanh. Các cửa sổ này đóng thông qua nút bật/tắt hoặc thao tác đóng khác.

Bạn hiệ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í neo

Hộp bật lên cũng thường được dùng trong các phần tử như hộp thoại và chú giải công cụ, 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à phần 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 chú giải công cụ ở giữa bằng hàm anchor(), sử dụng chiều rộng từ neo để đặt chú giải công cụ ở vị trí x là 50% của vị trí x của 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 nhìn dựa trên cách bạn đã định vị cửa sổ đó?

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

<selectmenu>

Với cả vị trí popover và neo, bạn có thể tạo trình đơn chọn hoàn toàn có thể tuỳ chỉnh. Nhóm cộng đồng OpenUI đã điều tra 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 đó. Hãy xem các 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ẽ hiển thị 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 riêng biệt

Để tất cả những điều này chuyển đổi các cửa sổ bật lên một cách trơn tru, web cần có một số cách để tạo ảnh độ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 trước đây, 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 hỗ trợ 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 thành phần hiện có như hộp thoại hoặc thành phần tuỳ chỉnh, trình duyệt đang bật tính năng mới để hỗ trợ các ảnh động này.

Bản minh hoạ về cửa sổ bật lên sau đây tạo ảnh động cho cửa sổ bật lên 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ở là đóng. Để tất cả hoạt động này hoạt động 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 phần tương tác, điểm dừng cuối cùng trong chuyến tham quan các tính năng giao diện người dùng web này.

Chúng ta đã thảo luận về việc tạo ảnh động cho các thuộc tính riêng biệt, nhưng cũng có một số API thực sự thú vị sẽ ra mắt trong Chrome liên quan đến ảnh động do cuộn và chuyển đổi chế độ xem

Ảnh động do cuộn

Ảnh động do cuộn điều khiể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 vùng chứa cuộn. Điều này có nghĩa là khi bạn cuộn lên hoặc xuống, ảnh động sẽ chạy tới hoặc lùi. Ngoài ra, với ảnh động do 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ự hiển thị khi xuất hiện trong khung 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 cho phép bạn dễ dàng tạo ảnh động do cuộn khai báo.

Để điều khiển Ảnh động CSS bằng cách 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 API Ảnh động trên web JavaScript, hãy truyền một thực thể ScrollTimeline hoặc ViewTimeline dưới dạng tuỳ chọn timeline đến Element.animate()

Các API mới này hoạt động cùng với các API Ảnh động trên web và Ảnh động CSS hiện có, nghĩa là các API này đượ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 trên luồng chính. Đúng vậy, bạn đã đọc đúng: giờ đây, bạn có thể có ảnh động mượt mà, do thao tác cuộn điều khiển, chạy trên luồng chính, chỉ với vài dòng mã bổ sung. Còn gì tuyệt hơn thế nữa!

Để biết hướng dẫn chi tiết về cách tạo ảnh động do cuộn, vui lòng tham khảo bài viết này về ảnh động do cuộn.

Xem hiệu ứng chuyển đổi

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

Bạn có thể sử dụng tính năng Chuyển đổi khung hiển thị dưới dạng tính năng Cải tiến dần: lấy mã cập nhật DOM theo bất kỳ phương thức nào và gói mã đó trong API chuyển đổi khung hiển thị với phương thức dự phòng cho các 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));
}

Giao diện chuyển đổi sẽ được kiểm soát 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 lượt tương tác khác trên trang, chẳng hạn như phát video, vẫn hoạt động trong khi Chuyển đổi thành phần hiển thị đang diễn ra.

Hiệu ứng chuyển đổi khung hiển thị 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 khung hiển thị để nắm được toàn bộ thông tin.

Kết luận

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