CSS media=”__” i @media

Ot ciekawostka, choć przydatna.

Wszyscy wiedzą, że przy ładowaniu arkusza stylów można (a raczej “należy”) podać atrybut media=”all/screen/print/jeszcze_parę_innych”. Pewnie wiele osób, ale może już nie wszyscy, wiedzą że wewnątrz arkusza można też używać deklaracji “@media all/screen/print/itp”. Ciekawostką może być połączenie obu metod – np. mamy arkusz css do wydruków ukrywający nawigację, ale chcemy mieć popup’a z “podglądem” wydruku.

Robimy więc sobie dwa arkusze stylów, jeden standardowy, drugi do wydruku – ukrywający niepotrzebne elementy (nagłówek, nawigację, reklamy itp) lub czyszczący obrazki z tła. Do dokumentu dołączamy oba w sekcji , np:

<style type="text/css" src="style.css" media="all" />
<style type="text/css" src="print.css" media="print" />

Teraz bardzo prosto możemy wyświetlić coś, co można traktować jako prosty podgląd wydruku (bez podziału na strony, czy marginesów) – np. dodać do strony link do podglądu kierujący na obecną stronę plus parametr GET’em np ‘?preview=1′. Wystarczy sprawdzać ten parametr przy dodawaniu stylów i kiedy jest on ustawiony zmieniać “media” drugiego arkusza – np. w php:

<style type="text/css" src="style.css" media="all" />
<style type="text/css" src="style.css" media="<?php if(1==$_GET['preview']){echo 'all';}else{echo 'print';}?>" />

No dobra, mamy podgląd, to przydałoby się jeszcze móc od razu wydrukować co widzimy. Więc w stronę wrzucamy button “Drukuj” (‘onclick=”window.print();return false;”‘) z id=”PrintIt”, standardowo go ukrywamy (w pierwszym arkuszu css #PrintIt{display: none;}), a nasz arkusz css, który miał nam czyścić stronę z tego, co niepotrzebne do wydruku, tym razem powinien nam dodać tego buttona, ale tylko na podglądzie, a nie na samym wydruku. Więc wstukujemy do niego:

@media screen{
  #PrintIt{
    display: block; /*przykładowo, coś tam jeszcze, dowolne style*/
  }
}
@media print{
  #PrintIt{
    display: none;
  }
}

No i mamy jedną stronę, podstawowy podgląd wydruku, z dodatkowym buttonem do drukowania widocznym tylko na podglądzie, nie na “standardowej” stronie, czy samym wydruku :)