CSS Media Queries

CSS media queries (zapytania medialne) to technika umożliwiająca wybiórcze stosowanie arkuszy stylów w zależności od typu urządzenia oraz jego cech, takich jak rozdzielczość, szerokość lub wysokość obszaru widoku, orientacja ekranu, obsługiwana gama kolorów i wiele innych.

Dzięki temu za pomocą CSS Media Queries można tworzyć responsywne strony internetowe, które automatycznie dostosowują się do cech i wymagań każdego urządzenia, na którym jest oglądana strona. Na przykład poniższe zapytanie ustawi rozmiar pisma nagłówka h1 na 50 pikseli, jeśli ekran urządzenia będzie miał przynajmniej 800 pikseli szerokości.

@media screen and (min-width: 800px) {
  h1 {
    font-size: 50px;
  }
}

Jak widać w powyższym przykładzie, składnia CSS Media Queries nie jest skomplikowana. Teraz przyjrzymy się jej dokładnie, a zaczniemy od różnych sposobów dołączania Media Queries do stron.

Zastosowania CSS Media Queries

Zapytań medialnych można używać zarówno bezpośrednio w HTML, jak i CSS, a nawet w JavaScripcie.

Najczęściej wybieraną metodą definiowania CSS Media Queries jest użycie reguły @media w arkuszu stylów dołączonym do strony, w sposób pokazany powyżej. Ewentualnie można użyć reguły @import, aby zaimportować zewnętrzny plik CSS do wybranego arkusza stylów.

Bezpośrednio w HTML CSS Media Queries można definiować za pomocą atrybutu HTML media. Można to robić w różnych elementach, ale najczęściej używa się do tego celu elementów link, source i style, na przykład:

<!-- Arkusz stylów dla najmniejszych urządzeń -->
<link rel="stylesheet" href="phones.css" media="(min-width: 25em)">

<!-- Ten obraz zostanie użyty na ekranach o maksymalnej szerokości 800 pikseli -->
<source srcset="skyscraper-portret.png" media="(max-width: 800px)">

<!-- Arkusz stylów dla druku
<style media="print">
  article {
    background: none;
  }
</style>

Dołączanie tylko wybranych arkuszy stylów do stron wyświetlanych na różnych urządzeniach może być cenną techniką optymalizacji, ponieważ pozwala zmniejszyć ilość pobieranego i interpretowanego przez przeglądarkę kodu CSS.

W JavaScripcie do pracy z Media Queries służy metoda matchMedia(), za pomocą której można tworzyć zapytania medialne i wykonywać różne czynności na podstawie tego, czy ich warunek jest, czy nie jest spełniony.

Składnia CSS Media Queries

Składnia zapytań medialnych jest nieskomplikowana. Ponieważ to jest kurs CSS, wszystkie dalsze objaśnienia opieram na regule @media, której używa się bezpośrednio w arkuszach stylów, ale w równym stopniu odnoszą się one także do pozostałych metod stosowania tych zapytań.

Zatem pierwszym elementem zapytania medialnego w CSS jest reguła CSS @media. Po niej mogą znajdować się element określający typ medium, który jest opcjonalny, oraz lista wyrażeń warunkowych testujących właściwości medium, które muszą znajdować się w nawiasach i opcjonalnie mogą być połączone za pomocą operatorów logicznych, np.:

@media screen and (min-width: 800px) and (max-width: 1200px)

W tej regule mamy następujące elementy:

• @media — reguła CSS @media
• screen — określenie typu medium (tutaj jest to ekran)
• (min-width: 800px), (max-width: 1200px) — dwa wyrażenia warunkowe testujące właściwości medium. Pierwsze oznacza, że ekran powinien mieć przynajmniej 800 pikseli szerokości, a drugie — że ekran powinien mieć maksymalnie 1200 pikseli szerokości.
• and — operator logiczny oznaczający, że aby cała reguła została zastosowana, oba łączone przez niego warunki muszą być spełnione jednocześnie.

Podsumowując: ta reguła zostanie zastosowana tylko na ekranach o szerokości nie mniejszej niż 800 pikseli i nie większej niż 1200 pikseli, a więc mieszczącej się w przedziale od 800 do 1200 pikseli.

W powyższym przykładzie został użyty operator logiczny and, oznaczający oraz, ale oprócz niego dostępnych jest jeszcze parę innych operatorów logicznych, umożliwiających tworzenie warunków złożonych.

Tworzenie złożonych zapytań CSS Media Queries

Warunki CSS Media Queries można łączyć w bardziej złożone struktury za pomocą operatorów logicznych. Dzięki temu można precyzyjniej określić interesujące nas właściwości medium, dla którego przeznaczony jest dany arkusz stylów. Dostępne są następujące operatory logiczne:

• and — oba warunki, które łączy, muszą być spełnione
• not — odwraca znaczenie warunku
• only — ten operator jest przeznaczony tylko dla starych przeglądarek, w nowych nie wywołuje żadnego skutku. Zapobiega on stosowaniu przez stare przeglądarki arkuszy stylów z pominięciem warunków
• or — oznacza, że spełniony musi być tylko jeden z warunków, które łączy
• przecinek — działa tak samo, jak operator or, ale wymaga zastosowania odrobinę innej składni

Łączenie warunków operatorem and

Ten sposób łączenia warunków już znasz, ponieważ został opisany w przykładzie wprowadzającym do składni zapytań CSS Media Queries. Jeśli połączymy warunki za pomocą operatora and, to znaczy, że chcemy, aby nasz arkusz stylów był stosowany tylko na urządzeniach, które spełniają zarówno warunek znajdujący się po lewej, jak i po prawej stronie tego operatora.

Liczba operatorów and nie jest ograniczona, co oznacza, że można bardzo szczegółowo dobrać zestaw interesujących nas właściwości. Na przykład:

@media only screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape)

Aby spełniać warunki tej reguły, urządzenie musi być ekranem (screen) oraz musi mieć szerokość przynajmniej (min-width) 600 pikseli oraz> musi mieć szerokość nie większą niż (max-width) 900 pikseli oraz musi mieć orientację poziomą. To dość mocno naciągany przykład, ale myślę że dobrze obrazuje, z jaką dokładnością można dobierać typy i właściwości urządzeń.

Tworzenie warunków alternatywnych

Jeśli chcemy, aby nasz arkusz stylów był stosowany w różnych sytuacjach niezależnych od siebie, to możemy zdefiniować kilka warunków i połączyć je przecinkiem.

Operator ten oznacza, że aby arkusz stylów został zastosowany, wystarczy spełnić tylko jeden z łączonych przez niego warunków, czyli ma on znaczenie podobne do słowa lub, na przykład:

@media screen and (min-width: 1200px), (orientation: landscape)

Ta reguła oznacza, że arkusz stylów ma zostać zastosowany, gdy urządzenie jest ekranem o szerokości przynajmniej 1200 pikseli lub o orientacji poziomej.

Warunki alternatywne można tworzyć także za pomocą operatora or. Używa się go prawie tak samo, jak przecinka, tylko trzeba pamiętać, że w odróżnieniu od niego operator or nie może być używany na tym samym poziomie, co operatory and i not (opisany jako następny). Na przykład poprzednia reguła z użyciem operatora or wyglądałaby tak:

@media screen and ((min-aspect-ratio: 16/9) or (orientation: portrait))

Grupę operatora or musiałem umieścić w nawiasie, aby oddzielić ją od poziomu, na którym znajduje się operator and.

Negacja warunków

Ostatnim operatorem jest tzw. operator negacji, który ma postać słowa not. Odwraca on znaczenie zapytania media query, do którego został zastosowany, na przykład:

@media not screen

Ta reguła wybiera wszystkie urządzenia, które nie są ekranem. A teraz spójrz na bardziej rozbudowany przykład:

@media not screen and (width: 1200px), (orientation: landscape)

Jeśli operator not zostanie użyty poza nawiasem, to odnosi się do całego pojedynczego wyrażenia. Inaczej mówiąc, jeśli operatora tego użyjesz w zapytaniu medialnym zawierającym listę alternatywnych wyrażeń rozdzielonych przecinkami, to będzie się on odnosił do wszystkich składników jednego z tych wyrażeń, którego koniec wyznacza przecinek lub znak {.

Dlatego powyższy przykład zostanie zinterpretowany tak: (urządzenie, które nie jest ekranem oraz nie ma szerokości 1200 pikseli) albo (urządzenie o orientacji poziomej). Za pomocą kodu także można to wyrazić przez odpowiednie posłużenie się nawiasami:

@media (not (screen and (width: 1200px))), (orientation: landscape)

Znasz już składnię zapytań medialnych i umiesz sprawdzać niektóre właściwości mediów, w szczególności wiesz już, jak sprawdzić, czy urządzenie jest ekranem oraz jaką ma szerokość i orientację.

Jednak możliwości CSS Media Queries w tym zakresie są jednak znacznie szersze — użytkownik może testować wiele innych właściwości wybranego typu medium.

Najpierw przyjrzymy się dostępnym typom mediów (to będzie skromna lista), a potem zobaczymy, jakie ich właściwości możemy testować za pomocą zapytań medialnych (ta lista będzie o wiele bogatsza).

Typy mediów w CSS Media Queries

Za pomocą zapytań medialnych można sprawdzać, z jakiego rodzaju urządzeniem mamy do czynienia. Oczywiście najczęściej jest to ekran, ale dostępnych jest także parę innych typów. Obecnie dostępne są następujące słowa kluczowe typów mediów:

• all — oznacza wszystkie urządzenia
• print — oznacza drukarki oraz podglądy wydruku
• screen — oznacza wszystkie rodzaje ekranów

Oprócz tego istnieje grupa przestarzałych typów mediów, które wciąż są rozpoznawane przez przeglądarki, ale w żaden sposób nie są przez nie interpretowane: tty, tv, projection, handheld, braille, embossed, aural, speech.

Właściwości mediów w CSS Media Queries

Wachlarz właściwości mediów, jakie można sprawdzać w zapytaniach medialnych jest bardzo szeroki. Ponadto specyfikacje CSS Media Queries cały czas są rozwijane. Najnowsza wersja to Media Queries Level 5, ale jest ona jeszcze we wczesnej fazie rozwoju (stan na kwiecień 2025 r.), więc w poniższej tabeli przedstawiam głównie właściwości mediów dostępne w specyfikacji Media Queries Level 4, która jest na ukończeniu.

Właściwości zakresowe i dyskretne

W powyższej tabeli wszystkie właściwości są zaklasyfikowane do jednej z dwóch grup: właściwości dyskretnych lub właściwości zakresowych.

Właściwości zakresowe (ang. range features) to takie, do których można dodać przedrostek min- lub max-, aby wyrazić przedział wartości od-do. Używaliśmy ich już kilka razy w tym artykule. Do grupy tej zalicza się między innymi właściwość width, której najczęściej używa się właśnie z przedrostkami: min-width lub max-width.

W Media Queries Level 4 wprowadzono także nowy rodzaj składni do definiowania zakresów, wykorzystującej matematyczne operatory większości (>), mniejszości (<) i równości (=). Na przykład obie poniższe reguły CSS Media Queries znaczą ta samo:

@media screen and (min-width: 1200px)
@media screen and (width <= 1200px)

Właściwości dyskretne (ang. discrete features) wbrew pozorom nie kryją żadnej tajemnicy. W tym przypadku słowo dyskretny oznacza nieciągły. Chodzi o to, że te właściwości mają konkretnie ustalony zbiór kilku wartości w postaci słów kluczowych, jak na przykład color-gamut, która przyjmuje wartość srgb, p3 lub rec2020. Tym właściwościom nie można przypisywać żadnych przedrostków.

CSS Breakpoints, czyli punkty kontrolne CSS

Zapytania medialne nieodłącznie kojarzą się z tzw. CSS breakpoints, czyli punktami kontrolnymi zapytań medialnych CSS. Są to określone wartości szerokości obszaru widoku, przy których następuje włączenie lub wyłączenie pewnego zestawu reguł CSS. Definiuje się je po to, aby dostosować wygląd strony do specyficznych warunków przestrzennych panujących w różnych urządzeniach.

Niestety nie istnieje żaden standard w tej dziedzinie i nie da się opracować zestawu punktów kontrolnych, który dawałby idealny wynik na każdym urządzeniu.

Można wręcz powiedzieć, że ilu projektantów, tyle opinii. Dlatego nawet nie będę się silić na przedstawienie własnego zestawu punktów kontrolnych (CSS breakpoints), tylko ściągnę go od kogoś innego. Na przykład w popularnym frameworku CSS o nazwie Bootstrap zastosowane są następujące punkty kontrolne CSS breakpoints: 576px, 768px, 992px, 1200px oraz 1400px, którym odpowiadają następujące reguły @media:

@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
@media (min-width: 1400px) { ... }

W każdej z tych reguł można umieścić zestaw arkuszy stylów przeznaczonych dla ekranów o szerokości przynajmniej 576 pikseli, o szerokości przynajmniej 768 pikseli itd. Miłej zabawy!