Zapytanie o media przy aktualizacji CSS

Dostosuj interfejs użytkownika do możliwości częstotliwości odświeżania ekranu.

Adam Argyle
Adam Argyle
X GitHub

Zapytania o media CSS to zaawansowane narzędzie pozwalające kontrolować wygląd witryny lub aplikacji internetowej w zależności od urządzenia, na którym się wyświetla. Zapytania o multimedia pozwalają tworzyć różne układy dostosowane do różnych rozmiarów i orientacji ekranu oraz innych czynników.

Zapytanie o media update pozwala dostosować interfejs użytkownika do częstotliwości odświeżania urządzenia. Funkcja może zwracać wartość fast, slow lub none, która odnosi się do możliwości różnych urządzeń.

Obsługa przeglądarek

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Źródło

Urządzenia i częstotliwość odświeżania

Większość urządzeń, na które projektujesz, prawdopodobnie ma szybką częstotliwość odświeżania. Dotyczy to komputerów i większości urządzeń mobilnych.

Możesz wysłać zapytanie dotyczące urządzenia, sprawdzić, czy ma ono szybką częstotliwość odświeżania na potrzeby renderowania treści, i odpowiednio określić styl, jednocześnie przesyłając pojedynczy arkusz stylów.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

Czytniki i urządzenia takie jak niskonapięciowe systemy płatności mogą mieć niską częstotliwość odświeżania. Wiedząc, że urządzenie nie jest w stanie obsłużyć animacji ani częstych aktualizacji, możesz zmniejszyć zużycie baterii lub ograniczyć konieczność aktualizacji widoku.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

I wreszcie, w przypadku drukowanego papieru lub wyświetlaczy e-ink może być dostępny tylko 1 przetwarzany obraz. Takie dane wyjściowe w ogóle nie mogą się odświeżać i są nazywane none. Zapytanie może wyglądać tak:

@media (update: none) {
  /* one time render like printed paper */
}

W tym przykładzie kodu CodePen możesz zobaczyć stopniowo ulepszaną animację najechania kursorem, która korzysta z nowego uaktualnienia zapytania o multimedia:

Więcej zasobów