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 web. Các tính năng mới của nền tảng đã xuất hiện với sự chấp nhận 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 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ẻ
• bật lên
• vị trí 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 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 xây dựng giao diện logic với các thành phần sở hữu thông tin định kiểu thích ứng, xây dựng giao diện tận dụng các tính năng của hệ thống để cung cấp giao diện người dùng tự nhiên hơn và cho phép người dùng tham gia vào quá trình thiết kế với các truy vấn 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ụ về hộp thư đến sau đây, 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 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, thì các thành phần sẽ phản hồi vớ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 đang được triển khai một phần trong Chrome 111. Tại đây, 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ị của 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 đang thảo luận về truy vấn phạm vi để áp dụng kiểu dựa trên dải giá trị. Điều này cho phép á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 linh hoạt và mạnh mẽ, :has() Chọn là một trong những chức năng CSS mới mạnh mẽ nhất có 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 sự hiện diện của các phần tử con cụ thể hay không hoặc những phần tử con đó có đang ở một 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 hoạt hơn. 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 đá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 ở lựa chọn của cha 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, 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 các bước trong tìm kiếm nhị phân, trình duyệt bắt đầu với 80% độ rộng dòng trung bình.

Tìm hiểu thêm 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 giữ. Độ 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 rộng và chiều cao của khung nhìn lớn (lvh và lvw), thể hiện kích thước lớn nhất. – Chiều rộng và chiều cao của khung nhìn linh động (dvh và dvw).

Đơn vị khung nhìn động thay đổi về giá trị khi 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à trong trường hợp thì không.

Để 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 của phạm vi srgb và điểm bắt đầu của 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.

Bạn có thể xem thêm ví dụ và thông tin chi tiết trong bài đăng trên blog về color-mix trên blog của mình hoặc tham khảo Playground của color-mix() này.

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 nhằm mục đích 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 lồng CSS, lớp tầng, kiểu 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. Lồng ghép cho phép các nhà phát triển viết ở một định dạng theo nhóm một cách ngắn gọn hơn và giảm tình trạng dư 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 tầng

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

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 tầ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 phạm vi phần tử .title với .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 hệ thống ống nước CSS mới khác 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ạ dưới đây, 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 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 xem xét 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 thao tác 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. CSS API giúp chia sẻ Internet hai phần tử với nhau để bật tính năng định vị neo.
3. Thành phần trình đơn thả xuống có thể tuỳ chỉnh khi bạn muốn tạo kiểu cho nội dung bên trong một thành phần đã 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 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 mang tính khai báo và có thể được viết rõ ràng như việc cung cấp id và thuộc tính popover cho phần tử cửa sổ bật lên. 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 đèn. 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.

Định vị quảng cáo cố định cuối màn hình

Cửa sổ 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.

Tuy nhiên, đ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ổ bật lên?

Để 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 sẽ tạo một vị trí dự phòng có tên là "top-the-bottom" (trên cùng thì dưới cùng). 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 đây:

Để 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 tính năng này chuyển đổi cửa sổ bật lên và ra vào suôn sẻ, trang web cần một cách nào đó để tạo ảnh động cho các thuộc tính rời rạc. Đâ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.

Là một phần trong công việc để kích hoạt hiệu ứng chuyển đổi đẹp mắt 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 cho phép hệ thống ống nước mới hỗ trợ những ảnh động này.

Bản minh hoạ cửa sổ bật lên sau đây, tạo hiệu ứng động cho cửa sổ bật lên và xuất hiện khi sử dụng :popover-open cho trạng thái mở, @starting-style cho trạng thái trước khi mở, đồng thời áp dụng trực tiếp giá trị biến đổi cho phần tử ở trạng thái sau khi mở – đó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

Đưa chúng ta đến với 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ẽ tua đi hoặc tua 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 hiển thị chính chúng khi chúng xuất hiện.

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 dựa trên 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 đó bao gồm cả khả năng làm cho những ảnh động này chạy ra khỏi 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. Bạn không thích điểm gì?!

Để xem hướng dẫn chi tiết toàn diện về cách tạo ảnh động dựa trên thao tác cuộn, 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 đổi

View Transition API giúp bạn dễ dàng thay đổi DOM chỉ bằng một bước, đồng thời tạo hiệu ứng chuyển đổi dạng ảnh động giữa hai trạng thái. Đây có thể là hiệu ứng làm mờ đơn giản giữa các lượt xem nhưng bạn cũng có thể kiểm soát cách chuyển đổi cho 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));
}

Quá trình chuyển đổi sẽ trông như thế nào do CSS kiểm soát

@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 nghiên cứu tính năng 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 web.