W projektach stron internetowych powinniśmy przygotować pliki CSS dla dwóch różnych typów mediów (screen, print). Pliki CSS dodajemy za pomocą elementu link, który umieszczamy w elemencie head (Listing 1).
Listing 1. Drukowanie strony HTML, CSS dołączamy za pomocą elementu link
...
<head>
...
<!-- CSS dla wszystkich urządzeń -->
<link href="/template.css" rel="stylesheet" type="text/css" />
<!—Dołączamy CSS do druku -->
<link href="/print.css" rel="stylesheet" type="text/css" media="print" />
...
</head>
...
Atrybut media najczęściej zawiera wartości:
- all – wartość domyślna, dla wszystkich urządzeń;
- print – plik CSS przygotowany dla drukarki (podgląd wydruku, druk);
- screen – plik CSS przygotowany dla ekranu komputera.
Podczas projektowania pliku CSS do druku, warto ustawić w pliku HTML, atrybut media na wartość all. Kiedy skończymy pracę nad plikiem, zamieniamy wartość na print. Oczywiście oryginalny plik dla ekranu należy w takim przypadku zakomentować.
Zapraszam do uruchomienia podglądu wydruku dla strony wiedzanaplus.pl (Chrome – z menu wybieramy Plik > Drukuj...).
Warto przeczytać: