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