Zoptymalizuj i dostosuj pod kątem użytkowników, którzy preferują nieprzejrzysty interfejs.
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.