Ư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

Từ Chrome 118, tính năng truy vấn nội dung nghe nhìn mới prefers-reduced-transparency từ Truy vấn phương tiện truyền thông CSS 5 là sẵn có. Giao diện không mờ có thể gây đau đầu hoặc khó khăn về thị giác nhiều loại khiếm khuyết thị lực. Đó 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 phù hợp với người dùng chỉ định mong muốn giảm tính minh bạch:

.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 chứa 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. Chiến lược phát hành đĩa đơn Các bước kiểm tra truy vấn nội dung nghe nhìn lồng nhau cho lựa chọn ưu tiên của người dùng đối với giảm độ trong suốt và khi true, điều chỉnh biến độ mờ thành 95%, giá trị độ mờ gần như mờ.

Truy vấn phương tiện này phù hợp với các truy vấn phương tiện truyền thông ưu tiên khác, điều này giúp nhà thiết kế và nhà phát triển thoả sức sáng tạo, đồng thời đ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 về nội dung nghe nhìn giống như một chiếc ghế trên ô 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, 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 tính năng giảm độ trong suốt

Mộ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 cho giảm tính minh bạch theo cách có ý nghĩa.

Chú thích bán trong suốt trên hình ảnh

Thường thì việc phủ hình ảnh hoặc hình thu nhỏ video bằng chú thích hoặc tóm tắt bán trong suốt. Ví dụ sau minh hoạ một cách để xử lý tuỳ chọn giảm độ trong suốt. Lớp phủ hoàn toàn và nội dung chú thích tương tự hiển thị bên dưới hình ảnh thay vì phủ lên trê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 mà các thành phần trên giao diện người dùng che phủ nội dung, thường có nghĩa là các thành phần của có độ mờ, cùng với 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 tùy chọn người dùng trong khi vẫn cho phép lượng màu tinh tế từ phía sau lớp phủ để nhìn 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 đây: hình ảnh phía sau chú thích phản chiếu hình ảnh sản phẩm. Chiến dịch này có một vài ưu điểm: hình ảnh không bị cắt, sáng hoặc tối lựa chọn ưu tiên 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 phần tử phổ biến trên trang chủ có thông điệp in đậm phủ lên video lặp lại hoặc ảnh động. Ví dụ sau đây có một hiệu ứng 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ù cách này có thể thu hút nhiều mắt, nhưng điều này 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 phương tiện CSS: ưu tiên-giảm-chuyển động và prefers-reduced-transparency. Trong truy vấn nội dung nghe nhìn có chuyển động giảm, bạn có thể chỉ áp dụng ảnh động vô hạn nếu người dùng "không có lựa chọn ưu tiên" giảm chuyển động, báo hiệu cho mã rằng người dùng này được phép di chuyển.

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

Kết hợp tất cả lại với nhau và 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à 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 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 của người dùng này để biết được ưu tiên giảm ưu tiên của bạn. Thay vào đó, Chrome sẽ kiểm tra để không có lựa chọn ư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 sở thích, theo kiểu trừu tượng. Điều này thể hiện trong các truy vấn phương tiện dưới dạng hãy kiểm tra để tìm "giảm" tại thời điểm nào đó khỏi giao diện người dùng sẽ bị xoá. Chiến lược phát hành đĩa đơn ví dụ thể hiện tư duy bổ sung, trong đó chuyển động và tính minh bạch được thêm vào nếu người dùng hài lòng với nó.

Phương pháp này giúp bạn suy nghĩ về một trải nghiệm cơ sở lành mạnh, một cách mạnh mẽ. Sau đó, nếu người dùng đồng ý, hãy bổ sung 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 độ minh bạch (và khác) trong thẻ Hiển thị. Trong video sau đây xem cách bật/tắt Preferreds-color-giaothuc và prefers-reduced-transparency truy vấn nội dung nghe nhìn để hiển thị màu sáng, tối, trong suốt và giảm độ trong suốt các biến thể của thẻ bằng kính mờ.