Jak korzystać z zapytań o media CSS: kompletny przewodnik dla początkujących

Spis treści:

• Składnia zapytań o media CSS #
• Definiowanie typów mediów w zapytaniach o media CSS #
• Modyfikatory zapytań o media (operatory logiczne) #
• Typowe funkcje mediów dla zapytań o media CSS #
• Mniej popularne funkcje mediów dla zapytań o media CSS #
• Funkcje mediów z zapytań o media CSS poziom 5 #
• Niestandardowe funkcje multimedialne #
• Najlepsze praktyki dotyczące zapytań o media CSS #

Jak używać zapytań o media CSS: składnia

Zanim przejdę do samych funkcji multimediów, omówmy podstawową składnię zapytań o media CSS. Zapytanie o media wygląda tak:

 @media screen and ( min-width: 900px ) { article { padding : 1rem 3rem ; } }
 Język kodu: CSS ( css )

Aby pomóc Ci rozbić każdą z części, oto przydatny obraz, który identyfikuje wszystkie części typowego zapytania o media CSS:

A oto podsumowanie wraz z dalszymi szczegółami tego, co znajduje się na obrazku:

• @media — reguła CSS wskazująca, że ​​piszesz zapytanie o media
• screen — jeden z dostępnych typów mediów służący do identyfikowania urządzeń, na które należy kierować zapytanie o media. Jest to opcjonalne, jeśli nie używasz operatorów not i only .
• and – modyfikator zapytania o media, zwany także operatorem logicznym, który pomaga w warunkowym kierowaniu na określone urządzenia i funkcje multimedialne.
• (min-width: 900px) — jedna z wielu funkcji i wartości multimediów dostępnych w celu kierowania na określone rozmiary urządzeń, typy urządzeń, możliwości urządzeń itp.
• article { ... } – Selektory i reguły CSS, zagnieżdżone w otwierających i zamykających nawiasach klamrowych, wskazujące, jakie reguły CSS chcesz zastosować do zapytań o media.

W otwierających i zamykających nawiasach klamrowych zapytania o media możesz umieścić dowolną ilość CSS, o ile CSS jest poprawnie sformatowany, aby nie uległ uszkodzeniu (tzn. nie ma brakujących nawiasów klamrowych dla selektorów itp.).

Jak używać zapytań o media CSS: definiowanie typów mediów

Jak pokazano w poprzedniej sekcji, możesz opcjonalnie określić, na jakie typy mediów chcesz kierować zapytanie o media. Typy mediów opisują kategorię urządzenia, do którego chcesz zastosować style. Typy mediów są definiowane za pomocą jednego z trzech słów kluczowych:

• all — wskazuje, że chcesz kierować reklamy na wszystkie urządzenia, bez wyjątków.
• print — dotyczy urządzeń, które wysyłają dane wyjściowe do wyświetlacza wydruku, takiego jak okno „Podgląd wydruku” w przeglądarce internetowej.
• screen – jest to przeciwieństwo print , skierowane do wszystkich urządzeń, które nie należą do kategorii print .

Powyżej znajdują się jedyne typy mediów, których powinieneś użyć, jeśli takie istnieją. W specyfikacji CSS na poziomie 4 zapytań o media wiele wcześniej obsługiwanych typów mediów jest obecnie przestarzałych. Specyfikacja zniechęca do korzystania z nich, a przeglądarki są instruowane, aby je ignorować, jednocześnie wyświetlając je jako „poprawny” kod (aby upewnić się, że kod nie zepsuje się w przyszłości). Te typy mediów to: tty , tv , projection , handheld , braille , embossed , aural i speech .

I zauważ, że specyfikacja wyjaśnia również:

Innymi słowy, oczekuje się, że pewnego dnia napiszemy wszystkie nasze zapytania dotyczące mediów bez typów mediów.

Możesz być zainteresowanym także tym:

• WordPress REST API: co to jest i jak zacząć z niego korzystać
• Najlepszy samouczek CSS Grid dla początkujących (z interaktywnymi przykładami)
• Test szybkości witryny mobilnej nie powiódł się? Oto 10 sposobów na poprawę szybkości strony mobilnej ️

Modyfikatory zapytań o media (operatory logiczne)

Każde zapytanie o media ma również dostęp do dwóch określonych modyfikatorów lub operatorów logicznych, które pomagają dodać logikę warunkową do zapytań o media.

Modyfikator to pojedyncze słowo kluczowe, które wpływa na znaczenie następującej po nim funkcji multimedialnej. Dostępne modyfikatory to:

not modyfikator

Gdy ten modyfikator poprzedza funkcję multimediów, wyklucza docelowe urządzenia z zapytania o media (podobnie jak działa selektor :not() w CSS).

Oto przykład:

 @media not print { article { padding : 1rem 3rem ; } }
 Język kodu: CSS ( css )

Powyższe zapytanie o media będzie skierowane do wszystkich urządzeń, które nie są urządzeniami drukującymi, zatem powyższe byłoby równoważne użyciu screen bez modyfikatora.

only modyfikator

Ten modyfikator ma na celu pomóc starszym przeglądarkom w prawidłowym przeanalizowaniu zapytania o media. Jak wyjaśnia specyfikacja: „ only słowo kluczowe nie ma wpływu na wynik zapytania o media, ale spowoduje, że zapytanie o media zostanie przeanalizowane przez starsze aplikacje klienckie jako określające „tylko” nieznany typ mediów, a zatem zostanie zignorowane”.

Spójrz na przykład:

 @media only screen { article { padding : 1rem 3rem ; } }
 Język kodu: CSS ( css )

Modyfikator and

Służy do łączenia wielu funkcji multimedialnych w jednym zapytaniu o media.

Przykład jest następujący:

 @media screen and ( min-width: 800px ) { article { padding : 1rem 3rem ; } }
 Język kodu: CSS ( css )

Powyższe dotyczy wszystkich urządzeń niedrukujących, które mają szerokość równą lub większą niż 800px.

,

Przecinek umożliwia dołączenie listy zapytań o media, która działa podobnie do logiki or operatora.

Oto przykład:

 @media screen and ( min-width: 800px ), print and ( min-width: 1000px ) { article { padding : 1rem 3rem ; } }
 Język kodu: CSS ( css )

Style w powyższym zapytaniu o media będą kierowane na jedno z dwóch zapytań o media oddzielonych przecinkiem. Jest to podobne do działania przecinka podczas korzystania z selektorów CSS.

Wspólne funkcje mediów dla zapytań o media CSS

Teraz przechodzimy do sedna tego przewodnika o tym, jak używać zapytań o media CSS — różnych funkcji mediów, które możesz włączyć. Te urządzenia docelowe, które mają określone cechy wskazane przez wybrane funkcje multimediów.

Funkcje multimediów poprawiają wykorzystanie typów multimediów, umożliwiając bardziej precyzyjne podejście do stosowania stylów w określonych okolicznościach. W tej i następnych sekcjach opiszę cele każdego z nich, wraz z przykładowym kodem pokazującym każdą z możliwych wartości lub typów wartości.

W tej sekcji omówiono najczęściej używane i najlepiej obsługiwane funkcje multimediów:

width : Szerokość rzutni, w tym szerokość paska przewijania. Umożliwia również użycie przedrostków min- i max- .

 @media ( width: 800px ) { ... } @media ( min-width: 360px ) { ... } @media ( max-width: 1400px ) { ... }
 Język kodu: CSS ( css )

height : wysokość rzutni. Akceptuje prefiksy min- i max- .

 @media ( height: 500px ) { ... } @media ( min-height: 400px ) { ... } @media ( max-height: 400px ) { ... }
 Język kodu: CSS ( css )

orientation : Orientacja rzutni.

 @media ( orientation: portrait) { ... } @media ( orientation: landscape) { ... }
 Język kodu: CSS ( css )

display-mode : tryb wyświetlania aplikacji określony w manifeście aplikacji sieci Web.

 @media ( display-mode: fullscreen) { ... } @media ( display-mode: standalone) { ... } @media ( display-mode: minimal-ui) { ... } @media ( display-mode: browser) { ... }
 Język kodu: CSS ( css )

aspect-ratio : na podstawie określonego współczynnika proporcji, wskazywany przez dwie dodatnie liczby całkowite oddzielone ukośnikiem.

 @media ( aspect-ratio: 16 / 9 ) { ... }
 Język kodu: CSS ( css )

color : Liczba bitów na składnik koloru urządzenia wyjściowego lub zero, jeśli urządzenie nie używa koloru. Pozwala również na użycie przedrostków min- i max- . Brak wartości wskazuje, że kierujesz reklamy na dowolne urządzenie kolorowe.

 @media (color) { ... } @media ( color: 8 ) { ... } @media ( min-color: 8 ) { ... } @media ( max-color: 16 ) { ... }
 Język kodu: CSS ( css )

grid : wykrywa, czy urządzenie korzysta z ekranu opartego na siatce (np. terminal tekstowy) lub ekranu opartego na mapie bitowej (jak większość nowoczesnych komputerów, tabletów i smartfonów). Wartość 1 oznacza opartą na siatce, wartość 0 oznacza opartą na mapie bitowej.

 @media ( grid: 0 ) { ... } @media ( grid: 1 ) { ... }
 Język kodu: CSS ( css )

monochrome : bity na piksel w buforze ramki monochromatycznej urządzenia.

 @media ( monochrome: 0 ) { ... } @media (monochrome) { ... }
 Język kodu: CSS ( css )

resolution : gęstość pikseli urządzenia wyjściowego. Można również używać przedrostków min- i max- .

 @media ( resolution: 72dpi ) { ... } @media ( min-resolution: 300dpi ) { ... } @media ( max-resolution: 150dpi ) { ... }
 Język kodu: CSS ( css )

Mniej popularne funkcje mediów dla zapytań o media CSS

Poniższe funkcje multimediów nie są tak powszechnie używane, ale mogą okazać się przydatne w określonych okolicznościach. Niektóre z nich mogą również nie obsługiwać przeglądarki, więc przed użyciem którejkolwiek z nich należy sprawdzić obsługę na caniuse.com lub MDN.

any-hover : czy istnieje funkcja hover.

 @media ( any-hover: none) { ... } @media ( any-hover: hover) { ... }
 Język kodu: CSS ( css )

any-pointer : czy jest obecne urządzenie wskazujące i jaka jest jego dokładność.

 @media ( any-pointer: none) { ... } @media ( any-pointer: course) { ... } @media ( any-pointer: fine) { ... }
 Język kodu: CSS ( css )

color-gamut : Przybliżony zakres kolorów obsługiwanych przez urządzenie.

 @media ( color-gamut: srgb) { ... } @media ( color-gamut: p3) { ... } @media ( color-gamut: rec2020) { ... }
 Język kodu: CSS ( css )

color-index : Liczba wpisów w tabeli wyszukiwania kolorów urządzenia wyjściowego. Pozwala również na użycie przedrostków min- i max- . Brak wartości wskazuje, że kierujesz reklamy na dowolny indeks kolorów.

 @media (color-index) { ... } @media ( min-color-index: 15000 ) { ... } @media ( max-color-index: 30000 ) { ... }
 Język kodu: CSS ( css )

hover : czy użytkownik może najechać kursorem na elementy.

 @media ( hover: none) { ... } @media ( hover: hover) { ... }
 Język kodu: CSS ( css )

overflow-block : sposób, w jaki urządzenie obsługuje treści, które przepełniają się wzdłuż osi bloku.

 @media ( overflow-block: none) { ... } @media ( overflow-block: scroll) { ... } @media ( overflow-block: optional-paged) { ... } @media ( overflow-block: paged) { ... }
 Język kodu: CSS ( css )

overflow-inline : sposób, w jaki urządzenie obsługuje zawartość, która przekracza widoczny obszar wzdłuż osi wbudowanej.

 @media ( overflow-inline: none) { ... } @media ( overflow-inline: scroll) { ... }
 Język kodu: CSS ( css )

pointer : Jeśli na urządzeniu znajduje się wskaźnik.

 @media ( pointer: none) { ... } @media ( pointer: coarse) { ... } @media ( pointer: fine) { ... }
 Język kodu: CSS ( css )

scan : Jeśli urządzenie jest z przeplotem (jak niektóre telewizory plazmowe) lub progresywne (jak większość monitorów komputerowych).

 @media ( scan: interlace) { ... } @media ( scan: progressive) { ... }
 Język kodu: CSS ( css )

update : To znaczy częstotliwość aktualizacji. Jak często urządzenie wyjściowe może modyfikować wygląd treści.

 @media ( update: none) { ... } @media ( update: slow) { ... } @media ( update: fast) { ... }
 Język kodu: CSS ( css )

Funkcje mediów z zapytań o media CSS poziom 5

Poniższe funkcje multimediów są nowością w specyfikacji media query poziomu 5. Tylko kilka z nich obsługuje obecnie przeglądarki, ale dobrze jest wiedzieć, co jest na horyzoncie, gdy nauczysz się korzystać z zapytań o media CSS.

dynamic-range : Kombinacja jasności, współczynnika kontrastu i głębi kolorów obsługiwana przez urządzenie.

 @media ( dynamic-range: standard) { ... } @media ( dynamic-range: high) { ... }
 Język kodu: CSS ( css )

forced-colors : Wykrywa, czy urządzenie włączyło wybraną przez użytkownika ograniczoną paletę kolorów, tak jak miałoby to miejsce w przypadku włączenia trybu wysokiego kontrastu systemu Windows.

 @media ( forced-color: none) { ... } @media ( forced-color: active) { ... }
 Język kodu: CSS ( css )

horizontal-viewport-segments : liczba logicznych segmentów poziomych rzutni.

 @media ( horizontal-viewport-segments: 3 ) { ... }
 Język kodu: CSS ( css )

environment-blending : Zapytanie o charakterystykę wyświetlacza użytkownika.

 @media ( environment-blending: opaque) { ... } @media ( environment-blending: additive) { ... } @media ( environment-blending: subtractive) { ... }
 Język kodu: CSS ( css )

inverted-colors : jeśli przeglądarka lub system operacyjny odwraca kolory.

 @media ( inverted-colors: none) { ... } @media ( inverted-colors: inverted) { ... }
 Język kodu: CSS ( css )

nav-controls : czy przeglądarka udostępnia wykrywalne elementy sterujące nawigacją.

 @media ( nav-controls: none) { ... } @media ( nav-controls: back) { ... }
 Język kodu: CSS ( css )

prefers-contrast : Jeśli użytkownik woli zwiększać lub zmniejszać kontrast między sąsiednimi kolorami.

 @media ( prefers-contrast: no-preference) { ... } @media ( prefers-contrast: more) { ... } @media ( prefers-contrast: less) { ... }
 Język kodu: CSS ( css )

prefers-color-scheme : jeśli użytkownik preferuje jasny lub ciemny schemat kolorów.

 @media ( prefers-color-scheme: light) { ... } @media ( prefers-color-scheme: dark) { ... }
 Język kodu: CSS ( css )

prefers-reduced-data : jeśli użytkownik woli alternatywne treści, które zużywają mniej danych.

 @media ( prefers-reduced-data: no-preference) { ... } @media ( prefers-reduced-data: reduce) { ... }
 Język kodu: CSS ( css )

prefers-reduced-motion : jeśli użytkownik woli mniej ruchu na stronie.

 @media ( prefers-reduced-motion: no-preference) { ... } @media ( prefers-reduced-motion: reduce) { ... }
 Język kodu: CSS ( css )

prefers-reduced-transparency : Jeśli użytkownik zażądał od systemu, zminimalizuj ilość efektów przezroczystych lub półprzezroczystych warstw.

 @media ( prefers-reduced-transparency: no-preference) { ... } @media ( prefers-reduced-transparency: reduce) { ... }
 Język kodu: CSS ( css )

scripting : Jeśli dostępne są skrypty (prawie zawsze JavaScript).

 @media ( scripting: none) { ... } @media ( scripting: initial- only ) { ... } @media ( scripting: enabled) { ... }
 Język kodu: CSS ( css )

vertical-viewport-segments : liczba logicznych segmentów poziomych rzutni.

 @media ( vertical-viewport-segments: 3 ) { ... }
 Język kodu: CSS ( css )

video-color-gamut : przybliżony zakres kolorów obsługiwanych przez przeglądarkę i urządzenie.

 @media ( video-color-gamut: srgb) { ... } @media ( video-color-gamut: p3) { ... } @media ( video-color-gamut: rec2020) { ... }
 Język kodu: CSS ( css )

video-dynamic-range : przybliżony zakres kolorów obsługiwanych przez przeglądarkę i urządzenie.

 @media ( video-dynamic-range: standard) { ... } @media ( video-codynamic-range: high) { ... }
 Język kodu: CSS ( css )

Niestandardowe funkcje mediów

Oto kilka niestandardowych funkcji multimedialnych, które nie są zalecane do użytku, ale w niektórych przypadkach mogą okazać się przydatne do kierowania na określone typy urządzeń (np. tablety i telefony z systemem iOS):

-webkit-device-pixel-ratio : Alternatywa dla funkcji multimediów resolution , zdefiniowana wartością liczbową.

 @media ( -webkit-device-pixel-ratio: 2 ) { ... }
 Język kodu: CSS ( css )

webkit-animation : jeśli urządzenie obsługuje animacje z przedrostkiem dostawcy.

 @media ( -webkit-animation: true) { ... } @media ( -webkit-animation: false) { ... }
 Język kodu: CSS ( css )

webkit-transform-2d : Jeśli urządzenie obsługuje przekształcenia CSS 2D z przedrostkiem dostawcy.

 @media (-webkit-transform- 2 d: true) { ... } @media (-webkit-transform- 2 d: false) { ... }
 Język kodu: CSS ( css )

webkit-transform-3d : Jeśli urządzenie obsługuje przekształcenia CSS 3D z przedrostkiem dostawcy.

 @media (-webkit-transform- 3 d: true) { ... } @media (-webkit-transform- 3 d: false) { ... }
 Język kodu: CSS ( css )

webkit-transition : przestarzała funkcja, która wykrywa, czy urządzenie obsługuje przejścia z prefiksem dostawcy.

 @media ( -webkit-transition: true) { ... } @media ( -webkit-transition: false) { ... }
 Język kodu: CSS ( css )

Jak widać, zakres funkcji multimedialnych wykorzystywanych w zapytaniach o media CSS znacznie się powiększył od czasu, gdy rozpoczął się ruch responsywnego projektowania stron internetowych. Możesz wykryć prawie wszystko, co chcesz i napisać CSS dla każdego typu możliwości urządzenia.

Najlepsze praktyki dotyczące zapytań o media CSS

W tym przewodniku omówiłem wiele surowego kodu na temat korzystania z zapytań o media CSS, ale sam kod nie uczyni Cię ekspertem od zapytań o media. Oto kilka ogólnych wskazówek i sugestii, jak najlepiej wykorzystać zapytania o media CSS:

• Nie pisz zapytań o media dla konkretnych rozmiarów urządzeń, takich jak iPad, iPhone itp. Pisz zapytania o media zgodnie z tym, jak układy „przełamują się” w różnych punktach (stąd termin „punkty przerwania”). Oznacza to, że zezwalasz treści na definiowanie punktów przerwania.
• Jeśli to możliwe, zastosuj podejście zorientowane na urządzenia mobilne w przypadku zapytań o media, w których kod CSS zapytań niezwiązanych z mediami miałby zastosowanie do najmniejszego urządzenia, a następnie w razie potrzeby dodaj zapytania o media dla większych widocznych obszarów.
• Skorzystaj z funkcji układu CSS, takich jak flexbox i siatka CSS, aby naturalnie tworzyć układy, które są responsywne, bez potrzeby zapytań o media, jeśli to możliwe.
• Nie ignoruj ​​możliwości korzystania z pionowych zapytań o media, które sprawdzają wysokość widocznego obszaru. Pomoże to uniknąć niektórych pułapek dotyczących układu na mniejszych urządzeniach.
• Nie ograniczaj się tylko do szerokości i wysokości. Skorzystaj z innych dobrze obsługiwanych funkcji multimedialnych, które mogą pomóc w zapewnieniu dostępności i ogólnego UX Twoich układów na różnych urządzeniach.

Zapytania o media CSS w 2022 i później

Wszystkie nowe funkcje mediów wprowadzone w ciągu ostatnich kilku lat sprawiły, że możliwości pisania zapytań o media CSS są ekscytujące i potężne!

Zdecydowanie powinieneś skorzystać z najlepiej obsługiwanych funkcji multimedialnych. Możesz także zacząć rozważać korzystanie z wielu nowych funkcji multimedialnych i oczekiwać, że pewnego dnia typy multimediów staną się przeszłością.

Jeśli masz jakiekolwiek pytania dotyczące korzystania z zapytań o media CSS w 2022 r., daj nam znać w sekcji komentarzy poniżej.

Układ i prezentacja Karola K.