Bezsensowne wypociny Michasia

Zaletą przeglądarek graficznych jest możliwość dowolnego doboru wielkości i kroju liter. Webmasterzy bardzo chętnie z tego korzystają. Problem w tym, że zazwyczaj stosują zbyt małe literki. Na szczęście wiekszość przeglądarek potrafi powiększyć tekst. Niestety tutaj pojawiają się poważne problemy.

Zacznijmy od tego, w jaki sposób można określić wielkość tekstu. Zasadniczo są trzy metody.

Część osób cały tekst określa w pikselach. Zazwyczaj te osoby są krytykowane za brak znajomości poprawnych technik tworzenia stron www. Najczęściej za poprawne uważa się określanie wszystkich liter w jednostkach względnych albo opisowych. To jednak też jest błąd. Wielkość liter powinno się określać z uwzględnieniem obiektów, które ów tekst otaczają.

Jeśli tekst jest ściśle związany z bitmapą, trzeba go określić w jednostkach typowych dla bitmapy, czyli pikselach. Jeśli zaś tekst jest umieszczony w takim miejscu, że można swobodnie decydować o jego rozmiarze, wypadałoby pozwolić użytkownikowi swobodnie decydować o jego wielkości, więc zastosować jednostki opisowe albo względne.

Przeglądarki Firefox i Konqueror powiększają tekst niezależnie od jednostek, w jakich został określony. Przy okazji powiększają wszystko, co zostało określone w jednostkach relatywnych. Dzięki temu część stron, w których webmasterzy ustawili cały tekst w px, mogą zostać powiększone. Niestety strony, gdzie tekst jest bardzo uzależniony od grafiki, będą się sypały.

Zoom w przeglądarce Microsoft Internet Explorer nie powiększa tekstu określonego w px, więc nie działa na większości stron. Jednak nawet na poprawnie napisanych stronach działa w dość ograniczonym zakresie i oferuje maksymalnie czterokrotne powiększenie. Nie powoduje za to problemów na stronach, gdzie teskst jest uzależniony mocno od bitmap, przy założeniu, że został określony w px. Spotkałem się niestety ze stronami, gdzie taki tekst określono (chyba) w em, więc sypał się we wszystkich znanych mi przeglądarkach.

Operę zostawiłem na koniec. Przeglądarka ta została wyposażona w zoom, który powiększa wszystko, łącznie z bitmapami. Oczywiście takie zoomowane bitmapy tracą bardzo wiele na jakości, ale za to układ strony zostaje zachowany. I tutaj ciekawostka, Opera posiada też dodatkowy zoom, działający analogicznie jak ten w przeglądarce Microsoftu. Niestety działa on automatycznie, to znaczy bazuje na ustawieniach systemu operacyjnego, i nie potrafię go wyłączyć. Sprawdzałem na Windows 98 i Windows XP SP2. Z tego powodu układ kilku stron się sypał i nie dało się tego poprawić.

Tak dużo się pisze o tym, że tabele powinny służyć tylko do danych tabelarycznych. Zgadzam się z tym. Doszedłem jednak do nieoczekiwanego wniosku, że formularze to przykład danych tabelarycznych.

Przejdźmy do konkretów. Przykładowy formularz składa się z:
- bloku, w którym jest umieszczona jego treść
- par właściwych pól formularza i ich opisów
- właściwych pól formularza
- opisów właściwych pól formularza

Czyli mamy wszystko, co jest potrzebne do zbudowania tabeli css. Teoretycznie. W praktyce bowiem pojawiają się problemy.

Pierwszy problem nazywa się Microsoft Internet Explorer i jego 80% udziału w rynku. Jest to dostateczny powód, aby nie stosować tabel css. Można się nad nim długo rozwodzić. Nie jest to jednak jedyny problem. Drugi to bardzo słaba obsługa formularzy przez CSS.

Może teraz krótkie porównanie. Co trzeba zrobić, aby uzyskać napis w czerwonym kwadracie? Są to 3-4 instrukcje CSS: dwie na określenie wymiarów kwadratu, jedna na określenie jego koloru i w razie potrzeby jedna na określenie, że jest to element blokowy. A co trzeba zrobić, aby uzyskać stosowne pole tekstowe w czerwonym kwadracie? Umieszcza się owe pole w dodatkowym elemencie xhtml, który jest stylizowany na czerwony kwadrat.

Niestety przez tyle lat nikt nie wymyślił, spójnej metody na stylizowanie elementów formularzy. Ich stylizowanie sprawia tak dużo problemów, że często najlepiej jest je zostawić w domyślnych ustawieniach. Jakby ktoś ustandaryzował stylizowanie formularzy, miałby problem ze wszystkimi przeglądarkami na rynku. Duże nadzieje wiążę więc z xform.

Teraz pora wrócić do naszych obecnych formularzy. Skoro trzeba zastosować dodatkowe elementy, a przeglądarka Microsoftu ma duże problemy z obsługą niezbędnych styli, najlogiczniejszym rozwiązaniem byłoby zastosowanie zwykłych tabel. Mamy w nich elementy table, tr, th i td, czyli wszystko, co jest nam potrzebne. Nawet nie treba dopisywać dodatkowych klas, w końcu normalne tabele nie znajdują się w elemencie form.

Oczywiście znaczna część formularzy nie wymaga stosowania tabel. Ale skoro tabele pokrywają sie z podziałem logicznym, można będzie je przy pomocy css odpowiednio przerobić. Aczkolwiek jeszcze nie badałem tego zagadnienia. W każdym razie uznałem, że stosowanie tabel w formularzach jest uzasadnione.

Postawiłem sobie dość ciekawe zadanie. Zrobić układ oparty na 3 kolumnach, który dobrze by się sprawował przy różnych rozdzielczościach i niedopracowaniach przeglądarek. Po długim szukaniu, myśleniu i takich tam, zdecydowałem się na zabawę z float. Dzięki temu, jeśli zaistnieje taka potrzeba, układ zrobi się 2, albo nawet 1 kolumnowy. Ale jak ma się to do wspomnianego tła?

Zgodnie z założeniami po lewej stronie miała być kolumna, która wraz z nagłówkiem tworzyłaby wspólny motyw kolorystyczny, który odróżniałby się od pozostałej części strony. Tutaj pojawiły się problemy.

Nie mogłem sprawić, aby float sięgał do samego dna strony, a chciałem nadać kolumnie odpowiedni kolor i obramowanie. Rozwiązaniem okazało się przypisanie odpowiednio spreparowanego tła dla elementu html. Wszystko sprawuje się dobrze, mam jednak pewną wątpliwość. To jest tło nie dla całej strony, a dla jednej kolumny. Powinienem więc nadać je tej kolumnie. Z drugiej jednak perspektywy, tam gdzie treść w lewej kolumnie się kończy, zaczyna się element graficzny, który ozdabia całą stronę.

Przy okazji zauważyłem jedną ciekawą rzecz. Możliwość stosowania wielu teł jest we wczesnej fazie implementacji, czyli nie można jej stosować na masową skalę. W tym jednak przypadku, mogłe nałożyć na lewą kolumnę dodatkowy obrazek i ozdobić miejsce, gdzie się łączy z nagłówkiem, przy pomocy dodatkowego tła (bez repeat).

Nagłówek okazał się kolejnym problemem. Niestety miał'width na całą szerokość strony, a ja chciałem aby był obramowaniem oddzielony od całej treści strony za wyjątkiem lewej kolumny. Tutaj pomocne okazało się pozycjonowania relatywne. Dodałem mu ramkę o szerokości 3px na dole i o tyle samo ruszyłem do góry lewą kolumnę. Dzięki temu zasłoniła ramkę.

Co nieoczekiwane, dziala poprawnie w MSIE.