Emuluj funkcje multimedialne CSS

Sofia Emelianova

Emuluj różne funkcje mediów CSS, korzystając z informacji o opcjach emulacji na karcie Renderowanie.

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

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

Aby emulować tę sytuację:

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

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

   • Brak 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 drukowania określa wygląd strony po wydrukowaniu.

Aby wymusić tryb podglądu wydruku:

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

   

2. Tutaj możesz wyświetlić i zmienić plik CSS, tak jak każdą inną stronę internetową. Zobacz Pierwsze kroki z wyświetlaniem i zmienianiem kodu CSS.

Emuluj funkcję mediów CSS forced-colors

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

Aby emulować tę sytuację:

1. Otwórz kartę Wyświetlanie.

2. W sekcji Naśladowanie funkcji multimediów CSS forced-colors wybierz jedną z tych opcji na liście:

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

Z emulowanym forced-colors:active:

Emuluj funkcję mediów CSS prefers-contrast

Funkcja mediów CSS prefers-contrast wskazuje, czy użytkownik zażądał treści internetowej z większą, niższą czy określoną wartością kontrastu.

Aby emulować tę sytuację:

1. Otwórz kartę Renderowanie.

2. W sekcji Naśladowanie funkcji multimediów w CSS prefers-contrast wybierz jedną z tych opcji na liście:

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

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

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

Aby emulować tę sytuację:

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

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

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

Funkcja prefers-reduced-transparency jest dostępna w Chrome 118 i pozwala dostosować zawartość internetową do wybranych przez użytkownika ustawień zmniejszonej przezroczystości w systemie operacyjnym, takich jak ustawienie Zmniejsz przezroczystość w macOS.

Aby emulować tę sytuację:

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 color-gamut w CSS wskazuje, jaki zakres kolorów obsługuje klient użytkownika i urządzenie wyjściowe.

Aby emulować ten warunek:

1. Otwórz kartę Renderowanie.

2. W sekcji Naśladowanie funkcji multimediów CSS color-gamut wybierz jedną z tych opcji na liście:

   • Brak emulacji
   • color-gamut:srgb – ok. sRGB palety lub więcej
   • color-gamut:p3 – gama kolorów zbliżona do gamutu Display P3 lub szersza
   • color-gamut:rec2020 – gama kolorów zbliżona do gamy określonej w standardzie Rec. 2020 lub szersza