Ưu tiên của CSS

Tối ưu hoá và điều chỉnh cho những người dùng thích giao diện người dùng mờ.

Adam Argyle

Kể từ Chrome 118, tính năng truy vấn nội dung đa phương tiện mới prefers-reduced-transparency từ Truy vấn nội dung đa phương tiện CSS 5 sẽ có sẵn. 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 thị. Đây là lý do Windows, macOS và iOS có các tuỳ chọn hệ thống có thể giảm hoặc loại bỏ độ trong suốt khỏi giao diện người dùng.

Với truy vấn nội dung đa 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ước, một biến CSS giữ giá trị độ mờ tại 50%, sau đó được sử 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 nghe nhìn lồng nhau sẽ kiểm tra lựa chọn ưu tiên của người dùng về việc giảm độ trong suốt và khi đúng, 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 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ể coi các truy vấn nội dung đa phương tiện này giống như một chiếc ghế trong ô tô tự động điều chỉnh vị trí cho người dùng; khi người dùng truy cập vào trang web của bạn, chiếc ghế này sẽ tự động điều chỉnh cho phù hợp với họ mà không cần họ yêu cầu. Thật tuyệt.

Các trường hợp sử dụng để giảm độ trong suốt

Vài phần tiếp theo sẽ dành để trình bày những khoảnh khắc và cơ hội để giảm độ trong suốt theo những cách có ý nghĩa.

Phụ đề nửa trong suốt trên hình ảnh

Việc phủ hình thu nhỏ của hình ảnh hoặc video bằng chú thích hoặc nội dung tóm tắt bán trong suốt là khá phổ biến. Ví dụ sau đây minh hoạ một cách để xử lý lựa chọn ưu tiên giảm độ trong suốt. Lớp phủ sẽ bị xoá hoàn toàn và nội dung chú thích tương tự sẽ hiển thị bên dưới hình ảnh thay vì được phủ lên.

Cửa sổ bật lên, thông báo và cửa sổ bật lên trong suốt

Một cách khác để 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 có độ mờ xuất hiện) là thông qua các cửa sổ bật lên, 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ể tuân theo lựa chọn ưu tiên của người dùng, đồng thời vẫn cho phép một lượng màu sắc tinh tế từ phía sau lớp phủ lấp ló.

.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à hình ảnh 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 ưu tiên sáng hoặc tối có thể xuất hiện 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 phổ biến trên trang chủ có một thông báo in đậm phủ lên một video lặp lại hoặc hình ảnh động. Ví dụ sau đây có một lớp phủ chuyển màu bán trong suốt đầy màu sắc và hình ảnh nền động vô hạn. Mặc dù điều này có thể thu hút nhiều người xem, 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 hai truy vấn nội dung đa phương tiện CSS: prefers-reduced-motion và prefers-reduced-transparency. Trong truy vấn nội dung đa phương tiệ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 có lựa chọn ưu tiên" về việc giảm chuyển động, báo hiệu cho mã rằng người dùng này có thể có chuyển động.

Hơn nữa, với truy vấn nội dung nghe nhìn giảm độ trong suốt, bạn có thể giảm độ mờ để màu lớp phủ gần như đạt 100%. Giờ đây, bạn có thể dễ dàng đọc thông báo mà không bị phân tâm bởi chuyển động hoặc độ tương phản có vấn đề.

Khi kết hợp tất cả các yếu tố này, bạn có thể triển khai 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à hiểu đượ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 so với quan điểm trừu tượng 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 này của người dùng để biết mức độ ưu tiên giảm xuống, thay vào đó, ví dụ này kiểm tra xem có lựa chọn ưu tiên nào hay không.

@media (prefers-reduced-transparency: no-preference) {
  …
}

Các nhà phát triển và nhà thiết kế thường "phản hồi" trải nghiệm người dùng dựa trên các lựa chọn ưu tiên này theo tâm lý trừu tượng. Điều này thể hiện trong các truy vấn nội dung nghe nhìn dưới dạng một lượt kiểm tra "giảm", tại thời điểm đó, một nội dung nào đó sẽ bị xoá khỏi giao diện người dùng. 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 đồng ý.

Phương pháp này giúp bạn suy nghĩ về một trải nghiệm cơ sở vững chắc 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 tuỳ chọn này để giảm độ trong suốt (và nhiều tuỳ chọn khác) trong thẻ Kết xuất. Trong video sau, hãy xem cách bật/tắt các truy vấn nội dung đa phương tiện prefers-color-scheme và prefers-reduced-transparency để 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ờ.