CSS prefers-reduced-transparency

Optymalizuj i dostosuj interfejs dla użytkowników, którzy wolą nieprzezroczysty interfejs.

Adam Argyle

Od wersji 118 przeglądarki Chrome dostępna jest nowa funkcja zapytań o multimedia prefers-reduced-transparency z zapytań o multimedia w CSS w wersji 5. Nieprzezroczyste interfejsy mogą powodować bóle głowy lub utrudniać korzystanie z aplikacji osobom z różnymi wadami wzroku. Dlatego w systemach Windows, macOS i iOS są dostępne ustawienia systemowe, które umożliwiają zmniejszenie lub usunięcie przezroczystości interfejsu.

Dzięki temu nowemu zapytaniu multimedialnym w przeglądarce usługa porównywania cen może dostosować interfejs dla użytkowników, którzy chcą zmniejszyć przezroczystość:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

W poprzednim przykładzie kodu zmienna CSS przechowuje wartość krycia 50%, która jest następnie używana z wartością HSL do tworzenia półprzezroczystego niebieskiego tła. Umieszczona w niej zapytanie o multimedia sprawdza preferencje użytkownika dotyczące zmniejszenia przezroczystości. Jeśli jest to zgodne z ustawieniami użytkownika, zmienia on wartość zmiennej przezroczystości na 95%, która jest prawie nieprzejrzysta.

To zapytanie o multimedia dobrze współgra z innymi preferowanymi zapytaniami o multimedia, które umożliwiają projektantom i programistom tworzenie kreatywnych rozwiązań, a zarazem dostosowywanie ich do użytkowników. Zapytania o multimedia można porównać do fotela w samochodzie, który automatycznie dostosowuje się do użytkownika. Gdy użytkownik odwiedza Twoją witrynę, ta automatycznie się do niego dostosowuje bez jego udziału. Super.

Przypadki użycia zmniejszenia przejrzystości

Następne sekcje poświęcone są momentom i możliwościom zmniejszenia przejrzystości w znaczący sposób.

Półprzezroczyste napisy na obrazach

Często zdarza się, że obraz lub miniatura filmu są pokryte półprzezroczystym podpisem lub podsumowaniem. Poniższy przykład pokazuje jedną z możliwości obsługi preferencji dotyczących zmniejszenia przejrzystości. Nakładka zostanie całkowicie usunięta, a pod obrazem wyświetli się ten sam podpis, ale nie nałożony.

Przeźroczyste modale, powiadomienia i wyskakujące okienka

Innym sposobem na nakładanie elementów interfejsu na zawartość, co często oznacza obecność elementów o przezroczystości, jest korzystanie z oknów, powiadomień i pop-upów. W takich przypadkach zwiększenie przezroczystości może być zgodne z preferencjami użytkownika, a jednocześnie pozwolić na przenikanie subtelnych kolorów z poziomu nakładki.

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

Automatyczne matowe szkło

Innym popularnym stylem nakładania obrazów jest mleczne szkło. W tym przykładzie obraz za nagłówkiem jest lustrzanym odbiciem zdjęcia produktu. Ma to kilka zalet: obraz nie jest przycięty, a w efekcie końcowym można lepiej wykorzystać preferencje dotyczące jasności lub ciemności.

.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%;
  }
}

Główny nagłówek

Typowy element strony głównej zawiera odtwarzany w pętli film lub animowany obraz z nałożoną wiadomością. W tym przykładzie zastosowano kolorową, półprzezroczystą nakładkę gradientu i nieskończoną animację obrazu tła. Takie treści mogą przyciągać uwagę, ale też powodować problemy, ponieważ są mało kontrastowe i przezroczyste oraz zawierają ruch, którego nie można kontrolować.

Problem można rozwiązać za pomocą dwóch zapytań mediów CSS: prefers-reduced-motion i prefers-reduced-transparency. W zapytaniu o media z ograniczoną animacją możesz zastosować nieskończoną animację tylko wtedy, gdy użytkownik nie ma preferencji dotyczących ograniczonej animacji, co oznacza, że kod może wyświetlić animację.

Ponadto za pomocą zapytania o multimedia z ograniczoną przezroczystością możesz zmniejszyć przezroczystość, aby kolor nakładki był prawie w 100%. Teraz wiadomość jest łatwa do odczytania bez rozpraszania uwagi przez ruch lub problemy z kontrastem.

Połączenie tych elementów pozwala wdrożyć interfejs użytkownika kreacji, który będzie czytelny dla odbiorców i przekaże im wiadomość.

.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%)
    );
  }
}

Różne podejścia do preferencji użytkowników

W poprzednim przykładzie nie sprawdzano preferencji użytkownika pod kątem preferencji ograniczonych. Zamiast tego sprawdzano, czy nie ma żadnych preferencji.

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

Deweloperzy i projektanci często „odwołują się” do wrażeń użytkownika na podstawie tych preferencji, stosując strategię odejmowania. W zapytaniach dotyczących multimediów jest to sprawdzanie wartości „reduce” (zmniejszaj), po której następuje usunięcie czegoś z interfejsu użytkownika. Przykład pokazuje mentalność dodawania, w której ruch i przejrzystość są dodawane, jeśli użytkownik wyrazi na to zgodę.

Dzięki temu możesz zastanowić się nad zdrowym podstawowym doświadczeniem, które jest samo w sobie solidne. Następnie, jeśli użytkownik się zgadza, możesz dodać coś do tej funkcji.

Narzędzia deweloperskie

Narzędzia deweloperskie Chrome mogą emulować tę opcję zmniejszonej przezroczystości (i więcej) na karcie Renderowanie. Z tego filmu dowiesz się, jak włączać i wyłączać preferencje prefer-color-scheme i prefer-reduced-transparency w zapytaniach o media, aby wyświetlać wersje karty z przezroczystością jasną, ciemną, przezroczystą i z ograniczoną przezroczystością.