Tối ưu hoá và điều chỉnh cho phù hợp với những người dùng thích giao diện người dùng không rõ ràng.
Trên Chrome 118, chúng tôi đã cung cấp tính năng truy vấn nội dung nghe nhìn mới prefers-reduced-transparency trong CSS Media Query 5. Giao diện không mờ có thể gây đau đầu hoặc gây khó khăn về thị giác cho nhiều loại khiếm khuyết về thị lực. Đây là lý do Windows, macOS và iOS có các lựa chọn ưu tiên về hệ thống có thể làm giảm hoặc xoá độ trong suốt khỏi giao diện người dùng.
Với truy vấn phương tiện mới này trong trình duyệt, CSS có thể điều chỉnh giao diện cho người dùng chỉ định mong muốn giảm độ trong suốt:
.example {
--opacity: .5;
background: hsl(200 100% 50% / var(--opacity));
@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}
Trong ví dụ về mã trên, một biến CSS chứa giá trị độ mờ tại 50%, sau đó được dùng với HSL để tạo nền màu xanh dương bán trong suốt. Truy vấn nội dung đa phương tiện lồng nhau để tìm lựa chọn ưu tiên của người dùng về độ trong suốt giảm. Khi giá trị là true, sẽ điều chỉnh biến độ mờ thành 95%, một giá trị độ mờ gần như mờ.
Truy vấn nội dung nghe nhìn này phù hợp với các truy vấn nội dung nghe nhìn ưu tiên khác, cho phép nhà thiết kế và nhà phát triển thoả sức sáng tạo trong khi vẫn điều chỉnh cho phù hợp với người dùng. Bạn có thể xem những cụm từ tìm kiếm này như một chiếc ghế trong ô tô tự động điều chỉnh vị trí theo người dùng; khi người dùng truy cập vào trang web của bạn, trang web đó sẽ tự động điều chỉnh theo các cụm từ tìm kiếm đó mà không cần họ yêu cầu. Rất thú vị.
Các trường hợp sử dụng để giảm độ trong suốt
Một vài phần tiếp theo sẽ tập trung trình bày những khoảnh khắc và cơ hội để giảm độ trong suốt theo cách có ý nghĩa.
Chú thích nửa trong suốt trên hình ảnh
Khá phổ biến việc phủ hình thu nhỏ của hình ảnh hoặc video kèm theo chú thích hoặc phần tóm tắt nửa trong suốt. Ví dụ sau minh hoạ một cách xử lý lựa chọn ưu tiên giảm độ trong suốt. Lớp phủ bị xoá hoàn toàn và nội dung phụ đề tương tự hiển thị bên dưới hình ảnh thay vì bị chồng lên.
Các cửa sổ, thông báo và cửa sổ bật lên trong suốt
Các thành phần trên giao diện người dùng phủ lên nội dung (thường có nghĩa là các thành phần mờ có mặt) là sử dụng các phương thức, thông báo và cửa sổ bật lên. Trong những trường hợp này, việc tăng độ mờ có thể tôn trọng lựa chọn ưu tiên của người dùng trong khi vẫn cho phép một lượng màu nhỏ từ phía sau lớp phủ để xem qua.
.card {
background: hsl(none none 100% / 20%);
@media (prefers-reduced-transparency: reduce) {
background: hsl(none none 0% / 80%);
}
}
Kính mờ thích ứng
Một kiểu lớp phủ hình ảnh phổ biến khác là kính mờ. Trong ví dụ sau, hình ảnh phía sau chú thích là sự phản chiếu phản chiếu của hình ảnh sản phẩm. Điều này có một số ưu điểm: hình ảnh không bị cắt và lựa chọn sáng hoặc tối có thể nhiều hơn một chút trong kết quả cuối cùng.
.adaptive-glass {
--glass-lightness: 100%;
--glass-alpha: 50%;
background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
backdrop-filter: blur(40px);
@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}
@media (prefers-reduced-transparency: reduce) {
--glass-alpha: 85%;
}
}
Tiêu đề chính
Một thành phần trang chủ phổ biến có thông điệp in đậm phía trên một video lặp lại hoặc ảnh động. Ví dụ sau đây có lớp phủ chuyển màu bán trong suốt nhiều màu sắc và hình nền động vô hạn. Mặc dù tính năng này có thể thu hút nhiều người, nhưng cũng sẽ gây ra vấn đề cho nhiều người, do độ tương phản thấp với độ trong suốt và chuyển động không thể kiểm soát.
Bạn có thể khắc phục vấn đề này bằng 2 truy vấn nội dung nghe nhìn CSS: prefers-reduced-motion và prefers-reduced-transparency. Trong truy vấn nội dung nghe nhìn giảm chuyển động, bạn chỉ có thể áp dụng ảnh động vô hạn nếu người dùng "không ưu tiên" việc giảm chuyển động, báo hiệu cho mã rằng người dùng này có thể thực hiện chuyển động.
Hơn nữa, bằng truy vấn nội dung nghe nhìn có độ trong suốt giảm, bạn có thể giảm độ mờ để màu lớp phủ lên gần 100%. Giờ đây, bạn có thể dễ dàng đọc tin nhắn mà không bị phân tâm do chuyển động hoặc độ tương phản có vấn đề.
Kết hợp tất cả lại với nhau, bạn có thể triển khai một giao diện người dùng sáng tạo, đồng thời đảm bảo đối tượng mục tiêu có thể đọc và nhận được thông điệp.
.Hero img {
@media (prefers-reduced-motion: no-preference) {
animation: zoom 30s ease infinite;
}
}
.Hero .overlay {
background: hsl(none none 0% / 95%);
@media (prefers-reduced-transparency: no-preference) {
background: linear-gradient(
to top right in oklab,
oklch(40% 0.3 340 / 70%),
oklch(40% 0.4 200 / 70%)
);
}
}
Quan điểm bổ sung và hạn chế về lựa chọn ưu tiên của người dùng
Ví dụ trước không kiểm tra các lựa chọn ưu tiên của người dùng để giảm mức độ ưu tiên của họ, mà thay vào đó kiểm tra để tìm lựa chọn không ưu tiên.
@media (prefers-reduced-transparency: no-preference) {
…
}
Các nhà phát triển và nhà thiết kế thường "dự phòng" trải nghiệm người dùng dựa trên các lựa chọn ưu tiên này theo cách ít hơn. Tệp này sẽ xuất hiện trong các truy vấn nội dung đa phương tiện dưới dạng mục kiểm tra "reduce" (giảm)), tại thời điểm đó nội dung nào đó khỏi giao diện người dùng bị xoá. Ví dụ này cho thấy một tư duy bổ sung, trong đó chuyển động và độ trong suốt được thêm vào nếu người dùng ổn với điều đó.
Phương pháp này giúp bạn suy nghĩ về một trải nghiệm cơ sở an toàn và mạnh mẽ. Sau đó, nếu người dùng đồng ý, hãy thêm vào trải nghiệm.
Công cụ cho nhà phát triển
Công cụ của Chrome cho nhà phát triển có thể mô phỏng lựa chọn ưu tiên này để giảm độ trong suốt (và nhiều lợi ích khác) trong thẻ Hiển thị. Trong video sau đây, hãy xem cách bật/tắt các truy vấn nội dung nghe nhìn ưu tiên màu sắc và ưu tiên độ trong suốt để hiển thị các biến thể sáng, tối, trong suốt và giảm độ trong suốt của thẻ kính mờ.