Typy mediów w CSS3

Wstęp

Typy mediów (ang. Media types)

Określają, jak dokument jest przedstawiany na różnych nośnikach: ekranie, papierze itp. W CSS3 dodatkowo możemy zdefiniować warunki np. orientacje, szerokość (w tym maksymalną lub minimalną).

Reguły i atrybut media

	opis
@media Media types { }	Reguła definiuje style CSS
@import URL | url() Media types	Reguła importuje style CSS
<link; source; style media="Media types" src...	Atrybut łączy plik styli CSS

Typy mediów

Typ	Opis
all	Dla wszystkich urządzeń.
braille	Dla dotykowych urządzeń (sprzężenia zwrotnego) Braille'a.
embossed	Dla stronicowych drukarek Braille'a.
handheld	Dla urządzeń kieszonkowych
print	Dla materiałów i dokumentów przeglądanych na ekranie w trybie podglądu wydruku.
projection	Dla prezentacji prezentowanych np. za pomocą rzutników.
screen	Przede wszystkim dla kolorowych monitorów komputerowych.
speech	Dla syntezatorów mowy.
tty	Dla mediów używających stałej siatki znaków.
tv	Dla odbiorników telewizyjnych

Uwagi:

Typy mediów w liście odzielamy przecinkami.

Plik styl.css zawiera kod:

h1 {color: silver;}

Grupy i typy mediów

Grupy mediów

Grupa	Opis
I	ciągłe/stronicowane
II	wizualne/dźwiękowe/mowa/dotykowe
III	siatka/bitmapa
IV	interaktywne/statyczne

Zależności między grupami mediów a typami mediów

Zależność	Grupy
Typy	I	II	III	IV
braille	ciągłe	dotykowe	siatka	oba
embossed	stronicowane	dotykowe	siatka	statyczne
handheld	oba	wizualne. dźwiękowe, mowa	oba	oba
print	stronicowane	wizualne	bitmapowe	statyczne
projection	stronicowane	wizualne	bitmapowe	interaktywne
screen	ciągłe	wizualne, audio	bitmapowe	oba
speech	ciągłe	mowa	nie dotyczy	oba
tty	ciągłe	wizualne	siatka	oba
tv	oba	wizualne, audio	bitmapowe	oba

Składnia zapytań

Operatory logiczne

Operator	Opis
,	separator oraz logiczne lub
and	logiczne i
not	logiczne nie
only	tylko

Cechy mediów

Cechy mediów

Prefiks, cecha, wartość	Opis
([min-|max-]width:length)	szerokość
([min-|max-]height:length)	wysokość
([min-|max-]device-width:length)	szerokość ekranu
([min-|max-]device-height:length)	wysokość ekranu
(orientation:[portrait | landscape])	orientacja pionowa lub pozioma
([min-|max-]aspect-ratio:ratio)	proporcje strony
([min-|max-]device-aspect-ratio:ratio)	proporcje ekranu
([min-|max-]color:integer)	kolor
([min-|max-]color-index:integer)	ilość kolorów
([min-|max-]monochrome:integer)	monochromatyczny
([min-|max-]resolution:resolution)	rozdzielczość
(scan: [progressive | interlace])	skanowanie (dotyczy TV)
(grid:integer)	siatka

Wartości i jednostki

Wartości i jednostki cech mediów

Wartość	Opis
length	liczba z jednostką
portrait	orientacja pionowa
landscape	orientacja pozioma
ratio	ułamek (proporcja) z symbolem "/"*
integer	liczba całkowita
resolution	liczba z jednostką rozdzielczości (dpi|dpcm)*
progressive	progresywny
interlace	z przeplotem

Uwagi:

Skrót RWD (ang. Responsive Web Design) określa techniki tworzenia stron internetowych, których układ automatycznie dostosowuje do rozdzielczości ekranu. Nie jest to termin normatywny.