Wskazówki dotyczące narzędzi dla deweloperów: jak emulować funkcje mediów preferencji użytkownika CSS za pomocą Narzędzi deweloperskich

Sofia Emelianova
Sofia Emelianova

Funkcje multimediów dotyczące preferencji użytkownika umożliwiają stylizowanie wrażeń z uwzględnieniem konkretnych preferencji i potrzeb użytkownika. Innymi słowy, funkcje preferencji mediów umożliwiają dostosowanie wrażeń użytkownika do jego oczekiwań.

Aby zwiększyć wygodę użytkowników witryny, wykonaj te 3 czynności:

  1. Poznaj możliwości Dowiedz się więcej o funkcjach mediów związanych z preferencjami użytkownika.
  2. Nadaj styl stronom internetowym. Wprowadzać zmiany dotyczące np. koloru, układu i rozmiaru elementów na podstawie preferencji.
  3. Testowanie interfejsu użytkownikaDevTools z użyciem ustawień testowych sprawdź, jak zachowuje się Twoja witryna.

Narzędzia programistyczne obsługują różne opcje emulacji. Aby ułatwić Ci wyszukiwanie i dostosowywanie ustawień systemu i przeglądarki, wszystkie opcje emulacji znajdują się w jednym miejscu – na karcie Wyświetlanie w Narzędziach deweloperskich.

Karta Renderowanie.

Opcje emulacji ustawień użytkownika:

  • prefers-color scheme—jasny lub ciemny schemat kolorów
  • prefers-contrast – zmniejszenie lub zwiększenie kontrastu
  • prefers-reduced-motion – minimalizowanie animacji
  • prefers-reduced-data – zużycie mniejszej ilości ruchu lub brak zużycia

Pełną listę wszystkich opcji emulacji znajdziesz w sekcji Emulowanie funkcji mediów CSS.

Więcej informacji o efektach, które możesz stosować na karcie Przetwarzanie, znajdziesz w artykule Omówienie karty Przetwarzanie.

Co więcej, w DevTools możliwości testowania nie są ograniczone do jednego urządzenia, na którym pracujesz. Możesz symulować urządzenia mobilne w trybie urządzenia.