CSS prefers-reduced-transparency

Zoptymalizuj i dostosuj pod kątem użytkowników, którzy preferują nieprzejrzysty interfejs.

Adam Argyle

Nowa funkcja zapytań o multimedia od Chrome 118 prefers-reduced-transparency z zapytań o media CSS 5 to i dostępności informacji. Nieprzezroczysty interfejs może powodować ból głowy lub utrudniać wzrok różne rodzaje wad wzroku. Dlatego w systemach Windows, macOS i iOS są preferencje systemowe które mogą zmniejszyć lub usunąć przezroczystość interfejsu.

Dzięki temu nowemu zapytaniu o media w przeglądarce CSS może dostosować interfejs do potrzeb użytkowników (określanie dążenia do ograniczenia 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 równą 50%. który następnie jest używany w połączeniu z HSL do utworzenia półprzezroczystego niebieskiego tła. zagnieżdżone zapytanie o media sprawdza preferencje użytkownika dotyczące zmniejszona przezroczystość, a jeśli ma wartość prawda, dostosowuje zmienną przezroczystości na 95%, wartość przezroczystości prawie nieprzezroczystej.

To zapytanie o multimedia pasuje do innych preferowanych zapytań o multimedia, które pozwalają projektantom i programistom być twórczy, a jednocześnie dostosować się do potrzeb użytkowników. Możesz je sobie wyobrazić jako krzesło w samochodzie, które automatycznie dostosowuje położenie do użytkownika; gdy użytkownik odwiedza witrynę, automatycznie dostosuje się do nich bez pytania. Ale ekstra.

Przypadki użycia zmniejszającej przejrzystość

Następne sekcje będą poświęcone momentom i możliwościom związanym z istotne ograniczenie przejrzystości.

Półprzezroczyste podpisy do obrazów

Często nakładane jest na obraz lub miniaturę filmu półprzezroczysty napis lub podsumowanie. Poniższy przykład ilustruje jeden sposób aby dostosować się do preferencji w zakresie ograniczonej przejrzystości. Nakładka jest w całości i wyświetlać pod obrazem te same napisy, a nie nałożonych.

Przejrzyste okna, powiadomienia i okna wyskakujące

Inny sposób, w jaki elementy interfejsu nakładają się na treść, co często oznacza, że elementy przezroczystość obejmuje opcje modalne, powiadomienia i okna wyskakujące. W takich przypadkach zwiększenie przezroczystości może dostosować się do preferencji użytkownika, jednocześnie umożliwiając subtelna ilość koloru zza 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ładki graficznej jest oszroniona szkło. W poniższym przykładzie obraz za podpisem jest odbiciem lustrzanym zdjęcia produktu. Ten Ma kilka zalet: obraz nie jest przycięty, a zdjęcie jest jasne lub ciemne może ostatecznie okazać się, że to bardziej korzystny wpływ na nasze wybory.

.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 nakładający się na zapętlony film lub animowany obraz. Poniższy przykład zawiera kolorowy półprzezroczysty gradient z nakładką i nieskończoną animacją obrazu tła. Chociaż może to przyciągnąć dla wielu oczu, będą też powodować problemy ze względu na niski kontrast przezroczystości i ruchu, których nie da się kontrolować.

Można to poprawić za pomocą 2 zapytań o media CSS: preferuje ograniczony ruch i właśnie dlatego preferuje zmniejszoną przejrzystość. W ramach zapytania o multimedia w przypadku zmniejszonego ruchu możesz stosuj nieskończoną animację tylko wtedy, gdy użytkownik ma ustawione „brak ustawień” w przypadku obniżonej ceny ruchu, sygnalizując kodowi, że użytkownik może się poruszać.

Ponadto przy zapytaniach o media o zmniejszonej przejrzystości możesz zmniejszyć przezroczystość, przez co kolor nakładki wynosi prawie 100%. Wiadomość można teraz łatwo odczytać bez rozpraszania ruchu i kontrastu.

Gdy to zrobisz, możesz wdrożyć wygląd interfejsu kreacji, w którym odbiorcy docelowi mogą go przeczytać i dotrzeć do niego.

.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 sprawdzono tych preferencji użytkowników pod kątem zamiast preferencji, sprawdza on brak preferencji.

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

Deweloperzy i projektanci często korzystają z wersji zastępczej i wrażenia użytkowników na podstawie w metodach subiektywnych. Plik manifestu jest wyświetlany w zapytaniach o media jako sprawdzić frazę „reduce” (redukuj), gdy coś zostanie usunięte z interfejsu. pokazuje sumę korzyści, w której ruch i przejrzystość są dodawane, jeśli że użytkownik się z nią zgadza.

Takie podejście pomaga zastanowić się nad zdrowym doświadczeniem bazowym, które jest wytrzymała. Jeśli użytkownik nie ma nic przeciwko temu, dodaj element do doświadczenia.

Narzędzia deweloperskie

Narzędzia deweloperskie w Chrome mogą emulować to ustawienie, by zmniejszyć przezroczystość (oraz więcej) na karcie Renderowanie. W tym filmie Zobacz, jak przełączyć ustawienia preferencji-color-schemat i prefers-reduced-transparency zapytań o multimedia, aby wyróżnić jasne, ciemne, przejrzyste i zmniejszone elementy wersji karty z matowego szkła.