Media

W tym rozdziale dowiesz się...

Wstęp

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

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

  1. Podanie medium docelowego w arkuszu stylów, korzystając z polecenia @media lub @import:
    @import url(glos.css) aural;
    @media print {
    	/* Arkusz dla wydruku */
    }
  2. Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu LINK precyzujący włączenie zewnętrznego arkusza stylów):
    <!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.

Typy mediów

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

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