CSS prefers-reduced-transparency

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

Adam Argyle

Od Chrome 118 dostępna jest nowa funkcja zapytań o multimedia prefers-reduced-transparency z funkcji CSS Media Zapytania 5. Nieprzezroczyste interfejsy mogą powodować bóle głowy lub utrudniać wzrok w przypadku różnych rodzajów wad wzroku. Dlatego w systemach Windows, macOS i iOS są dostępne preferencje systemowe, które mogą zmniejszać lub usuwać przezroczystość interfejsu.

Dzięki temu nowemu zapytaniu o multimedia w przeglądarce CSS może dostosować interfejs do potrzeb użytkowników, którym zależy na zmniejszonej przejrzystości:

.example {
  --opacity: .5;

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

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

W poprzednim przykładzie kodu zmienna CSS zawiera wartość przezroczystości 50%, która jest następnie używana z HSL do utworzenia półprzezroczystego niebieskiego tła. Zagnieżdżone zapytanie o multimedia sprawdza ustawienie użytkownika w zakresie zmniejszonej przezroczystości. Jeśli ma wartość prawda, dostosowuje zmienną nieprzezroczystości do wartości 95%, czyli niemal nieprzezroczystej wartości.

To zapytanie o multimedia pasuje do innych zapytań o media preferencyjne, które pozwalają projektantom i programistom być twórczym, a jednocześnie dostosowywać się do potrzeb użytkowników. Wyobraź sobie te zapytania o multimedia jak fotel w samochodzie, które automatycznie dostosowuje pozycję do użytkownika. Gdy użytkownik odwiedza Twoją witrynę, automatycznie dostosowuje się do niego, nie prosząc go o zgodę. Ale ekstra.

Przypadki użycia zmniejszania przejrzystości

W kilku kolejnych sekcjach postaramy się pokazać momenty i możliwości, jakie można wykorzystać do istotnego zmniejszenia przejrzystości.

Półprzezroczyste napisy do obrazów

Często nakłada się na obraz lub miniaturę filmu półprzezroczystym podpisem lub podsumowaniem. Przykład poniżej pokazuje jeden ze sposobów reagowania na mniejszą przezroczystość. Nakładka jest całkowicie usunięta, a pod obrazem wyświetla się ta sama treść, a nie nakładka.

Przezroczyste okna modalne, powiadomienia i wyskakujące okienka

Kolejnym sposobem nakładania zawartości przez elementy interfejsu, co często oznacza obecność elementów nieprzezroczystości, są okna modalne, powiadomienia i okna wyskakujące. W takich przypadkach zwiększenie przezroczystości może dostosować się do preferencji użytkownika, a jednocześnie umożliwić jej podgląd z subtelnej ilości koloru spod nakładki.

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

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

Adaptacyjne matowe szkło

Inny popularny styl nakładki graficznej to matowe szkło. W poniższym przykładzie obraz za podpisem jest lustrzanym odbiciem zdjęcia produktu. Ma kilka zalet: obraz nie jest przycięty, a ustawienie jasne lub ciemne może być trochę bardziej widoczne w wyniku.

.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 ma pogrubiony komunikat nałożony na zapętlony film lub obraz animowany. Poniższy przykład zawiera kolorową, półprzezroczystą nakładkę gradientu i nieskończenie animowany obraz tła. Może to przyciągać wiele oczu, ale też może być problematyczne dla wielu osób ze względu na niski kontrast z przejrzystością i ruchem, których nie da się kontrolować.

Możesz to poprawić, korzystając z 2 zapytań o media CSS: prefers-reduced-motion i prefers reduced-motion for redd-transparency. W zapytaniu o multimedia w przypadku redukcji ruchu można zastosować animację nieskończoną tylko wtedy, gdy użytkownik „brakuje preferencji” dla zmniejszonego ruchu, co będzie sygnalizowało kodowi, że może on wykonywać ruch.

Ponadto zapytanie o multimedia o zmniejszonej przezroczystości można zmniejszyć przezroczystość, tak aby kolor nakładki wynosił prawie 100%. Wiadomość można teraz łatwo odczytać bez rozpraszania ruchu czy problematycznego kontrastu.

Gdy to zrobisz, możesz wdrożyć wygląd interfejsu kreacji, a jednocześnie mieć pewność, że docelowi odbiorcy będą mogli go przeczytać i dotrzeć z przekazem do 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%)
    );
  }
}

Różne sposoby postrzegania preferencji użytkowników – sumy i substancje

W poprzednim przykładzie te preferencje użytkownika nie zostały sprawdzone pod kątem ograniczonych ustawień, a tylko brak preferencji.

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

Deweloperzy i projektanci często „zastępują” wrażenia użytkowników na podstawie tych preferencji w substratywna mentalności. To przejawia się w zapytaniach o multimedia jako sprawdzenie, czy występuje „zmniejszenie” – wtedy element z interfejsu jest usuwany. Przykład przedstawia mentalność addytywną, w ramach której dodawane są ruch i przejrzystość, jeśli użytkownik wyraża na to zgodę.

Takie podejście pomaga zastanowić się, jaka powinna być zdrowa baza, która sama w sobie będzie solidna. Następnie, jeśli użytkownik wyrazi na to zgodę, dodaj informacje do interfejsu.

Narzędzia deweloperskie

Narzędzia deweloperskie w Chrome mogą emulować to ustawienie, aby na karcie Renderowanie uzyskać m.in. przezroczystość. W tym filmie pokażemy, jak przełączać schemat preferencji kolorów i preferować zapytania o multimedia o ograniczonej przezroczystości w celu wyświetlania wariantów jasnego, ciemnego, przezroczystego i zmniejszonej przezroczystości karty z matowym szkłem.