Przejdź do treści

Media

Zapytania mediów

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

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" type="text/css" 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.

Internet Explorer 8 ani starsze wersje nie obsługują zapytań mediów, jednak zachowują się przy tym nieprawidłowo, jeśli chodzi o kompatybilność wsteczną. Zamiast zredukować zapytanie do pojedynczego medium, całkowicie pomijają wszystkie takie deklaracje.

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ść

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:

23*1 = 2 * 2 * 2 = 8
23*2 = 64
23*3 = 512
23*4 = 4 096
23*8 = 16 777 216
23*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.

Komentarze

Zobacz więcej komentarzy