Emuluj funkcje multimedialne CSS

Sofia Emelianova

Korzystając z tego odniesienie do opcji emulacji na karcie Renderowanie, możesz emulować różne funkcje mediów CSS.

Emuluj funkcję mediów CSS „prefers-color-scheme”

Funkcja multimediów CSS prefers-color-scheme wskazuje, czy użytkownik woli jasny czy ciemny schemat kolorów.

Aby emulować ten warunek:

1. Na stronie prefers-color-scheme otwórz kartę Rendering.

2. W sekcji Emuluj funkcję mediów CSS prefers-color-scheme wybierz na liście jedną z tych opcji:

   • Bez emulacji
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. Odśwież stronę. Na przykład:

Emuluj typ mediów CSS (włącz podgląd wydruku)

Zapytanie o media drukowane określa wygląd strony po wydrukowaniu.

Aby wymusić przejście na tryb podglądu wydruku na stronie:

1. Otwórz kartę Renderowanie i w sekcji Emuluj typ mediów CSS wybierz drukuj.

   

2. Możesz na niej przeglądać i zmieniać swoją usługę porównywania cen, tak jak w przypadku każdej innej strony internetowej. Zapoznaj się z artykułem Pierwsze kroki z wyświetlaniem i zmienianiem kodu CSS.

Emuluj funkcję mediów CSS „forced-colors”

Funkcja multimediów CSS forced-colors wskazuje, czy klient użytkownika włączył tryb wymuszonych kolorów. Przykładem trybu wymuszonych kolorów jest Wysoki kontrast w systemie Windows.

Aby emulować ten warunek:

1. Otwórz kartę Renderowanie.

2. W sekcji Emuluj funkcję mediów CSS forced-colors wybierz na liście jedną z tych opcji:

   • Bez emulacji
   • forced-colors:active
   • forced-colors:none

Po emulacji forced-colors:active:

Emuluj funkcję mediów CSS „prefers-contrast”

Funkcja multimediów CSS prefers-contrast wskazuje, czy użytkownik zażądał, by treści internetowe wyświetlały się z wyższą, niższą czy określoną wartością kontrastu.

Aby emulować ten warunek:

1. Otwórz kartę Renderowanie.

2. W sekcji Emuluj funkcję mediów CSS prefers-contrast wybierz na liście jedną z tych opcji:

   • Bez emulacji
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-contrast:custom

Emuluj funkcję mediów CSS „prefers-reduced-motion”

Funkcja multimedialna prefers-reduced-motion wskazuje, czy użytkownik poprosił o zminimalizowanie ilości ruchu na stronie.

Aby emulować ten warunek:

1. Otwórz kartę Renderowanie w tej prezentacji i przewiń, aby zobaczyć różne animacje.
2. W sekcji Emuluj funkcję mediów CSS prefers-reduced-motion wybierz prefers-reduced-motion:reduce.
3. Spróbuj jeszcze raz przewinąć stronę.

Emuluj funkcję mediów CSS „prefers-reduced-transparency”

Funkcja mediów CSS prefers-reduced-transparency wskazuje, czy użytkownik poprosił o zmniejszenie efektów warstwy przezroczystej lub półprzezroczystej używanych na urządzeniu.

Funkcja prefers-reduced-transparency jest dostępna od Chrome 118 i umożliwia dostosowywanie treści internetowych do preferencji użytkownika, które pozwalają zmniejszyć przejrzystość w systemie operacyjnym, np. przy użyciu ustawienia Zmniejsz przezroczystość w systemie macOS.

Aby emulować ten warunek:

1. Otwórz kartę Renderowanie.
2. W sekcji Emuluj funkcję mediów CSS prefers-reduced-transparency wybierz prefers-reduced-transparency: reduce.
3. Sprawdź, czy strona wyświetla się prawidłowo.

Emuluj funkcję mediów CSS „color-gamut”

Funkcja multimediów CSS color-gamut wskazuje zakres kolorów obsługiwany przez klienta użytkownika i urządzenie wyjściowe.

Aby emulować ten warunek:

1. Otwórz kartę Renderowanie.

2. W sekcji Emuluj funkcję mediów CSS color-gamut wybierz na liście jedną z tych opcji:

   • Bez emulacji
   • color-gamut:srgb – gamut lub więcej sRGB
   • color-gamut:p3 – przybliżona gama z zakresu Display P3 Color Space (Przestrzeń barw Display P3) lub większa.
   • color-gamut:rec2020 – przybliżony zakres określony w Rec. 2020 lub później.