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 khả năng mới trên nền tảng đã xuất hiện với việc áp dụng chặt chẽ trên nhiều trình duyệt, hỗ trợ nhiều khả 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 mạnh mẽ nhất vừa ra mắt gần đây hoặc sắp ra mắt:
- Truy vấn vùng chứa
- Truy vấn kiểu
- Bộ chọn
:has() - thứ n trong vi cú pháp
text-wrap: balanceinitial-letter- Đơn vị khung nhìn động
- Không gian màu Gam rộng
color-mix()- Lồng ghép
- Phân lớp
- Kiểu có phạm vi
- Hàm lượng giác
- Chuyển đổi từng tài sản
- cửa sổ bật lên
- vị trí neo
- trình đơn chọn
- Chuyển đổi tách biệt tài sản
- Ảnh động hướng cuộn
- Hiệu ứng chuyển đổi khung hiển thị
Quảng cáo đáp ứng mới
Hãy bắt đầu với một số khả 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 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 các giao diện tận dụng các chức năng của hệ thống để mang lại giao diện thân thiện hơn, đồng thời cho phép người dùng tham gia vào quá trình thiết kế thông qua 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 chỉnh.
Truy vấn vùng chứa
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. Chúng 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 mọi phần tử con. Truy vấn phương tiện chỉ có thể truy cập và tận dụng thông tin từ khung nhìn, có nghĩa là chúng chỉ có thể hoạt động trên chế độ xem macro của 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ợ tuỳ ý số lượng bố cục trong bố cục.
Trong ví dụ về hộp thư đến sau, thanh bên 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 đó điều chỉnh bố cục lưới và hiện hoặc ẩn dấu thời gian email dựa trên không gian hiện có. Đây là thành phần giống hệt như vậy trong trang, chỉ xuất hiện trong các chế độ xem khác nhau
Do 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 với không gian được phân bổ riêng lẻ của chúng. Thanh bên trở thành thanh trên cùng có nhiều không gian hơn và chúng ta thấy bố cục trông giống với hộp thư đến chính hơn. 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ề các truy vấn vùng chứa và cách xây dựng các thành phần logic trong bài đăng này.
Truy vấn kiểu
Thông số 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, nơi 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 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 chỉ là bước khởi đầu đối với truy vấn 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 tình trạng lặp lại mã. Các truy vấn hiện đang được thảo luận là truy vấn phạm vi để áp dụng kiểu dựa trên một dải giá trị. Nhờ đó, bạn có thể áp dụng các kiểu được hiển thị ở đây bằng cách sử dụng giá trị phần trăm khả năng có mưa hoặc mây che phủ.
Bạn có thể tìm hiểu thêm và xem thêm bản minh hoạ trong bài đăng trên blog về truy vấn kiểu của chúng tôi.
:has()
Nói về các tính năng động và mạnh mẽ, :has() selector là một trong những chức năng CSS mới mạnh mẽ nhất trang đích 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ó sự hiện diện của các phần tử con cụ thể hay không, hoặc các 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 đã có bộ chọn gốc.
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 linh động hơn nữa. Trong ví dụ này, một mục có phần tử "dấu 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ặt hàng 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ẹ, các phần tử con và thậm chí cả các phần tử đồng cấp, giúp API này thực sự linh hoạt, trong đó có 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 thứ n
Hỗ trợ trình duyệt
- 111
- 111
- 113
- 9
Nền tảng web hiện có lựa chọn con thứ n nâng cao hơn. Cú pháp con thứ n nâng cao cung cấp từ khoá mới ("of"), cho phép bạn sử dụng cú pháp vi mô hiện tại 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 nó 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 từ danh sách đó.
Hãy khám phá thêm về tính năng này trong bài viết của chúng tôi về cú pháp thứ n.
text-wrap: balance
Bộ chọn và truy vấn kiểu không phải là nơi duy nhất chúng ta có thể nhúng logic trong các kiểu chữ; kiểu chữ là một nơi khác. Trên Chrome 114, bạn có thể dùng tính năng Cân bằng bao bọc 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 tìm kiếm nhị phân hiệu quả với chiều rộng nhỏ nhất mà không tạo thêm bất kỳ dòng nào, dừng ở 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 sẽ bắt đầu bằng 80% chiều rộng trung bình của dòng.
Tìm hiểu thêm trong bài viết này.
initial-letter
Một điểm cải tiến thú vị khác đối với kiểu chữ dành cho web là initial-letter. Thuộc tính CSS này cho phép bạn kiểm soát tốt hơn việc tạo kiểu mũ thả lồng.
Bạn sẽ 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ố lượng dòng mà chữ cái đó chiếm.
Phần bù trừ khối của thư, hay còn gọi là "bể chứa", đối với vị trí của bức thư.
Tìm hiểu thêm về cách sử dụng intial-letter tại đây.
Đơn vị khung nhìn linh động
Hỗ trợ trình duyệt
- 108
- 108
- 101
- 15,4
Một vấn đề mà các nhà phát triển web thường gặp phải ngày nay là chọn kích thước khung hình toàn bộ một cách 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 ảnh hưởng đến những yếu tố như rút lại thanh điều hướng trên thiết bị di động, vì vậy, đôi khi quá dài dẫn đến 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), đại diện cho kích thước nhỏ nhất của khung nhìn đang hoạt động.
– Chiều cao và chiều rộng lớn nhất của khung nhìn (lvh và lvw), thể hiện kích thước lớn nhất.
– Chiều cao và chiều rộng của khung nhìn linh động (dvh và dvw).
Đơn vị khung nhìn động thay đổi 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à khi 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.
Hệ màu rộng Gam
Một khoá bổ sung mới khác cho nền tảng web là hệ màu rộng. Trước khi chế độ màu rộng có sẵn trên nền tảng web, bạn có thể chụp ảnh có màu sắc sặc sỡ, có thể xem được trên các thiết bị hiện đại, nhưng lại không có nút, màu văn bản hoặc nền nào khớp với các giá trị sống động đó.
Hãy tự mình dùng thử
Nhưng giờ đây, chúng tôi có một loạt các 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. Làm quen với hệ màu mới trên web và nhiều tính năng khác trong Hướng dẫn màu HD.
Và bạn có thể thấy ngay trong Công cụ cho nhà phát triển cách phạm vi màu mở rộng, với đường màu trắng mô tả nơi kết thúc phạm vi srgb và nơi phạm vi màu rộng hơn bắt đầu.
Có nhiều công cụ khác để tô màu! Cũng đừng bỏ lỡ tất cả những cải tiến tuyệt vời về độ dốc. 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ử công cụ chọn màu dành cho web và trình tạo độ dốc mới. Hãy dùng thử tại gradient.style.
phối màu()
Mở rộng trên hệ màu mở rộng là hàm color-mix(). Hàm này hỗ trợ việc kết hợp 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. Hệ màu mà bạn kết hợp ảnh hưởng đến kết quả. Khi làm việc trong một hệ màu cảm tính hơn, chẳng hạn như oklch, một dải màu khác với 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 tính năng được yêu cầu từ lâu: khả năng giữ nguyên các giá trị màu mờ đồng thời thêm một số độ trong suốt vào các giá trị đó. Giờ đây, bạn có thể sử dụng biến màu sắc thương hiệu của mình trong khi tạo biến thể của những màu đó ở nhiều độ mờ khác nhau. Cách thực hiện là kết hợp màu với độ trong suốt. Khi kết hợp màu thương hiệu của mình là màu xanh dương với 10% độ trong suốt, bạn sẽ có màu thương hiệu mờ 90%. Bạn có thể thấy việc này giúp các em nhanh chóng xây dựng các hệ thống màu như thế nào.
Bạn có thể xem ví dụ thực tế hôm nay trong Công cụ của Chrome cho nhà phát triển với biểu tượng sơ đồ venn xem trước thực sự đẹp mắt trong ngăn kiểu.
Xem thêm ví dụ và chi tiết trong bài đăng trên blog về phối màu của chúng tôi hoặc thử playground color-mix() này.
Nền tảng CSS
Việc xây dựng các tính năng mới để thu hút người dùng rõ ràng là một phần trong quá trình xây dựng, nhưng nhiều tính năng xuất hiện trong Chrome có mục tiêu là cải thiện trải nghiệm của nhà phát triển và tạo ra kiến 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 phân tầng, kiểu theo 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
Dịch vụ lồng ghép CSS (một tính năng mà mọi người yêu thích trên 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 nay cuối cùng cũng đã có mặt trên nền tảng web. Việc lồng ghép cho phép nhà phát triển viết theo định dạng ngắn gọn hơn, được nhóm theo nhóm 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 Cụm từ tìm kiếm về nội dung nghe nhìn lồng nhau, cũng có nghĩa là bạn có thể lồng các Cụm từ tìm kiếm về vùng chứa với nhau. Trong ví dụ sau, thẻ sẽ được thay đổi từ bố cục dọc sang bố cục ngang nếu vùng chứa có đủ chiều rộng:
.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 hơn (hoặc bằng) 480px không gian cùng dòng. Trình duyệt sẽ chỉ áp dụng kiểu hiển thị mới đó khi đáp ứng các điều kiện.
Để biết thêm thông tin và ví dụ, hãy xem bài đăng của chúng tôi về Việc lồng ghép Dịch vụ so sánh giá.
Lớp tầng
Một vấn đề khác mà nhà phát triển gặp phải là phải đảm bảo tính nhất quán trong việc ưu tiên những kiểu khác. Để giải quyết vấn đề này, chúng tôi cần kiểm soát hiệu quả hơn tầng CSS.
Lớp phủ 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, nghĩa là khả năng kiểm soát tinh chỉnh hơn đối với thời điểm áp dụng kiểu của bạn.
Tìm hiểu thêm về cách sử dụng lớp thác nước trong bài viết này.
Dịch vụ so sánh giá (CSS) có phạm vi
Hỗ trợ trình duyệt
- 118
- 118
- x
- 17,4
Kiểu phạm vi CSS cho phép nhà phát triển chỉ định ranh giới áp dụng kiểu cụ thể, về cơ bản là tạo khoảng cách tên gốc trong CSS. Trước đây, các nhà phát triển sử dụng tập lệnh của bên thứ ba để đổi tên các lớp hoặc theo quy ước đặt tên cụ thể để ngăn chặn xung đột về kiểu, nhưng bạn sẽ sớm có thể sử dụng @scope.
Ở đây, chúng ta đang xác định phạm vi của phần tử .title theo .card. Thao tác này sẽ ngăn thành phần tiêu đề xung đột với mọi phần tử .title khác trên trang, chẳng hạn như tiêu đề của một 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ó 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 thông số kỹ thuật css-cascade-6.
Hàm lượng giác
Một phần khác của hệ thống ống nước CSS 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 thêm bố cục tự nhiên trên nền tảng web. Một ví dụ điển hình là bố cục trình đơn dạng 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 chính nó rồi di chuyển ra ngoài, mỗi dấu chấm sẽ được dịch chuyển 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 xét đến cos() và sin() của --angle tương ứng.
Hãy xem bài viết về hàm lượng giác của chúng tôi để 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ải thiện với các hàm biến đổi riêng lẻ. Kể từ lần gần đây nhất chúng tôi tổ chức I/O, các biến đổi riêng lẻ đã đi vào ổn định trên tất cả các trình duyệt hiện đại.
Trước đây, bạn thường 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à chuyển đổi thành phần trên giao diện người dùng. Điều này liên quan đến rất nhiều lần lặp lại và đặc biệt khó chịu khi áp dụng nhiều phép biến đổi ở những 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ể xem tất cả những 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 riêng từng loại.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.target:hover {
scale: 2;
}
Với phương pháp này, thay đổi về bản dịch, chế độ xoay hoặc tỷ lệ có thể xảy ra đồng thời với tốc độ thay đổi khác nhau ở những thời điểm khác nhau trong quá trình tạo ảnh động.
Hãy xem bài đăng về từng hàm biến đổi để 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 phối hợp với nhóm cộng đồng OpenUI và xác định ba giải pháp để bắt đầu:
- Tích hợp chức năng bật lên với trình xử lý sự kiện, cấu trúc DOM khai báo và các chế độ mặc định có thể truy cập.
- CSS API để chia sẻ kết nối hai phần tử với nhau nhằm bật tính năng định vị neo.
- Thành phần trình đơn thả xuống có thể tuỳ chỉnh được 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 mang đến cho các phần tử một số tính năng kỳ diệu 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, vì vậy, bạn không phải quản lý
z-index. Khi bạn mở 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 nhanh miễn phí 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. - Khả năng truy cập 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à sẽ ít phải viết JavaScript hơn để tạo tất cả chức năng 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ư cung cấp cho phần tử cửa sổ bật lên 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à 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 sáng. 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 cũng như không đóng đèn. Chúng đóng thông qua nút bật/tắt hoặc một thao tác đóng khác.
Hiện tại, bạn có thể tìm thấy tài liệu mới nhất về cửa sổ bật lên trên MDN.
Định vị neo
Cửa sổ bật lên cũng thường được dùng trong các thành phần như hộp thoại và chú giải công cụ. Những thành phần này thường cần liên kết với một số thành phần cụ thể. Hãy lấy 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à liên kết, còn 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 của điểm neo để đặt chú giải công cụ ở vị trí 50% x vị trí của điểm neo. Sau đó, sử dụng các giá trị vị trí hiện tại để á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 đã xác định vị trí?
Để 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- then-bottom" (trên cùng rồi 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 chú thích không vừa với khung nhìn, thì trình duyệt sẽ đặt chú giải công cụ vào 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ề vị trí neo trong bài đăng trên blog này.
<selectmenu>
Với cả cửa sổ bật lên và vị trí neo, bạn có thể tạo các trình đơn lựa chọn hoàn toàn có thể tuỳ chỉnh. Nhóm cộng đồng OpenUI đang 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 đó. 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 rời rạc
Để tất cả những việc này chuyển đổi cửa sổ bật lên và cửa sổ bật lên một cách suôn sẻ, web cần 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 được trước đây, chẳng hạn như tạo ảnh động cho và từ lớp trên cùng cũng như tạo ảnh động cho và từ display: none.
Trong nỗ lực nhằm mang lại hiệu ứng chuyển cảnh đẹp mắt cho cửa sổ bật lên, trình đơn chọn lọc và thậm chí cả 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 hệ thống ống nước mới để hỗ trợ các ảnh động này.
Bản minh hoạ cửa sổ bật lên sau đây, tạo ảnh động cho các cửa sổ bật lên vào và ra 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ử đối với trạng thái sau khi mở – đóng. Để tất cả đều 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;
}
Số lượt tương tác
Quá trình này đưa chúng ta đến các 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 đã nói về cách 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ị xuất hiện trong Chrome xoay quanh ảnh động cuộn và hiệu ứng chuyển đổi chế độ xem
Ảnh động di chuyển theo thao tác cuộn
Ảnh động hướng thao tác cuộn cho phép bạn điều khiển 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 về phía trước hoặc phía sau. Ngoài ra, với ảnh động hướng 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 của phần tử đó. Đ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 xuất hiện khi 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 theo hướng cuộn khai báo.
Để thúc đẩy ả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 web JavaScript, hãy truyền 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 CSS và Ảnh động CSS hiện có, nghĩa là chúng được hưởng lợi từ những ưu điểm của các API này. Điều đó bao gồm khả năng chạy những ảnh động này chạy khỏi luồng chính. Có, hãy đọc chính xác: giờ đây, bạn có thể có các hoạt ảnh mượt mà, được điều khiển bằng thao tác cuộn, chạy ra khỏi chuỗi chính, chỉ với một vài dòng mã bổ sung. Không thích gì?!
Để xem hướng dẫn chuyên sâu toàn diện về cách tạo ảnh động hướng cuộn, vui lòng tham khảo bài viết này về ảnh động hướng cuộn.
Xem hiệu ứng chuyển đổi
View Transition API (API Chuyển đổi khung hiển thị) giúp bạn dễ dàng thay đổi DOM trong một bước, trong khi tạo hiệu ứng chuyển đổi động giữa hai trạng thái. Bạn có thể làm mờ một cách đơn giản giữa các chế độ xem, nhưng bạn cũng có thể kiểm soát cách chuyển đổi giữa các phần của trang.
Bạn có thể sử dụng hiệu ứng Chuyển đổi khung hiển thị dưới dạng Cải tiến tăng 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 chuyển đổi khung hiển thị với tính năng 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ư Maxi Ferreira đã minh hoạ trong bản minh hoạ tuyệt vời này, các hoạt động tương tác khác trên trang (chẳng hạn như một video đang phát) tiếp tục hoạt động trong khi một Chuyển đổi chế độ xem đang diễn ra.
Chuyển đổi chế độ xem hiện hoạt động với Ứng dụng trang đơn (SPA) từ Chrome 111. Đang xây dựng tính năng hỗ trợ nhiều trang cho ứng dụng. Để tìm hiểu thêm, hãy xem toàn bộ hướng dẫn về cách chuyển đổi chế độ xem để được hướng dẫn.
Kết luận
Cập nhật 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 các video I/O để biết thêm các trang đích web khác.