Wstęp do CSS - część czwarta

Typy mediów

CSS 2 pozwala na stworzenie różnych arkuszy dla różnych typów urządzeń, na których będzie przetwarzany dokument hipertekstowy powiązany z arkuszem. Możliwość zdefiniowania typu urządzenia jest bardzo przydatna podczas tworzenia dobrego dokumentu hipertekstowego. Nie jest wskazane, aby na wydruku pojawiło się zbyt wiele kolorowej grafiki, używanej na przykład do nawigacji.

W CSS 2 można wyróżnić następujące typy mediów:

Dlaczego to jest takie ważne?

Załóżmy, że prowadzisz stronę, na której umieszczasz bardzo ważne informacje i masz masę odwiedziń dzień po dniu. Wiele osób uważa, że Twoja strona jest godna zaufania i często drukują informacje zaczerpnięte z Twojej strony. Wiele osób w podróży czyta przy pomocy telefonu komórkowego Twoją stronę. Czy oni wszyscy powinni ściągać ten sam styl arkusz stylów? Czy arkusz stylów, w którym nagłówek jest odsunięty od lewego brzegu strony o 150 pikseli powinien być również załadowany w przeglądarce w telefonie komórkowym o rozdzielczości 150x100 pikseli? Stosując pojedynczy arkusz stylów utrudnia się bardzo czytanie i nawigację niektórym użytkownikom. Dlatego lepiej stworzyć oddzielne arkusze dla każdego (a przynajmniej wymaganego minimum) z urządzeń. Rozpatrzmy na przykład drukarkę. Teoretycznie przeglądarka wyśle do drukarki całą zawartość strony. Niektóre bloki można jednak ukryć w arkuszy dla drukarki przy pomocy własności display: none;. To mogą być bloki zawierające grafikę, menu nawigacyjne, banery itd. itp. Po prostu, najlepiej ukryć bloki, które nie są potrzebne na wydruku. Warto również pamiętać o ustawieniu koloru tekstu na czarny. Rzadko zdarza się, żeby na wydruku potrzebne były kolorowe nagłówki.

Jak to zastosować?

Jest kilka sposobów na wskazanie przeglądarce typu urządzenia, dla którego przeznaczony jest arkusz. Najłatwiej (i najlepiej) skorzystać z parametru media znacznika link:

<link rel="stylesheet" type="text/css" media="print" href="styl.css" />
<?xml-stylesheet type="text/css" href="styl.css" media="print" ?>

Jednak jeśli nie chcesz z jakiegoś powodu wykorzystać tego sposobu możesz użyć któregoś z poniższych:

/*W pliku CSS*/
@import url(glosno.css) aural;

/*W pliku CSS*/
@media print {
  body {
       color: black;
       margin: 0;
       line-height: 1.5em;
  }
}