Serwisy typowo informacyjne, jak internetowe magazyny, duże portale czy sieciowe instrukcje obsługi są najczęściej drukowanymi stronami. Powinny oferować możliwość wydruku w wygodnej dla użytkownika formie, co oznacza, że powinny mieścić się w szerokości kartki i powiny marnować kartek jak najmniej. Stąd wszechobecne linki wersja do wydruku
na wspomnianych sajtach.
Z drugiej strony, nie ma nic bardziej irytującego niż trafienie z Googli na taką właśnie stronę do wydruku
, pozbawioną jakiejkolwiek nawigacji czy chociażby odnośnika do oryginału. Kontynuacja lektury czy poszukiwanie dalszych informacji stają się niemożliwe.
Również samo poszukiwanie przycisku odpowiadającego za wersję do wydruku jest często niewygodne, zwłaszcza, że webdesignerzy nagminnie wykazują się niezwykłą intuicją jeśli chodzi o dostępność i umieszczenie tej opcji.
Co by było, gdyby zupełnie z niej zrezygnować? Niewiele osób zdaje sobie z tego sprawę, ale jest to całkiem realne i niezwykle proste do realizacji. Wystarczy przygotować dodatkowy arkusz CSS i nadać mu odpowiedni atrybut media.
Można zrobić to na dwa sposoby. Pierwszy polega na podaniu atrybutu w elemencie <link/> już na etapie importu arkusza CSS:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Metoda ta ma tę zaletę, że wyraźnie rozdziela style przeznaczone do wydruku od tych przeznaczonych dla innych typów mediów. Druga metoda polega na zamknięciu reguł arkusza CSS przeznaczonych dla danego typu mediów w opisany blok:
@media print
{
/* tutaj reguly CSS */
}Regułki specyficzne dla medium wydruku powinny ukryć zbędne elementy nawigacyjne i nieistotne dekoracje graficzne, jak bannery czy grafiki tła. Tutaj potęgę swą pokazują layouty zbudowane w oparciu o czysty (X)HTML, gdzie sterowanie układem strony jest znacznie wygodniejsze niż w przypadku układów tabelkowych.
Jeśli boisz się, że użytkownicy nadal będą szukać wersji drukowalnej
, to zawsze możesz umieścić w serwisie dodatkowy (niezależny od arkusza dla wydruku) link wywołujący tę samą stronę ze zmienionym arkuszem ekranowym (media screen) CSS, a ponad to podłączyć odpowiednią akcję JS, co pozwoli na przełączanie arkuszy w locie (i tym samym zaoszczędzi użytkownikom pobierania plików). Jakąkolwiek wersję wybierzesz, zaoszczędzi to masę kodu po stronie serwera i zwiększy użyteczność strony.
Przykład tak skonstruowanego serwisu można oglądać na oficjalnej stronie PLD.