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.
Istnieją dwie drogi do określenia niezależności arkuszy stylów, a przez to przypisania różnym mediom odmiennych cech:
@media lub @import:@import url(glos.css) aural;
@media print {
/* Arkusz dla wydruku */
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <title>Odnośnik do medium docelowego</title> <link rel="Stylesheet" type="text/css" media="print, handheld" href="arkusz.css" /> </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.
Nazwy mediów są odbiciem urządzeń docelowych, dla których stosowne własności mają sens (CSS 2):
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):
| Typy mediów | Grupy mediów | |||
|---|---|---|---|---|
| continuous / paged | visual / aural / tactile | grid / bitmap | interactive / static | |
| aural | continuous | aural | - | + |
| braille | continuous | tactile | grid | + |
| emboss | paged | tactile | grid | + |
| handheld | + | visual | + | + |
| 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
(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 */
}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 (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:
medium and (width: szerokość) medium and (min-width: szerokość) medium and (max-width: szerokość)
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).
medium and (height: wysokość) medium and (min-height: wysokość) medium and (max-height: wysokość)
Dotyczy aktualnej wysokości wyświetlanej, a nie rozdzielczości ekranu.
medium and (device-width: szerokość) medium and (min-device-width: szerokość) medium and (max-device-width: szerokość)
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) { /* ... */ }medium and (device-height: wysokość) medium and (min-device-height: wysokość) medium and (max-device-height: wysokość)
Dotyczy rozdzielczości ekranu, a nie aktualnej wysokości wyświetlanej.
medium and (orientation: orientacja)
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".
medium and (aspect-ratio: proporcje) medium and (min-aspect-ratio: proporcje) medium and (max-aspect-ratio: proporcje)
Dotyczy wyłącznie grupy mediów "bitmap". Proporcje są wyrażone wprost stosunkiem wartości cech: width/height.
medium and (device-aspect-ratio: proporcje) medium and (min-device-aspect-ratio: proporcje) medium and (max-device-aspect-ratio: proporcje)
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).
medium and (color) medium and (color: głębia) medium and (min-color: głębia) medium and (max-color: głębia)
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:
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).
medium and (color-index) medium and (color-index: kolory) medium and (min-color-index: kolory) medium and (max-color-index: kolory)
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.
medium and (monochrome) medium and (monochrome: głębia) medium and (min-monochrome: głębia) medium and (max-monochrome: głębia)
Działa analogicznie jak cecha medium color, ale dopasowuje wyłącznie urządzenia monochromatyczne.
medium and (resolution: rozdzielczość) medium and (min-resolution: rozdzielczość) medium and (max-resolution: rozdzielczość)
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ć.
medium and (scan: skanowanie)
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).
medium and (grid)
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.