wtorek, 2021-02-16

Typy mediów

W CSS2 wprowadzono możliwość odrębnego określania wyglądu dokumentu dla różnych urządzeń docelowych. Odpowiadają za to typy mediów:

• all – wszystkie urządzenia;
• braille – urządzenia brailla;
• embossed – drukarki brailla;
• handheld – urządzenia kieszonkowe z małym ekranem;
• print – wydruki;
• projection – prezentacja np. za pomocą projektora;
• screen – kolorowy ekran komputerowy;
• speech – czytniki ekranu (speech zastąpił typ aural);
• tty – urządzenia stosujące stałą szerokość znaków, np. dalekopisy;
• tv – odbiorniki telewizyjne.

Z różnych względów większość z powyższych typów mediów została uznana za przestarzałe i obecnie zalecane są tylko cztery: all, projection, screen, speech. Istnieją własności CSS, których stosowanie ma sens tylko w przypadku niektórych mediów, np. specyficzne dla wydruków. Możliwości dostosowania dokumentu do specyfiki urządzeń zostały dodatkowo zwiększone dzięki wprowadzeniu zapytań medialnych.

Dostępnych jest kilka sposobów dołączania arkuszy stylów dla różnych typów mediów. Jedną z możliwości są style osadzone i polecenie @media.

<style>
  p {
  	color: blue;
  }
  @media print {
  	p {
  	  color: black;
  	  font-size: 10pt;
  	}
  }
  @media screen, print {
  	p {
  	  font-weight: bold;
  	}
  }
</style>

Pierwsza deklaracja stylu dla akapitu domyślnie obowiązuje we wszystkich mediach, ponieważ znajduje się poza obrębem instrukcji @media. Następnie za pomocą instrukcji @media print zdefiniowano style tylko dla wydruków, m.in. zmianie uległ kolor. Jak widać później, jedna instrukcja @media może dotyczyć kilku rodzajów mediów (@media screen, projection), ich nazwy oddzielane są przecinkami.

Dokładnie ten sam efekt można uzyskać dzięki zastosowaniu atrybutu media znacznika <style>.

<style>
p {
	color: black;
}
</style>

<style media="print">
p {
	color: blue;
	font-size: 10pt;
}
</style>

<style media="screen,print">
p {
  	font-weight: bold;
}
</style>

Arkusze stylów przeznaczone dla różnych typów mediów można importować.

<style>
  p{
  	color: black;
  }
</style>
<style>
  @import url(print.css) print;
  @import url(screen-print.css) screen, print;
</style>

Plik print.css:

p {
	color: blue;
	font-size: 10pt;
}

Plik screen-print.css:

p {
  	font-weight: bold;
}

Ten sam efekt otrzymasz poprzez dołączenie zewnętrznych stylów arkuszy CSS za pomocą znacznika <link> z ustawionym odpowiednim atrybutem media. Brak atrybutu media oznacza media="all".

<link rel="stylesheet" href="all.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="screen-print.css" media="screen,print">

W przykładzie wykorzystano wcześniej prezentowane pliki print.css i screen-print.css oraz dodatkowy plik all.css. Zawartość pliku all.css:

p {
	color: black;
}

Deklaracje CSS dla różnych urządzeń docelowych można umieścić także w zewnętrznym pliku CSS, definiując je w podobny sposób jak w pierwszym przykładzie.