Ta strona została przetłumaczona przez Cloud Translation API.

CSS prefers-reduced-transparency

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

Adam Argyle

Od Chrome 118 dostępna jest nowa funkcja zapytań o media prefers-reduced-transparency z zapytań o media CSS 5. Nieprzezroczysty interfejs może powodować ból głowy lub utrudniać wzrok w przypadku różnych rodzajów wad wzroku. Dlatego w systemach Windows, macOS i iOS są dostępne ustawienia systemowe, które umożliwiają zmniejszenie lub usunięcie przezroczystości interfejsu.

Obsługa przeglądarek

Źródło

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żesz traktować jak fotel w samochodzie, który automatycznie dostosowuje pozycję do użytkownika. Gdy użytkownik odwiedza Twoją witrynę, jest ona automatycznie dostosowywana do niego 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 nakładane jest na miniaturę obrazu lub filmu z półprzezroczystym podpisem lub podsumowaniem. Poniższy przykład pokazuje jeden ze sposobów radzenia sobie z preferencją zmniejszonej przezroczystości. Nakładka zostanie całkowicie usunięta, a pod obrazem wyświetli się ten sam podpis, ale nie będzie nakładany.

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 umożliwia subtelne zabarwienie nakładki.

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

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

Adaptacyjne matowe szkło

Innym popularnym stylem nakładania obrazów jest mleczne szkło. W tym przykładzie obraz za podpisem 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 oraz 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 multimedia ze zmniejszonym ruchem możesz zastosować nieskończoną animację tylko wtedy, gdy użytkownik ma ustawienie „brak preferencji” dla zmniejszonego ruchu. Dzięki temu kod będzie sygnalizował kodowi, że ruch może się poruszać.

Ponadto za pomocą zapytania o multimedia z ograniczoną przezroczystością możesz zmniejszyć przezroczystość, aby kolor nakładki był prawie w 100%. Wiadomość można teraz łatwo odczytać bez rozpraszania ruchu i problematycznego kontrastu.

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

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

Porównanie preferencji użytkowników z perspektywy addytywnej i subtelnej

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” (zmniejszanie), w którego wyniku coś zostaje usunięte z interfejsu. Przykład pokazuje mentalność addytywną, 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ę preferencję dotyczącą 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ą.

https://codepen.io/web-dot-dev/pen/dyaojxr