Apr 02 2008
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:
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:
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:
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 :)


Deweloperzy
Pisząc w gmailu uruchomionym w Prismie maile w języku polskim zawsze brakowało mi jednego… Jak zmusić Prisma do sprawdzania moich wypocin od strony ortograficznej.
Dzisiaj Bartek odkrył interesującą rzecz o której ani On ani ja wcześniej nie wiedzieliśmy. Być może i ktoś z Was również o tym nie wie, więc chętnie opowiemy :) Generalnie chodzi o to że… koty nie pływają pod wodą…