CSS/Typy media dokumentów

W czasach gdy powstawał standard CSS jedynym medium na jakim można było przeglądać strony był komputer (konkretniej ekran monitora). Obecnie możliwość przeglądania stron internetowych posiadają też inne urządzenia: telefony komórkowe, palmtopy, telewizory (poprzez różnego rodzaju WebBox'y), itp. wliczając w to również drukarki (wersje do druku stron internetowych) czy urządzenia przystosowane do obsługi przez osoby upośledzone jak np. drukarki brajlowskie, przeglądarki głosowe itd.

Każde z tych urządzeń wyświetla (w przypadku drukarki drukuje) tę samą stronę inaczej. Ponadto niektóre elementy strony spełniają dobrze swoją rolę na jednym urządzeniu, a na innym mogą przeszkadzać. Dobrym przykładem może być menu strony (choćby i te na wikibooks). Przeglądając stronę na ekranie komputera, menu umożliwia szybkie przejście do innych działów/sekcji witryny. Jednak na wydruku menu nie przydaje się do niczego (nie można na nie "kliknąć"), zaś na ekraniku telefonu czy palmtopa zajmuje zbyt dużo miejsca i spowalnia wyświetlanie strony.

Rozwiązaniem są właśnie typy media będące odpowiednikiem przestrzeni nazw znanym z języków programowania. Do każdego urządzenia przypisany jest inny typ media. Gdy urządzenie wyświetla (drukuje) stronę, stosuje style zdefiniowane wewnątrz własnego typu media, oraz te nie przypisane do żadnego typu.

Definiowanie typów media

Media można zdefiniować dwoma sposobami:

• Określając przestrzeń nazw w arkuszu:

  @media typ_media {
  	selektor {atrybut:wartość;}
  }
  

• Podczas importowania zewnętrznego arkusza:
  • Dyrektywą @import:

    @import url('arkusz.css') typ_media;
    

  • W atrybucie media przy importowaniu poprzez element link: <link href="arkusz.css" rel="stylesheet" type="text/css" media="typ_media" />

  Rodzaje urządzeń

  Wyróżnia się następujące przestrzenie nazw:

  • all - wszystkie urządzenia
  • print - drukarka
  • screen - kolorowy ekran
  • handheld - mały ekran (komputery typu palmtop, telefony komórkowe, itp.)
  • projection - projektory
  • speech - urządzenia głosowe
  • tv - telewizory (mało kolorów, ograniczona wielkość, dźwięk)
  • tty - przeglądarki tekstowe (podstawową jednostką miary jest znak, nie piksel)
  • embossed - drukarki brajlowskie (ograniczenia podobne do przeglądarek tekstowych, plus brak kolorów)