Media CSS

Rodzaje mediów internetowych. Typy (all, aural, braille, embossed, handheld, print, projection, screen, tty, tv) i grupy (continuous, paged, visual, aural, tactile, grid, bitmap, interactive, static, all) mediów CSS.

Dostosowanie stylów CSS do różnych urządzeń
W jaki sposób przygotować specjalne wersje strony przeznaczone do wydruku, dla urządzeń przenośnych, a nawet syntezatorów mowy, bez potrzeby tworzenia dodatkowych dokumentów HTML?
Wybór medium @media
Jak określić specjalny wygląd strony w wersji do wydruku czy na urządzenia przenośne?
Typy mediów
Do czego służą typy mediów CSS: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv?
Grupy mediów
Czym różnią się grupy od typów mediów CSS: continuous, paged, visual, aural, tactile, grid, bitmap, interactive, static, all?
Zapytania mediów
Jak stworzyć stronę, która automatycznie dopasowuje się do możliwości urządzenia: komputer, tablet, smartphone, telewizor, projektor?

Dostosowanie stylów CSS do różnych urządzeń

W jaki sposób przygotować specjalne wersje strony przeznaczone do wydruku, dla urządzeń przenośnych, a nawet syntezatorów mowy, bez potrzeby tworzenia dodatkowych dokumentów HTML?

Jedną z najważniejszych zalet stylów jest możliwość określenia, jak będzie wyglądał dokument w różnych mediach: na ekranie, papierze, z syntezatorem mowy, z urządzeniem do czytania braillem itp.

Pewne cechy CSS zostały stworzone tylko dla określonych mediów (np. cue-before - sygnał wywoławczy dla medium aural). Jednakże różne media mogą dzielić te same własności, lecz często wymagają odmiennych wartości. Na przykład rozmiar czcionki (font-size) można ustawić zarówno dla ekranu, jak i dla drukarki, lecz dokumenty na komputerze potrzebują zwykle większej czcionki niż na papierze. Podobnie doświadczenie wskazuje, że czcionki z rodziny sans-serif są czytelniejsze na ekranie, podczas gdy serif - na papierze. Z tych powodów konieczne jest określenie, że dany arkusz stylów lub jego część jest przyporządkowana do pewnego z mediów.

Wybór medium @media

Jak określić specjalny wygląd strony w wersji do wydruku czy na urządzenia przenośne?

Istnieją dwie drogi do określenia niezależności arkuszy stylów, a przez to przypisania różnym mediom odmiennych cech:

Podanie medium docelowego w arkuszu stylów, korzystając z polecenia @media lub @import:
```
@import url(glos.css) aural;
@media print {
	/* Arkusz dla wydruku */
}
```

Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu LINK precyzujący włączenie zewnętrznego arkusza stylów):

<!doctype html>
<html lang="pl">
	<head>
		<title>Odnośnik do medium docelowego</title>
		<link rel="stylesheet" media="print, handheld" href="arkusz.css">
	</head>
	<body>
		<p>Ciało dokumentu...</p>
	</body>
</html>

Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu STYLE precyzujący włączenie wewnętrznego arkusza stylów):

<!doctype html>
<html lang="pl">
	<head>
		<title>Arkusz z medium docelowym</title>
		<style media="print">
		/* Arkusz dla wydruku */
		</style>
	</head>
	<body>
		<p>Ciało dokumentu...</p>
	</body>
</html>

Komenda @media podaje listę docelowych typów nazw mediów, rozdzielonych przecinkami. Pozwala to autorowi zdefiniować różne typy w jednym arkuszu stylów, np.:

@media print {
	body { font-size: 10pt }
}

@media screen {
	body { font-size: 12pt }
}

@media screen, print {
	body { line-height: 1.2 }
}

Powyższe polecenia, wpisane w arkuszu stylów, definiują rozmiar czcionki 10pt dla wydruku, 12pt dla ekranu komputerowego oraz wysokość linii 1.2 jednocześnie dla ekranu i wydruku.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`@media`	1 2008-12-11	1 2004-11-09	12 2015-07-29	9.2 2007-04-11	3 2007-10-26

Typy mediów

Do czego służą typy mediów CSS: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv?

Nazwy mediów są odbiciem urządzeń docelowych, dla których stosowne własności mają sens (CSS 2):

all: Dla wszystkich urządzeń
aural: Syntezatory mowy (słuchowe arkusze stylów) - CSS 2.1 wprowadza zamiast tego typ speech
braille: Urządzenia do czytania braillem (dla niewidomych)
embossed: Drukarki brailla
handheld: Urządzenia ręczne (zwykle mały ekran, czarno-białe, ograniczone pasmo)
print: Materiały drukowane nieprzezroczyste i podgląd wydruku
projection: Prezentacje projektorowe lub nadruki na folii rzutnikowej
screen: Kolorowy ekran komputerowy
tty: Media używające siatki o stałej szerokości znaków jak dalekopisy, terminale lub przenośne urządzenia z ograniczonymi możliwościami wyświetlania
tv: Odbiorniki telewizyjne (niska rozdzielczość, kolor, ograniczone przewijanie, dostępny dźwięk)

Grupy mediów

Czym różnią się grupy od typów mediów CSS: continuous, paged, visual, aural, tactile, grid, bitmap, interactive, static, all?

Ponieważ zwykle cechy stosują się do kilku mediów jednocześnie, zamiast podawania listy wszystkich, można podać tylko nazwę grupy mediów (CSS 2):

continuous: Media "ciągłe" - nie podzielone na strony (aural, braille, handheld, screen, tty, tv)
paged: Podział na strony (embosssed, handheld, print, projection, tv)
visual: Wizualne (handheld, print, projection, screen, tty, tv)
aural: Słuchowe (aural, tv) - CSS 2.1 wprowadza zamiast tego grupy speech i audio
tactile: Dotykowe (braille, embossed)
grid: Urządzenia używające siatki o stałej szerokości znaku (braille, embossed, handheld, tty)
bitmap: Mapa bitowa (handheld, print, projection, screen, tv)
interactive: Interaktywne (aural, braille, embossed, handheld, screen, tty, tv)
static: "Statyczne" - nieinteraktywne (aural, braille, embossed, handheld, print, projection)
all: Wszystkie (all)

Powiązania między grupami a typami mediów (CSS 2)
Typy mediów	Grupy mediów
Typy mediów	continuous / paged	visual / aural / tactile	grid / bitmap	interactive / static
aural	continuous	aural	-	+
braille	continuous	tactile	grid	+
emboss	paged	tactile	grid	+
handheld	+	visual	+	+
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	static
screen	continuous	visual	bitmap	+
tty	continuous	visual	grid	+
tv	+	visual, aural	bitmap	+

Źródło: Cascading Style Sheets, Level 2

Zapytania mediów

Jak stworzyć stronę, która automatycznie dopasowuje się do możliwości urządzenia: komputer, tablet, smartphone, telewizor, projektor?

Zapytania mediów

CSS 3

W dobie rozkwitu różnorakich urządzeń mobilnych, proste przygotowanie osobnych arkuszy CSS dla każdego medium może nie wystarczyć. Malutki ekran tradycyjnego telefonu komórkowego nie można przecież porównywać z dużym ekranem tabletu. Nie mówiąc już o tym, że współczesne urządzenia mobilne często mogą pracować w dwóch trybach położenia ekranu: pionowym i poziomym. Zapytania mediów (ang. media queries) pozwalają precyzyjnie dopasować arkusz CSS nie tylko do typu czy grupy mediów, ale przede wszystkim do możliwości urządzenia.

Nie należy jednak myśleć, że jest to przydatne jedynie kiedy tworzymy stronę na urządzenia mobilne. Bez trudu można wyobrazić sobie specjalny wygląd dokumentu, dopasowany do wyświetlania na telewizorze o proporcjach ekranu 16:9. Dodatkowe możliwości możemy uzyskać również w przypadku sterowania wyglądem strony wyświetlanej na ekranie tradycyjnego monitora komputerowego. Na przykład jeśli użytkownik ma ustawioną wyższą rozdzielczość ekranu, możemy wyświetlić mu dodatkową kolumnę treści. Co więcej, można płynnie dopasowywać wygląd strony przy przeciąganiu rozmiaru okna przeglądarki przez użytkownika.

Zapytania mediów wpisuje się dokładnie w tych samych miejscach, co przy tradycyjnym wyborze medium, np.:

@import url(kolor.css) screen and (color);
@media screen and (color) {
	/* Arkusz dla urządzeń z kolorowym ekranem */
}

<link rel="stylesheet" media="screen and (color)" href="kolor.css">

Zapytanie mediów składa się ze standardowego typu lub grupy medium, po którym następuje słowo kluczowe "and" (ang. i), a następnie w nawiasie cecha medium (ang. media feature), określająca wymagane możliwości urządzenia w ramach podanego na początku mediów ogólnego.

Pomiędzy słowem kluczowym "and" a nawiasem musi znajdować się znak spacji.

Nic nie stoi na przeszkodzie, aby w jednym zapytaniu użyć kilku cech mediów, np.:

@media screen and (min-width: 800px) and (max-width: 1280px) {
	/* Okno przeglądarki o szerokości pomiędzy 800px a 1280px */
}

W przypadku, gdy zapytanie dotyczy medium "all" (wszystkie media), można użyć formy skróconej zapisu - podając jedynie samą cechę medium w nawiasie, np.:

@media (color) {
	/* Arkusz dla wszystkich urządzeń kolorowych */
}

Czasami może nam zależeć na zastosowaniu specjalnego formatowania dla wszystkich przypadków oprócz wskazanego. Robi się to poprzez poprzedzenie całej deklaracji zapytania mediów słowem kluczowym "not" (ang. nie):

@media not screen and (color) {
	/* Arkusz dla urządzeń nie wyposażonych w kolorowy ekran */
}

Tak jak w przypadku standardowych mediów, możliwe jest wyliczenie kilku zapytań mediów po przecinku, np.:

@media screen and (color), projection and (color) {
	/* Arkusz dla kolorowych ekranów lub kolorowych projektorów */
}

Kompatybilność wstecz

Jak można się było przekonać, zapytania mediów wstawia się dokładnie w tych samych miejscach, co tradycyjne media. Jak zatem zachowają się starsze przeglądarki, które nie obsługują takiego rozszerzonego zapisu? Na szczęście już w specyfikacji HTML 4.01 przewidziano taką sytuację. Jeżeli przeglądarka nie obsługuje zapytań mediów, powinna obciąć wszystko od pierwszej spacji do pierwszego napotkanego przecinka lub do końca deklaracji medium. W ten sposób zapytanie: "screen and (color)" zostanie zamienione na: "screen". Co prawda nie nastąpi zatem dopasowanie tylko dla urządzeń z kolorowymi ekranami, ale przynajmniej nie utracimy całego arkusza.

Co z tego wynika, jeśli musimy zapewnić kompatybilność wstecz, nie powinniśmy używać skróconego zapisu, tzn. zamiast samego: "(color)" lepiej wpisać pełną formę: "all and (color)".

Może się zdarzyć, że opisana redukcja nazwy medium w starszych przeglądarkach, wywoła niepożądany wygląd strony. Jeśli chcemy, aby dany arkusz został zastosowany tylko w przeglądarkach, które w pełni obsługują zapytania mediów, całą deklarację należy poprzedzić słowem kluczowym "only" (ang. tylko), np.:

@media only screen and (color) {
	/* Arkusz dla urządzeń z kolorowym ekranem, które obsługują zapytania mediów */
}

W takim przypadku dla starszych przeglądarek zapytanie zostanie zredukowane do samego "only", co nie jest żadnym prawidłowym typem ani grupą mediów, a więc arkusz nie zostanie zastosowany - o co nam chodziło. Stosując słowo kluczowe "not" nie używa się już "only", gdyż samo "not" również nie jest prawidłowym typem ani grupą mediów.

Cechy mediów

Cechy mediów (podawane w zapytaniach mediów w nawiasie) mogą występować z wartością lub - jeśli to ma sens - bez wartości. W przypadku cech mediów z wartością, zwykle używa się prefiksów "min-" lub "max-", co oznacza odpowiednio, że urządzenie musi posiadać możliwości co najmniej takie jak wskazane albo co najwyżej wskazane.

@media all and (color) {
	/* Urządzenia kolorowe */
}
@media all and (min-color: 8) {
	/* Urządzenia z obsługą minimum 8-bitowej głębi na składową koloru */
}
@media all and (max-color: 10) {
	/* Urządzenia z obsługą maksimum 10-bitowej głębi na składową koloru */
}

Lista cech mediów:

Szerokość
Wysokość
Szerokość urządzenia
Wysokość urządzenia
Orientacja
Proporcje obrazu
Proporcje obrazu urządzenia
Głębia koloru
Paleta kolorów
Urządzenia monochromatyczne
Rozdzielczość
Technika wyświetlania
Siatka

Szerokość

medium and (width: szerokość)
medium and (min-width: szerokość)
medium and (max-width: szerokość)

Medium to typ lub grupa mediów (visual, tactile). Szerokość należy podać przy użyciu jednostek długości.

Szerokość w tym przypadku dotyczy obszaru dostępnego na prezentację strony. Jeśli chodzi o ekran, będzie to szerokość okna przeglądarki - łączenie z ewentualnym pionowym paskiem przewijania. Natomiast na wydruku będzie to szerokość dostępna do zadrukowania na kartce papieru - łącznie z marginesami wydruku.

Co ciekawe, przeglądarka może (lecz nie musi) dynamicznie dopasowywać wygląd strony podczas przeciągania rozmiaru okna przez użytkownika. Zwykle podawanie dokładnej wartości - bez prefiksów "min-" ani "max-" - jest nieprzydatne, gdyż ciężko oczekiwać od użytkownika, że dopasuje rozmiar okna przeglądarki do takiego wymiaru z dokładnością co do piksela. Jeżeli zależy nam, aby strona wyglądała zawsze tak samo w podanej rozdzielczości ekranu - bez względu na aktualny rozmiar okna przeglądarki - należy skorzystać z cechy medium: device-width (szerokość urządzenia).

Wysokość

medium and (height: wysokość)
medium and (min-height: wysokość)
medium and (max-height: wysokość)

Medium to typ lub grupa mediów (visual, tactile). Wysokość należy podać przy użyciu jednostek długości.

Dotyczy aktualnej wysokości wyświetlanej, a nie rozdzielczości ekranu.

Szerokość urządzenia

medium and (device-width: szerokość)
medium and (min-device-width: szerokość)
medium and (max-device-width: szerokość)

Medium to typ lub grupa mediów (visual, tactile). Szerkość należy podać przy użyciu jednostek długości.

Dotyczy ustawionej poziomej rozdzielczości ekranu (aktualna szerokość okna przeglądarki może być mniejsza). Na wydruku cecha ta odnosi się do pełnej szerokości arkusza papieru (ze względu na ograniczenia techniczne drukarek, możliwy do zadrukowania obszar papieru może być mniejszy). Dla ekranów najkorzystniej jest podawać tę wartość przy użyciu pikseli, a na wydruku - milimetrów, np.:

@media screen and (device-width: 1280px), print and (device-width: 210mm) { /* ... */ }

Wysokość urządzenia

medium and (device-height: wysokość)
medium and (min-device-height: wysokość)
medium and (max-device-height: wysokość)

Medium to typ lub grupa mediów (visual, tactile). Wysokość należy podać przy użyciu jednostek długości.

Dotyczy rozdzielczości ekranu, a nie aktualnej wysokości wyświetlanej.

Orientacja

medium and (orientation: orientacja)

Medium to typ lub grupa mediów (bitmap). Jako orientacja można podać:

portrait: orientacja pionowa (portret) - szerokość jest mniejsza lub równa wysokości
landscape: orientacja pozioma (pejzaż) - szerokość jest większa niż wysokość

Orientacja odnosi się nie tylko do arkusza papieru na wydruku, ale również może dotyczyć niektórych urządzeń mobilnych (smartfony, tablety), które w zależności od ułożenia ekranu wyświetlają obraz w dwóch trybach: pionowym (portrait) lub poziomym (landscape).

W Operze 11.5 każdy wydruk (print) jest traktowany jako "landscape".

Proporcje obrazu

medium and (aspect-ratio: proporcje)
medium and (min-aspect-ratio: proporcje)
medium and (max-aspect-ratio: proporcje)

Medium to typ lub grupa mediów (bitmap). Proporcje należy określić jako stosunek szerokości do wysokości (np.: 210/297).

Dotyczy wyłącznie grupy mediów "bitmap". Proporcje są wyrażone wprost stosunkiem wartości cech: width/height.

Proporcje obrazu urządzenia

medium and (device-aspect-ratio: proporcje)
medium and (min-device-aspect-ratio: proporcje)
medium and (max-device-aspect-ratio: proporcje)

Medium to typ lub grupa mediów (bitmap). Proporcje należy określić jako stosunek szerokości do wysokości (np.: 16/9).

Dotyczy wyłącznie grupy mediów "bitmap". Proporcje są wyrażone wprost stosunkiem wartości cech: device-width/device-height. Z tego względu cecha ta idealnie nadaje się do określenia specjalnego wyglądu strony wyświetlanej w telewizorze (np. z ekranem panoramicznym) lub poprzez projektor komputerowy (jako prezentacja).

Głębia koloru

medium and (color)
medium and (color: głębia)
medium and (min-color: głębia)
medium and (max-color: głębia)

Medium to typ lub grupa mediów (visual). Jako głębia należy podać liczbę bitów przypadającą na pojedynczą składową koloru (np. 8 lub 10).

Bez podanej wartości, cecha medium color dopasowuje urządzenia wyświetlające kolorowy obraz - bez względu na liczbę możliwych do odwzorowania barw. Wartość głębi nie oznacza wprost liczby kolorów. Na ekranie monitora każda barwa jest złożeniem trzech kolorów podstawowych: czerwonego (ang. red), zielonego (ang. green) i niebieskiego (ang. blue). W takim przypadku liczbę kolorów wylicza się podnosząc dwójkę (bit ma dwie wartości) do potrojonej (są trzy kolory podstawowe) potęgi wskazanej wartością głębi koloru:

2^3*1 = 2 * 2 * 2 = 8 2^3*2 = 64 2^3*3 = 512 2^3*4 = 4 096 2^3*8 = 16 777 216 2^3*10 = 1 073 741 824

Po ustawieniu w systemie operacyjnym 32-bitowej jakości kolorów, większość przeglądarek wskazuje 8-bitową głębię koloru (color: 8), a jedynie Chrome 14 - 10-bitową. Po przestawieniu systemu operacyjnego na 16-bitową jakość kolorów, wszystkie przeglądarki wskazują 5-bitową głębię koloru (color: 5).

Paleta kolorów

medium and (color-index)
medium and (color-index: kolory)
medium and (min-color-index: kolory)
medium and (max-color-index: kolory)

Medium to typ lub grupa mediów (visual). Jako kolory należy podać wymaganą liczbę barw w palecie kolorów urządzenia.

Cecha ta nie jest, jak być może ktoś się spodziewał, prostszym sposobem na określenie tej samej wartości co cecha medium color. Dotyczy ona wyłącznie urządzeń, które mają ściśle określoną paletę kolorów. Na przykład dawne monitory nie potrafiły wyświetlić dowolnego koloru, a tylko barwy z tzw. palety bezpiecznej. Oznaczało to, że nawet jeśli podany na stronie kolor był bardzo zbliżony do barwy umieszczonej w palecie takiego monitora, nie został on wcale wyświetlony. Tym właśnie różnią się urządzenia ze stałą paletą kolorów od typowej dzisiaj głębi koloru. Ekran z 4-bitową głębią koloru wyświetla barwy poza jego zasięgiem jako ich przybliżenie, a nie zupełny brak koloru.

Zastosowanie cechy color-index bez podania wartości, dopasuje każde urządzenie, które posiada wpisaną na stałe paletę kolorów.

Współczesne monitory komputerowe nie powinny zostać dopasowane zapytaniem mediów color-index. Niestety w Operze 11.5 dopasowanie następuje.

Urządzenia monochromatyczne

medium and (monochrome)
medium and (monochrome: głębia)
medium and (min-monochrome: głębia)
medium and (max-monochrome: głębia)

Medium to typ lub grupa mediów (visual). Głębia oznacza liczbę bitów skali szarości (np. 8).

Działa analogicznie jak cecha medium color, ale dopasowuje wyłącznie urządzenia monochromatyczne.

Rozdzielczość

medium and (resolution: rozdzielczość)
medium and (min-resolution: rozdzielczość)
medium and (max-resolution: rozdzielczość)

Medium to typ lub grupa mediów (bitmap). Rozdzielczość określa gęstość pikseli w jednostce "dpi" (ang. dots per inch - plamki na cal) lub "dpcm" (ang. dots per centimeter - plamki na centymetr).

Dotyczy wyłącznie grupy mediów "bitmap". Doskonale nadaje się do ustalania specjalnego wyglądu strony w zależności od jakości wydruku. Na przykład na wydrukach o mniejszej rozdzielczości możemy pomijać niewielkie detale strony (ponieważ i tak prawdopodobnie byłyby niewidoczne) albo je powiększyć.

Technika wyświetlania

medium and (scan: skanowanie)

Medium to typ mediów tv. Skanowanie może przyjąć wartość:

progressive: skanowanie progresywne - całymi klatkami
interlace: przeplot - naprzemiennie linie parzyste, a potem nieparzyste

W telewizorach kineskopowych stosowano wyświetlanie z przeplotem. Oznaczało to, że obraz był rysowany poczynając od góry bardzo wąskimi liniami, biegnącymi poziomo od lewej do prawej krawędzi ekranu. Ponieważ dawne telewizory nie posiadały możliwości szybkiego wyświetlania tych linii, po zakończeniu rysowania ostatniej, pierwsza już była blada, co w efekcie mogłoby wywoływać efekt falującego z góry do dołu migotania jasności obrazu. Dlatego właśnie wymyślono wyświetlanie z przeplotem - najpierw wyświetlano tylko parzyste linie, a potem wracano na górę ekranu i wyświetlano nieparzyste. Taka technika znacząco zmniejszała migotanie obrazu w telewizorach starszych typów.

Ponieważ skanowanie progresywne jest używane w telewizji wysokiej rozdzielczości, cecha medium scan pozwala rozróżnić, czy strona jest transmitowana w standardzie SDTV (zawsze z przeplotem), HDTV z przeplotem (1080i) lub HTDV bez przeplotu (720p oraz 1080p).

Siatka

medium and (grid)

Medium to typ lub grupa mediów (visual, tactile).

Pozwala rozróżnić, czy urządzenie posługuje się siatką o stałej szerokości znaku. Może to mieć miejsce w prostych terminalach i telefonach komórkowych starego typu, gdzie cały tekst był wyświetlany jedną czcionką o stałej wysokości. Ma to miejsce również w przypadku urządzeń do czytania braillem oraz drukarek tego typu - używanych przez osoby niewidome.

Przykład @media

Zobacz przykładowe zapytania mediów na swoim urządzeniu

Przeglądarki

❌ Nie działa
	Chrome	Firefox	Edge	Opera	Safari
`@media`	1 2008-12-11	1 2004-11-09	12 2015-07-29	9.2 2007-04-11	3 2007-10-26
`@media (aspect-ratio)`	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10 2009-09-01	5 2010-06-07
`@media (color)`	1 2008-12-11	2 2006-10-24	12 2015-07-29	10 2009-09-01	3 2007-10-26
`@media (color-index)`	29 2013-08-20	❌	79 2020-01-15	16 2013-08-27	8 2014-10-16
`@media (device-aspect-ratio)`	1 2008-12-11	2 2006-10-24	12 2015-07-29	10 2009-09-01	3 2007-10-26
`@media (device-height)`	1 2008-12-11	2 2006-10-24	12 2015-07-29	10 2009-09-01	3 2007-10-26
`@media (device-width)`	1 2008-12-11	2 2006-10-24	12 2015-07-29	10 2009-09-01	3 2007-10-26
`@media (grid)`	1 2008-12-11	2 2006-10-24	12 2015-07-29	10 2009-09-01	3 2007-10-26
`@media (height)`	1 2008-12-11	2 2006-10-24	12 2015-07-29	10 2009-09-01	3 2007-10-26
`@media (monochrome)`	1 2008-12-11	2 2006-10-24	79 2020-01-15	10 2009-09-01	3 2007-10-26
`@media (orientation)`	3 2009-09-15	2 2006-10-24	12 2015-07-29	10.6 2010-07-01	5 2010-06-07
`@media (resolution)`	29 2013-08-20	8 2011-11-08	12 2015-07-29	16 2013-08-27	16 2022-09-12
`@media (width)`	1 2008-12-11	2 2006-10-24	12 2015-07-29	10 2009-09-01	3 2007-10-26