Okiełznać style: obsługa mediów

Zdecydowana większość internautów korzysta z przeglądarek WWW. Są wśród nich tacy, którzy ulubione treści chcą wydrukować lub obejrzeć na urządzeniu przenośnym, np. nowoczesnym telefonie komórkowym. Standard CSS2 pozwala na przystosowanie strony do wymogów różnych mediów.

Postęp jaki się dokonał na rynku telekomunikacji w ostatniej dekadzie gwarantuje, że w najbliższych latach dostęp do internetu będzie możliwy w dowolnym miejscu na kuli ziemskiej. Oferta coraz nowocześniejszych telefonów komórkowych już dziś pozwala na serfowanie po sieci bez konieczności korzystania z ubogich stron WAP, które używają wciąż języka WML.

Coraz szybsze procesory w komórkach i coraz większe wyświetlacze LCD sprawiają, że znika ograniczenie technologiczne dotyczące rozdzielczości ekranu. Dlatego rolą webmastera w ciągu najbliższych lat będzie dotrzymanie tempa zmian i przystosowanie swojej witryny do takiej postaci, by możliwe było jej przeglądanie na urządzeniach przenośnych.

Problem projektowania polega jednak na tym, że każde urządzenie ma inne parametry użytkowe. Nie możemy z góry założyć minimalnej używanej rozdzielczości na 800 x 600 pikseli. Choć wydaje się to mało realne, to jednak możliwe jest stworzenie witryny, która będzie się dobrze prezentowała zarówno na monitorze komputerowym, na ekranie telefonu komórkowego, jak i na wydruku.

Arkusze stylów CSS już dziś oferują funkcjonalność, która pozwala powyższą kwestię obsługi różnych mediów rozwiązać z przyzwoitym rezultatem.

Obsługa mediów

Najpopularniejszym sposobem na dołączenie arkusza stylów do dokumentu XHTML jest skorzystanie z takiego kodu:

Wiąże on jednoznacznie dokument tekstowy z jego wystrojem graficznym – domyślnym arkuszem CSS. Gdy do powyższego kodu dodamy nową właściwość o nazwie media, możemy zróżnicować domyślnie ładowane arkusze w zależności od typu urządzenia na którym wyświetlana jest strona. Dla każdego z arkuszy stylów określamy media, w których może on być wykorzystywany w taki sposób:

lub w taki:

Jak łatwo zauważyć, jeden arkusz może być domyślnym stylem dla wielu urządzeń, zarówno ekranu komputera, telewizora, jak i ekranu projekcyjnego. Wykaz dostępnych rodzajów urządzeń zgromadzono w załączonej tabeli.

Zaprezentowana metoda nie jest oczywiście jedynym sposobem na dołączenie arkuszy alternatywnych. Jeżeli style rozpowszechniamy wewnątrz dokumentu XHTML, posiłkujemy się regułą @media:

Alternatywą dla reguły @media jest skorzystanie z właściwości media. To jednak wymusza każdorazowe otwieranie i zamykanie znacznika style, gdy mamy zamiar zmienić styl dla danego medium:

Zastosowanie może też znaleźć tu reguła @import. W tym przypadku korzystamy jednak z zewnętrznych arkuszy ładowanych bezpośrednio z kodu CSS:

Strona

Standard CSS pozwala definiować strony. Tworzy się je przy użyciu reguły @page, określając parametry: rozmiar, margines, przerwa, znak cięcia strony.

Przykład implementacji strony w formacie A4:

@page strona1 {
  size: 21cm 29.7cm;
  margin: 1in;
}

Strona a druk

Reguła @page i przynależące do niej właściwości umożliwiają określenie wielu dodatkowych parametrów druku. Przykładowe możliwości:

ustalanie marginesów drukowanych witryn WWW, na przykład tak, by nieparzyste strony miały większy lewy margines na oprawę, a parzyste – prawy,
możliwość ustawienia w dowolnym miejscu znaku końca strony, który wszystkie treści poniżej niego przenosi na kolejną, pustą stronę.

Takich opcji jest więcej. Lecz o ile mogą się one wydawać przydatne podczas czytania tego tekstu, to w praktyce bardzo rzadko się je stosuje. Jeżeli dostarczymy użytkownikowi arkusz, który spełni kilka podstawowych warunków (o których za chwilę), to stosowanie właściwości z serii page mija się z celem. Bardziej świadomy użytkownik, chcąc podzielić odpowiednio treść na stronie WWW, najpewniej zrobi to po swojemu, kopiując treść do ulubionego edytora tekstu i tam uzyskując pożądany efekt.

Wersja do druku

Problem wydruku witryn internetowych polega głównie na tym, że typowa strona WWW nie jest idealnie dopasowana do wymiarów kartki A4. Rozwiązaniem tego problemu jest przygotowanie specjalnej wersji strony, przeznaczonej do wydruku. Bardzo często zdarza się jednak, że choć taka wersja istnieje, to jednak w najmniejszym stopniu nie spełnia swojej funkcji.
Z czego powinna się składać dobra strona do wydruku:

1. Nagłówek

W górnej części dokumentu umieszczamy małe logo serwisu, odpowiednio duży tytuł artykułu oraz adres URL, pod którym dany artykuł można bez trudu odnaleźć.

2. Treść

Czcionka bezszeryfowa ma wiele zalet – bardzo dobrze prezentuje się na stronach WWW. Nie zmienia to jednak faktu, że treść drukowaną czyta się znacznie łatwiej, gdy zastosujemy czcionkę z szeryfami (np. popularny Times). Najlepszym dowodem na to jest prasa codzienna.

Kontrast odgrywa kluczową rolę przy czytaniu tekstu. Zastosujmy maksymalnie duży. Ponieważ medium jest tu biały arkusz papieru, tekst powinien być odpowiednio ciemny, by mógł być bez problemu przeczytany.

Rozmiar czcionki powinien być na tyle duży, by możliwe było jej odczytanie bez szkła powiększającego, a na tyle mały, by drukowany tekst nie zamienił się w grubą książkę. Najlepiej więc w granicach 10-12 pt.

Wszyscy użytkownicy drukarek stawiają na ekonomię zużycia tuszy. Jak wiadomo, najdroższe jest drukowanie w kolorze. Z tego względu warto zadbać, by tekst i wszystkie odnośniki publikować w kolorze czarnym. Warto też usunąć irytujące dodatki na stronie do druku, takie jak banery reklamowe i paski z odnośnikami. Użytkownik raczej nie zdecyduje się na ich wydruk. Każda przeglądarka umożliwia zaznaczenie tekstu do druku. Bez trudu można tym sposobem pominąć reklamę (publikowaną najczęściej w nagłówku dokumentu).

Nie eksperymentujmy z kolorem tła – powinno być białe. Przeglądarki internetowe i tak nie drukują kolorowego tła, ani żadnych zdjęć umieszczonych w tle. Jednak właśnie te elementy mogą skutecznie odstraszyć użytkowników od zamiaru drukowania, sugerując im, że na wydrukowanie strony zużyją ogromną ilość tuszu.

3. Stopka

Zawieramy w niej informację o autorze strony i prawach autorskich.

Tworzymy stronę do druku

Możemy rozróżnić dwa sposoby, które doprowadzą nas do stworzenia witryny do wydruku:

dla istniejącej strony WWW tworzymy alternatywny arkusz stylów, używany przez przeglądarkę podczas drukowania,
dla istniejącej strony WWW tworzymy dodatkowe podstrony prezentujące zubożony kod HTML i wzbogacamy je o zoptymalizowany pod kątem wydruków arkusz stylów.

Trudno jednoznacznie stwierdzić, który ze sposobów jest bardziej korzystny. Zależy to w głównej mierze od złożoności witryny. Dla programisty korzystniejszym podejściem może się okazać sposób drugi, bo choć wymaga włożenia nieco większej ilości pracy, to stwarza wyizolowaną grupę podstron serwisu zdatnych do druku. Z kolei pierwszy sposób przypadnie do gustu tym, którzy chcą operować tylko i wyłącznie na stylach CSS, bez żadnej znaczącej ingerencji w kod XHTML (najczęściej obudowany przez bardziej skomplikowane skrypty).

Bazując na przykładowej stronie WWW i korzystając z pierwszego sposobu, zabieramy się za sporządzenia dodatkowego arkusza przeznaczonego do wydruku.

Witryna bazowa

Strona, na której bazujemy w tym artykule została stworzona w oparciu o technologie XHTML i CSS. Nie korzysta z tabel. Pełny kod źródłowy udostępniamy na płycie CD dołączonej do magazynu. Tymczasem zarys źródła prezentuje się następująco:



[..]

Do standardowego arkusza stylu dołączamy dodatkowy, odznaczający się właściwością media = print, co oznacza, że zostanie zinterpretowany przez przeglądarkę przy podglądzie druku i/lub przy samym druku.


Okiełznać style: Wersja do druku

Menu
Strona główna
Kontakt
Kategorie
[..]

Główna część dokumentu składa się z:

nagłówka ({html}

{/html}),
menu (kontener div o id = menu),
treści (kontener div o id = main),


Co nowego?
Sed quis erat ut libero faucibus porta
In ut tellus vitae est fermentum porta.Więcej..
[..]

W kontenerze main umieszczono listę ostatnio dodanych aktualności. To nasza treść, którą użytkownik zechce wydrukować.

Arkusz stylów

Kod źródłowy XHTML jest czysty, tzn. brak tu jakichkolwiek elementów definiujących wygląd witryny. Nie umieszczono tu też żadnych tabel. To rodzaj wzorcowego kodu, który wzbogacony o arkusze stylów CSS stanowi przykład poprawnie wykonanej strony WWW. Kod CSS jest jednak zbyt rozległy, by publikować go w całości. Warto przy okazji tej strony zwrócić uwagę, jak rozwiązano jej układ. Występują tu dwa kontenery – menu oraz main. Pierwszy obejmuje zasięgiem cały pasek boczny, drugi – całą zawartość strony. Ulokowano je, stosując taki kod:

DIV#main { 
  position: absolute; 
  margin-left: 180px; 
} 
DIV#menu { 
  position: absolute; 
}

Ten sposób wymusza określenie odstępu treści od lewego brzegu ekranu. By ta metoda pozycjonowania elementów na stronie zdała egzamin, konieczne jest też określenie szerokości elementu menu.

Wracamy jednak do arkusza do druku. Kopiujemy styl style.css, nazywając jego kopię print.css. W ten sposób szybko zyskujemy szablon do nanoszenia poprawek. Warto dodać, że wersja do druku korzysta w pierwszej kolejności ze stylów zdefiniowanych w style.css, a dopiero później sięga po print.css. Dlatego nie możemy przystąpić do ustalania stylów do druku od zera. Arkusz print.css służy zatem do nadpisywania reguł zawartych w dokumencie style.css, a nie do ich definiowania na nowo.

Nasze cele:

usunąć tło z nagłówka, zmienić kolor czcionki,
usunąć niepotrzebne menu boczne,
zmienić kolor tła na biały,
zmienić czcionki na szeryfowy Times,
zmienić rozmiar czcionek na proporcjonalny do strony.

Kolor tła ustalamy na przezroczysty (co w efekcie da biały), definiujemy domyślną czcionkę i określamy jej rozmiar. Warto korzystać tutaj z jednostek jakimi są punkty. Zostały one stworzone na potrzeby wydruku.

BODY { 
  background-color: transparent; 
  font-family: Times, serif; font-size: 12pt; 
}

CSS pozwala na schowanie pewnych elementów strony WWW bezpośrednio z poziomu arkusza. Usuwamy więc zbędne menu, posiłkując się właściwością display:

DIV#menu { 
  display: none; 
}

Nasza treść strony miała ramkę okalającą. Nie możemy usunąć tej właściwości z kodu, bowiem zostanie wówczas przejęta definicja ramki z arkusza style.css. Dlatego określamy zerową ramkę:

DIV#main { 
  margin: 0; 
  border: none; 
  width: auto; 
}

Wszystkie nagłówki występujące w dokumencie muszą mieć kolor czarny i proporcjonalną wielkość:

H2 { 
  font-size: 22pt; 
  color: black; 
  background-color: transparent; 
}
H4 { 
  font-size: 20pt; 
  font-weight: normal; 
  color: black; 
  padding: 0; 
  margin: 0; 
  padding-bottom: 15pt; 
}

Dodatkowe parametry, takie jak odstępy, marginesy i kolory tła muszą zostać przestawione do wartości zerowych. W innym przypadku zostaną użyte wartości ze stylu style.css.

Problemem, który uwidacznia się dopiero po wydrukowaniu strony jest brak odnośników. Jeżeli internauta wydrukuje artykuł, wszystkie odnośniki ukażą mu się w postaci podkreślonego tekstu. Istnieje w CSS metoda pozwalająca na wyświetlenie obok każdego odnośnika adresu URL na który wskazuje. Dokonuje się tego przy użyciu pseudoklasy Link:After i Visited:After i właściwości content. Niestety, ta metoda nie współpracuje z przeglądarką Microsoftu:

P A:Link:After, 
P A:Visited:After { 
  content: \" (http://mojastrona.pl/\" attr(href) \") \"; 
}
P.bottom A:Link:After, 
P.bottom A:Visited:After {
  content: \" (\" attr(href) \") \"; 
}

W ten oto sposób stworzyliśmy arkusz CSS do wydruku. Wydaje się, że jest to wersja wystarczająca, nie wymagająca nanoszenia już większych poprawek. Warto dodać, że arkusz będzie poprawnie działał na całej witrynie, umożliwiając wydruk dowolnej podstrony. To dodatkowy atut za tworzeniem nowoczesnych witryn w oparciu o CSS.

Obsługa urządzeń przenośnych

Wszystkie urządzenia przenośne (ang. handheld), do których zaliczamy telefony komórkowe i palmtopy, pochodzą od różnych producentów i dysponują różnymi możliwościami technicznymi. Ich zaletą jest niewątpliwie mobilność. Wraz z wypuszczaniem na rynek kolejnych modeli aparatów rodziły się standardy WAP 1.0, a później WAP 2.0.

Choć wciąż możliwe jest korzystanie z języka WML, używanego przez długi czas do tworzenia witryn WAP, to od jakiegoś czasu obserwujemy znaczny przyrost witryn tworzonych w oparciu o XHTML i CSS. Style CSS mogą zatem odgrywać kluczową rolę przy tworzeniu witryn na potrzeby handheldów. Niestety, w większości przypadków zadanie to jest co najmniej karkołomne. Każde urządzenie ma nieco inną rozdzielczość matrycy LCD. Można przyjąć, że jest to:

100-320 px szerokości w przypadku telefonów komórkowych,
320-640 px szerokości dla palmtopów.

Jest kilka wskazówek odnośnie projektowania witryn dla urządzeń przenośnych. Ta najważniejsza wydaje się oczywista. Użytkownicy nie tolerują witryn, które zmuszają ich do przewijania w poziomie. Przy projektowaniu należy się ponadto wystrzegać: skomplikowanego kodu źródłowego, dzielonych/składanych grafik, ramek, wyskakujących okienek, kodu JavaScript, dynamicznych efektów.

Podobnie jak przy tworzeniu dokumentów do wydruku, istotne jest zachowanie odpowiedniego kontrastu pomiędzy tłem a tekstem. Pozwoli to zapewnić odpowiednią widoczność tekstu w przypadku używania urządzenia w niekorzystnych warunkach oświetleniowych – ostrego słońca. Nie warto używać apletów Java i Flash, nawet gdyby nie było problemów z ich odtwarzaniem. Definitywnie nie wolno tworzyć witryn tylko w oparciu o te technologie.

Cechy dobrze zaprojektowanego kodu:

na wystrój witryny składa się tylko jedna kolumna,
od został maksymalnie uproszczony, lecz jest zgodny ze standardami,
wszystkie grafiki zawierają opis zastępczy (ALT), który dobrze opisuje zawartość obrazu.

Jak projektować

Z uwagi na ograniczenie do jednej kolumny oraz chęć zapewnienia przejrzystości strony, witryny tworzone dla handheldów najczęściej powstają jako oddzielne projekty. Dzięki temu łatwiej zaprojektować kod CSS, a i kod XHTML ma nieporównywalnie krótszą postać. Niewątpliwie jednak tworzenie dobrych, uniwersalnych witryn jest możliwe, czego najlepszym przykładem jest strona http://widgets.opera.com, będąca częścią projektu przeglądarki Opera.

Jak działają przeglądarki?

Wraz z pojawieniem się palmtopów producenci tradycyjnych przeglądarek internetowych zabrali się za miniaturyzację swoich aplikacji na potrzeby urządzeń przenośnych.

Programy zostały zaprojektowane tak, by wyświetlać wszystkie dostępne w sieci strony WWW. To jednak rodzi wiele problemów. Z większością stron przeznaczonych do wyświetlenia na dużych ekranach radzą sobie raczej z gorszym niż z lepszym skutkiem.

Warto wiedzieć, że przeglądarki, takie jak Opera dla urządzeń przenośnych inaczej traktują takie elementy jak: układy stron, obrazy, kolory, tabele, ramki, rozmiary czcionek, formatowanie.

Witryny wyświetlane w urządzeniach przenośnych publikuje się w postaci jednokolumnowej, stąd dochodzi do pewnych kompromisów na poziomie przeglądarki (tu przykład pracy Opery):

jeżeli strona składa się z wielu kolumn, przeglądarka zamieni ją na jedną, zgodnie z kolejnością – pierwszy wiersz, kolejne kolumny, drugi wiersz, kolejne kolumny itd.,
niektóre obrazy, które są zbyt duże w stosunku do wyświetlacza, są usuwane przez przeglądarkę, a pozostałe podlegają procesowi skalowania,
jeżeli obraz został podzielony na fragmenty i złożony przy użyciu kodu strony, nie zostanie wyświetlony poprawnie – w jednym momencie dopuszczalne jest wyświetlenie tylko jednego obrazu,
obrazki w tle nie są wyświetlane, a w ich miejsce wstawia się jasnoszare tło,
kolor tekstu zamieniany jest na czarny,
nie wszystkie wielkości czcionki będą wyświetlone – przeglądarka może je ograniczyć do kilku,
strony w ramkach mogą zostać wyświetlone poprawnie jako lista poszczególnych okien lub całkowicie bez ramek (zostanie aktywowana sekcja {html}