Autor publikacji
Virtual Patriot - Administrator

CSS3 - @media queries

Data publikacji
Ostatnio edytowano

W tej części kursu CSS zajmiemy się tematem reguł @media. Poznamy wiele różnych zapisów, które na początku mogą wydać się skomplikowane, lecz trening czyni mistrza, więc warto chwilę poeksperymentować samemu z zapisami, które zostaną tutaj przedstawione.

Reguły @media istniały już wcześniej, przed pojawieniem się prac nad specyfikacją CSS3, lecz to właśnie od pojawienia się specyfikacji CSS3 reguły @media zostały dość mocno rozbudowane. Czasami możesz spotkać się z nazwą "@media queries", lecz ja będę używał wyłącznie nazwy "reguły @media".

Na początek poznamy zapisy jakie istniały przed pojawieniem się CSS3.

Tabela przedstawia dostępne oznaczenia typów mediów.
Oznaczenie Przeznaczenie
all dla wszystkich typów urządzeń
aural dla syntezatorów mowy i dźwięku
braille dla urządzeń przeznaczonych dla niewidomych, które umożliwiają czytanie
embossed dla drukarek brailla
handheld bezprzewodowe urządzenia ręczne
print dla podglądu wydruku oraz materiałów, które zostaną wydrukowane
projection dla prezentacji projektorowych
screen dla komputerów z kolorowym ekranem
tty dla dalekopisów, terminali albo przenośnych urządzeń z ograniczonymi możliwościami wyświetlania
tv dla telewizora

Z zapisami, które zostały zaprezentowane powyżej, możemy robić dość interesujące rzeczy, w naszym kodzie dokumentu HTML lub kodzie pliku CSS.

Przykład: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      @media screen {
        div {
          background-color:red;
        }
      }
    </style>
  </head>

  <body>

    <div>to jest przykładowy element - div</div>

  </body>
</html>

Reguła @media screen mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w komputerze z kolorowym ekranem (screen).

Nasza reguła @media może znaleźć się również w pliku CSS.

Przykład: 

div {
  background-color:gold;
}

@media handheld, tv {
  div {
    background-color:red;
  }
}

Tym razem nasza reguła @media została umieszczona w pliku CSS.

Reguła @media handheld, tv mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w urządzeniu przenośnym (handheld) lub w telewizorze (tv), w przeciwnym razie kolor tła elementu div będzie złoty, bo reguła CSS, która określa złoty kolor tła elementu div, nie zostanie nadpisana. Przecinek w naszej regule @media odpowiada za słowo "lub".

Nasza reguła @media może znaleźć się również w atrybucie media elementu style.

Przykład: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style media="handheld, tv">
      div {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div>to jest przykładowy element - div</div>

  </body>
</html>

Tym razem zapis handheld, tv naszej reguły @media znalazł się w atrybucie media elementu style, który został umieszczony w części head dokumentu HTML. Zapis tego typu będzie mówił przeglądarce internetowej, że reguły CSS znajdujące się w danym elemencie style mają zostać dołączone do danego dokumentu HTML tylko wtedy, gdy nasza strona internetowa zostanie wyświetlona w urządzeniu przenośnym (handheld) lub w telewizorze (tv).

Nasza reguła @media może znaleźć się również w nieco innym miejscu, w pliku HTML.

Przykład: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <link rel="stylesheet" media="handheld, tv" href="arkusz.css" >
  </head>

  <body>

    <div>to jest przykładowy element - div</div>

  </body>
</html>

Tym razem zapis handheld, tv naszej reguły @media znalazł się w atrybucie media, w elemencie link, w części head dokumentu HTML. Zapis tego typu będzie mówił przeglądarce internetowej, że plik CSS arkusz.css ma zostać dołączony do danego dokumentu HTML tylko wtedy, gdy nasza strona internetowa zostanie wyświetlona w urządzeniu przenośnym (handheld) lub w telewizorze (tv).

Czas poznać dodatkowe zapisy, jakie pojawiły się wraz ze specyfikacją CSS3.

Tabela przedstawia dodatkowe właściwości dla reguł @media.
Oznaczenie Przeznaczenie
width określenie wartości szerokości okna przeglądarki internetowej
height określenie wartości wysokości okna przeglądarki internetowej
device-width określenie wartości rozdzielczości ekranu urządzenia (szerokość)
device-height określenie wartości rozdzielczości ekranu urządzenia (wysokość)
color określenie liczby bitów na kolor lub określenie czy urządzenie posiada kolorowy ekran
color-index określenie wartości głębi kolorów, które obsługuje dane urządzenie
aspect-ratio określenie wartości proporcji szerokości do wysokości okna przeglądarki internetowej
device-aspect-ratio określenie wartości proporcji szerokości do wysokości rozdzielczości ekranu urządzenia
grid określenie urządzenia z ograniczonymi możliwościami wyświetlania
monochrome określenie liczby bitów na piksel w urządzeniach monochromatycznych, jednokolorowych
orientation określenie orientacji pionowej lub poziomej urządzenia
resolution określenie wartości gęstości pikseli dla danego urządzenia
scan określenie czy urządzenie posiada skanowanie obrazu progresywne czy międzyliniowe

Niektóre z wyżej wymienionych oznaczeń umożliwiają określenie minimalnej lub maksymalnej wartości, co wymaga dodania przedrostka min lub max.

Żeby jeszcze bardziej ułatwić nam tworzenie reguł @media, zostały dodane kolejne dodatkowe zapisy, którymi możemy się posługiwać.

Tabela przedstawia dodatkowe operatory logiczne dla reguł @media.
Oznaczenie Przeznaczenie
and operator " i ", służy do tworzenia bardziej precyzyjnych warunków w regule @media
przecinek operator " lub ", służy do tworzenia bardziej precyzyjnych warunków w regule @media
not operator " negacji ", służy do tworzenia bardziej precyzyjnych warunków w regule @media
only operator przeznaczony dla starszych przeglądarek internetowych

Przykład: 

@media all and (min-width:480px) and (max-width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-width:480px) and (max-width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość szerokości okna przeglądarki internetowej będzie większa niż 480 pikseli oraz (and) będzie mniejsza niż 800 pikseli, tyczy się to wszystkich urządzeń (all), w jakich zostanie wyświetlona nasza strona internetowa.

Uwaga W nawiasie nie stawiamy średnika. Jeżeli chcemy zdefiniować więcej właściwości dla danego urządzenia to wykorzystujemy do tego operator and, np. (min-width:480px) and (max-width:800px) and (max-height:800px) itd.

Więcej przykładów znajdziesz poniżej.

width

width - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy szerokość okna przeglądarki internetowej będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Wartość tą możemy określić za pomocą dowolnej jednostki, która jest prawidłową jednostką dla właściwości width.

Przykład: 

@media all and (width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość szerokości okna przeglądarki internetowej będzie dokładnie równa 800 pikseli.

Kolejny przykład: 

@media all and (min-width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość szerokości okna przeglądarki internetowej będzie nie mniejsza niż 800 pikseli.

Kolejny przykład: 

@media all and (max-width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość szerokości okna przeglądarki internetowej będzie nie większa niż 800 pikseli.

height

height - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy wysokość okna przeglądarki internetowej będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Wartość tą możemy określić za pomocą dowolnej jednostki, która jest prawidłową jednostką dla właściwości height.

Przykład: 

@media all and (height:300px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (height:300px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość wysokości okna przeglądarki internetowej będzie dokładnie równa 300 pikseli.

Kolejny przykład: 

@media all and (min-height:300px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-height:300px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość wysokości okna przeglądarki internetowej będzie nie mniejsza niż 300 pikseli.

Kolejny przykład: 

@media all and (max-height:300px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-height:300px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość wysokości okna przeglądarki internetowej będzie nie większa niż 300 pikseli.

device-width

device-width - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy szerokość rozdzielczości ekranu urządzenia będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Wartość tą możemy określić za pomocą dowolnej jednostki, która jest prawidłową jednostką dla właściwości width.

Przykład: 

@media all and (device-width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (device-width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość szerokości rozdzielczości ekranu urządzenia będzie dokładnie równa 800 pikseli.

Kolejny przykład: 

@media all and (min-device-width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-device-width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość szerokości rozdzielczości ekranu urządzenia będzie nie mniejsza niż 800 pikseli.

Kolejny przykład: 

@media all and (max-device-width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-device-width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość szerokości rozdzielczości ekranu urządzenia będzie nie większa niż 800 pikseli.

device-height

device-height - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy wysokość rozdzielczości ekranu urządzenia będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Wartość tą możemy określić za pomocą dowolnej jednostki, która jest prawidłową jednostką dla właściwości height.

Przykład: 

@media all and (device-height:480px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (device-height:480px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość wysokości rozdzielczości ekranu urządzenia będzie dokładnie równa 480 pikseli.

Kolejny przykład: 

@media all and (min-device-height:480px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-device-height:480px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość wysokości rozdzielczości ekranu urządzenia będzie nie mniejsza niż 480 pikseli.

Kolejny przykład: 

@media all and (max-device-height:480px) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-device-height:480px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość wysokości rozdzielczości ekranu urządzenia będzie nie większa niż 480 pikseli.

color

color - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy ilość bitów na kolor w danym urządzeniu będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Jeżeli ilość bitów na dany kolor (czerwony, zielony, niebieski) nie jest równa, to brana jest pod uwagę najmniejsza wartość.

Przykład: 

@media all and (color:8) {
  div {
    background-color:red;
  }
}

Reguła @media all and (color:8) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy ilość bitów na kolor w danym urządzeniu jest dokładnie równa 8.

Kolejny przykład: 

@media all and (min-color:8) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-color:8) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy ilość bitów na kolor w danym urządzeniu nie jest mniejsza niż 8.

Kolejny przykład: 

@media all and (max-color:8) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-color:8) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy ilość bitów na kolor w danym urządzeniu nie jest większa niż 8.

color-index

color-index - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy głębia kolorów w danym urządzeniu będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Przykład: 

@media all and (color-index:256) {
  div {
    background-color:red;
  }
}

Reguła @media all and (color-index:256) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość głębi kolorów w danym urządzeniu jest dokładnie równa 256.

Kolejny przykład: 

@media all and (min-color-index:256) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-color-index:256) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość głębi kolorów w danym urządzeniu nie jest mniejsza niż 256.

Kolejny przykład: 

@media all and (max-color-index:256) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-color-index:256) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość głębi kolorów w danym urządzeniu nie jest większa niż 256.

aspect-ratio

aspect-ratio - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy proporcja szerokości do wysokości okna przeglądarki internetowej będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Wartość tą podajemy jako ułamek. Kreskę ułamkową stanowi znak /.

Przykładowa wartość 4/3 pasuje między innymi do takich rozmiarów jak: 640×480, 800×600, 1024×768, ponieważ, np. 640 / 480 = 1.(3), czyli 4/3.

Przykład: 

@media all and (aspect-ratio:4/3) {
  div {
    background-color:red;
  }
}

Reguła @media all and (aspect-ratio:4/3) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość proporcji szerokości do wysokości okna przeglądarki internetowej będzie dokładnie równa 4/3.

Kolejny przykład: 

@media all and (min-aspect-ratio:4/3) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-aspect-ratio:4/3) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość proporcji szerokości do wysokości okna przeglądarki internetowej będzie nie mniejsza niż 4/3.

Kolejny przykład: 

@media all and (max-aspect-ratio:4/3) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-aspect-ratio:4/3) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość proporcji szerokości do wysokości okna przeglądarki internetowej będzie nie większa niż 4/3.

device-aspect-ratio

device-aspect-ratio - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy proporcja szerokości do wysokości rozdzielczości ekranu urządzenia będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Wartość tą podajemy jako ułamek. Kreskę ułamkową stanowi znak /.

Przykładowa wartość 4/3 pasuje między innymi do takich rozmiarów jak: 640×480, 800×600, 1024×768, ponieważ, np. 800 / 600 = 1.(3), czyli 4/3.

Przykład: 

@media all and (device-aspect-ratio:4/3) {
  div {
    background-color:red;
  }
}

Reguła @media all and (device-aspect-ratio:4/3) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość proporcji szerokości do wysokości rozdzielczości ekranu urządzenia będzie dokładnie równa 4/3.

Kolejny przykład: 

@media all and (min-device-aspect-ratio:4/3) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-device-aspect-ratio:4/3) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość proporcji szerokości do wysokości rozdzielczości ekranu urządzenia będzie nie mniejsza niż 4/3.

Kolejny przykład: 

@media all and (max-device-aspect-ratio:4/3) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-device-aspect-ratio:4/3) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość proporcji szerokości do wysokości rozdzielczości ekranu urządzenia będzie nie większa niż 4/3.

grid

grid - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy nasza strona internetowa została wyświetlona w urządzeniu z ograniczonymi możliwościami wyświetlania (np. terminale, starsze telefony komórkowe ze stałą wartością wysokości czcionki, urządzenia korzystające z bitmapy).

Przykład: 

@media handheld and (grid) {
  div {
    background-color:red;
  }
}

Reguła @media handheld and (grid) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa została wyświetlona w przenośnym urządzeniu z ograniczonymi możliwościami wyświetlania.

monochrome

monochrome - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy ilość bitów na kolor w urządzeniu, które wyświetla naszą stronę internetową w trybie monochromatycznym, będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Tryb monochromatyczny to nie tylko kolory czarny i biały, ponieważ w różnych trybach monochromatycznych mogą się zdarzyć również inne sekwencje prostych kolorów.

Przykład: 

@media all and (monochrome:8) {
  div {
    background-color:white;
  }
}

Reguła @media all and (monochrome:8) mówi przeglądarce internetowej, że biały kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy ilość bitów na kolor w danym urządzeniu monochromatycznym jest dokładnie równa 8.

Kolejny przykład: 

@media all and (min-monochrome:8) {
  div {
    background-color:white;
  }
}

Reguła @media all and (min-monochrome:8) mówi przeglądarce internetowej, że biały kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy ilość bitów na kolor w danym urządzeniu monochromatycznym nie jest mniejsza niż 8.

Kolejny przykład: 

@media all and (max-monochrome:8) {
  div {
    background-color:white;
  }
}

Reguła @media all and (max-monochrome:8) mówi przeglądarce internetowej, że biały kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy ilość bitów na kolor w danym urządzeniu monochromatycznym nie jest większa niż 8.

orientation

orientation - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy szerokość okna przeglądarki internetowej będzie miała wartość mniejszą lub większą niż wysokość okna przeglądarki internetowej.

Cecha orientation pomaga nam wykryć w jakiej orientacji, pionowej (portrait) czy poziomej (landscape), została wyświetlona nasza strona internetowa, w przeglądarce danego urządzenia.

Przykład: 

@media all and (orientation:portrait) {
  div {
    background-color:red;
  }
}

Reguła @media all and (orientation:portrait) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w przeglądarce internetowej, której wartość szerokości okna jest mniejsza od wartości wysokości jej okna (orientacja pionowa).

Kolejny przykład: 

@media all and (orientation:landscape) {
  div {
    background-color:red;
  }
}

Reguła @media all and (orientation:landscape) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w przeglądarce internetowej, której wartość szerokości okna jest większa od wartości wysokości jej okna (orientacja pozioma).

resolution

resolution - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy gęstość pikseli w danym urządzeniu będzie miała określoną wartość, lub gdy będzie większa niż podana wartość, lub gdy będzie mniejsza niż podana wartość.

Aby określić wartość dla resolution możemy posłużyć się jednostką dpi (plamki na cal) lub dpcm (plamki na centymetr).

Przykład: 

@media all and (resolution:200dpi) {
  div {
    background-color:red;
  }
}

Reguła @media all and (resolution:200dpi) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość gęstości pikseli w danym urządzeniu jest dokładnie równa 200 plamek na cal.

Kolejny przykład: 

@media all and (min-resolution:200dpi) {
  div {
    background-color:red;
  }
}

Reguła @media all and (min-resolution:200dpi) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość gęstości pikseli w danym urządzeniu nie jest mniejsza niż 200 plamek na cal.

Kolejny przykład: 

@media all and (max-resolution:200dpi) {
  div {
    background-color:red;
  }
}

Reguła @media all and (max-resolution:200dpi) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy wartość gęstości pikseli w danym urządzeniu nie jest większa niż 200 plamek na cal.

scan

scan - za pomocą tej właściwości reguły @media, możemy określić reguły CSS, które zostaną aktywowane tylko wtedy, gdy tryb skanowania obrazu w telewizorze jest trybem progresywnym (progressive) lub międzyliniowym (interlace).

Przykład: 

@media tv and (scan:progressive) {
  div {
    background-color:red;
  }
}

Reguła @media all and (scan:progressive) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w telewizorze, którego obraz jest skanowany w trybie progresywnym.

Kolejny przykład: 

@media tv and (scan:interlace) {
  div {
    background-color:red;
  }
}

Reguła @media all and (scan:interlace) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w telewizorze, którego obraz jest skanowany w trybie międzyliniowym.

and

and - operator ten łączy różne właściwości w regule @media, dla danego urządzenia, dzięki czemu możemy tworzyć bardziej precyzyjne reguły @media. Słowo and oznacza "i" lub jak kto woli "oraz".

Przykład: 

@media all and (min-width:480px) and (max-width:800px) and (orientation:landscape) {
  div {
    background-color:red;
  }
}

Powyższa reguła @media mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w przeglądarce internetowej, w dowolnym urządzeniu (all), którego aktualna wartość szerokości okna przeglądarki internetowej jest nie mniejsza niż 480 pikseli (min-width:480px) ORAZ nie jest większa niż 800 pikseli (max-width:800px), dodatkowo strona musi zostać wyświetlona w orientacji poziomej (orientation:landscape).

przecinek

przecinek - operator ten umożliwia stworzenie jednego zapisu reguły @media, z różnym właściwościami, dla różnych typów urządzeń. Przecinek w regule @media pełni rolę słowa "lub".

Operator ten przydaje się nam w przypadku gdy chcemy określić te same reguły CSS dla kilku różnych urządzeń, możemy (lecz nie musimy) przy tym określić różne właściwości dla reguły @media. 

@media print, tv, handheld {
  div {
    background-color:red;
  }
}

Reguła @media print, tv, handheld mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w podglądzie wydruku (print) LUB w telewizorze (tv) LUB w bezprzewodowym urządzeniu ręcznym (hendheld).

Kolejny przykład: 

@media tv and (scan:progressive), handheld and (monochrome) and (orientation:portrait) {
  div {
    background-color:red;
  }
}

Powyższa reguła @media mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w telewizorze (tv) z progresywnym skanowaniem obrazu (scan:progressive) LUB gdy nasza strona zostanie wyświetlona w bezprzewodowym urządzeniu ręcznym (handheld), które jest monochromatyczne (monochrome) ORAZ które posiada orientację pionową (orientation:portrait).

not

not - operator ten umożliwia zanegowanie zapisu reguły @media, czyli zaprzeczenia danego zapisu.

Przykład: 

@media not all and (color) {
  div {
    background-color:red;
  }
}

Reguła @media not all and (color) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w przeglądarce internetowej, w dowolnym urządzeniu tylko nie w urządzeniu z kolorowym ekranem.

Uwaga Operator not tyczy się tylko tej grupy urządzeń i wartości, w którym został on użyty. Gdy dodamy do naszej reguły @media więcej grup urządzeń i właściwości, po przecinku, to w każdej takiej grupie musimy użyć operator not, oczywiście jeżeli chcemy zaprzeczyć daną grupę operatorem not.

Przykład: 

@media not all and (color), screen {
  div {
    background-color:red;
  }
}

Reguła @media not all and (color), screen mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w przeglądarce internetowej, w dowolnym urządzeniu tylko nie w urządzeniu z kolorowym ekranem. Jednak czerwony kolor tła dla elementu div może zostać aktywowany w komputerze z kolorowym ekranem, ponieważ po przecinku użyliśmy zapisu screen bez operatora not.

only

only - operator przeznaczony dla starszych przeglądarek internetowych. Operator ten umożliwia zablokowanie reguł @media dla starszych przeglądarek internetowych (np. starszych wersji przeglądarki Internet Explorer).

Przykład: 

@media only all {
  div {
    background-color:red;
  }
}

Gdyby nasza reguła nie zawierała operatora only to przeglądarka internetowa Internet Explorer w wersji wcześniejszej niż 9, która obsługuje proste reguły @media (tylko te, które określają typ urządzenia) dodałaby czerwony kolor tła do elementu div, a tak dzięki operatorowi only tak się nie dzieje.

Dodatkowe informacje

Gdy chcemy określić jakieś kryteria w regule @media, według których reguły CSS mają być dodane do naszej strony tylko w określonej sytuacji, jednak dla wszystkich typów urządzeń, to możemy pominąć zapis all and.

Przykład: 

@media (min-width:480px) and (max-width:800px) {
  div {
    background-color:red;
  }
}

Reguła @media (min-width:480px) and (max-width:800px) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w przeglądarce internetowej, w dowolnym urządzeniu, którego aktualna wartość szerokości okna przeglądarki internetowej jest nie mniejsza niż 480 pikseli (min-width:480px) oraz nie jest większa niż 800 pikseli (max-width:800px).

Każdą właściwość @media, jaką poznaliśmy, możemy użyć bez podawania konkretnej wartości, dzięki czemu nasz zapis zyska dodatkowe cechy.

Przykład: 

@media all and (color) {
  div {
    background-color:red;
  }
}

Reguła @media all and (color) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w przeglądarce internetowej, w dowolnym urządzeniu, które posiada kolorowy wyświetlacz.

Kolejny przykład: 

@media all and (monochrome) {
  div {
    background-color:red;
  }
}

Reguła @media all and (monochrome) mówi przeglądarce internetowej, że czerwony kolor tła dla elementu div ma zostać aktywowany tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w przeglądarce internetowej, w dowolnym urządzeniu monochromatycznym.

Wszystkie poznane zapisy w tej części kursu CSS możemy również wykorzystywać w regule @import, która odpowiada za dołączenie dodatkowego arkusza CSS do danego pliku CSS.

Przykład: 

@import url("dodatkowy_arkusz.css") screen and (min-width:480px), tv;

Powyższa reguła @import mówi przeglądarce internetowej, że plik CSS o nazwie "dodatkowy_arkusz" ma zostać dołączony do danego pliku CSS tylko w momencie gdy nasza strona internetowa zostanie wyświetlona w telewizorze (tv) lub w oknie przeglądarki internetowej komputera z kolorowym ekranem (screen), dodatkowo szerokość tej przeglądarki internetowej musi być nie mniejsza niż 480 pikseli (min-width:480px).

Podsumowanie

To w jaki sposób zostały rozbudowane reguły @media jest strzałem w dziesiątkę, ponieważ nie potrzebujemy żadnych dodatkowych skryptów języka programowania JavaScript, aby wykryć właściwości urządzenia oraz przeglądarki internetowej, którą aktualnie używa użytkownik, do przeglądania naszej strony internetowej, dzięki czemu możemy tworzyć wygląd naszej strony internetowej pod różne typy urządzeń oraz dla różnych rozdzielczości, czy to okna przeglądarki, czy to danego urządzenia. Wystarczy, że napisze osobne pliki CSS dla poszczególnych typów mediów oraz ich właściwości lub napiszemy jeden osobny plik CSS, który będzie nadpisywał istniejące reguły CSS, dla poszczególnych typów mediów oraz ich właściwości.

Wiele przeglądarek internetowych interpretuje wszystkie zapisy reguły @media. Przeglądarka internetowa Internet Explorer od wersji 9 i to nam w zupełności wystarczy, ponieważ procent użytkowników, którzy korzystają z przeglądarki Internet Explorer w wersji starszej niż 9 jest bardzo mały.

W następnej części kursu CSS poznamy do czego służy reguła @supports.