Zadaniem webmastera jest zadbanie o to, by jego strona wyglądała zawsze tak samo we wszystkich przeglądarkach Tu pojawia się problem, bo nie każda przeglądarka wyświetla stronę identycznie. Zobaczmy, jak pogodzić sprzeczności
Kilka dni, tygodni czy miesięcy spędzonych na przygotowaniu strony nie gwarantuje, że jest ona wystarczająco dobra. Problem pojawia się, gdy odwiedzający stronę lub klienci stwierdzą jej nieprawidłowe działanie w którejś z przeglądarek. Problem może dotyczyć różnych spraw. Najczęściej różnice między Firefoksem a Internet Explorerem polegają na tym, że odległości, które miały być te same, są różne, np. odległość między logo a menu nawigacyjnym. Jak sobie z tym poradzić?
Witryny, które prawidłowo są wyświetlane we wszystkich przeglądarkach powinny mieć przejrzysty wygląd i być łatwe w nawigacji, mieć zgodny ze standardem kod HTML oraz styl CSS i wykorzystywać dozwolone sposoby, by spełnić wymagania każdej z przeglądarek.
Problem kompatybilności
Aby mieć pewność, że strona będzie prawidłowo działać powinniśmy zainstalować jedną z trzech przeglądarek: Microsoft Internet Explorer 6.0, Mozilla Firefox 1.5 lub Opera 8.5.
Tylko najnowsze wersje przeglądarek dają 90% pewności, że nie będzie znaczących problemów z działaniem strony. Każdy z podanych programów wykorzystuje nieco inne definicje standardu CSS.
CSS, z którego korzystamy, to deklaracja w wersji 2.0. Istnieją przeglądarki, które obsługują CSS w wersji 1.0, są też takie, które nie obsługują CSS wcale: Internet Explorer <2.0, Netscape Navigator <3.0, Opera <3.5.
Gruntowne testy
Możemy przetestować tworzoną stronę na większej liczbie przeglądarek. Ponieważ różnice w interpretowaniu stylów pomiędzy Internet Explorerem 5 a 6 są znaczące, dobrze byłoby obie przeglądarki zainstalować w jednym systemie operacyjnym. Niestety, Windows nie pozwala na instalacje więcej niż jednej przeglądarki Microsoftu naraz.
Jest jednak sposób na rozwiązanie tego problemu. Pod adresem http://browsers.evolt.org znajdziemy witrynę-archiwum z wszystkimi wersjami i rodzajami przeglądarek, jakie kiedykolwiek pojawiły się na rynku. To doskonała okazja, by przetestować witrynę na różnych wersjach oprogramowania. Szczególną uwagę warto zwrócić na część witryny mieszczącą się pod adresem http://browsers.evolt.org/?ie/32bit/standalone. Już sama nazwa w URL sugeruje, że będziemy mieć do czynienia z 32-bitową wersją Internet Explorera, która będzie mogła został uruchomiona samodzielnie, to znaczy bez instalacji. Nasza uwaga powinna być skierowana na IE w wersji 5.0. Co prawda przeglądarki w ten sposób uruchamiane lubią się zawieszać, lecz nie powinno to znacząco utrudnić testowania witryny w różnych konfiguracjach.
Jak pisać style
W jaki sposób pisać kod strony (HTML i CSS), by było łatwiej? Jest kilka sposobów:
1. Tworzymy stronę, opierając się na jej wyglądzie w Internet Explorerze. Gdy witryna jest gotowa, uruchamiamy inne przeglądarki, głównie Firefox, i dokonujemy poprawek.
2. Tworzymy stronę w oparciu o to, co pojawia się w Firefoksie. Jest to przeglądarka, która bardzo ściśle traktuje wszystkie postanowienia standardu CSS. Problem z Internet Explorerem polega głównie na tym, że Microsoft chce tworzyć własne standardy w obrębie już istniejących. Musimy się więc dostosować do obu standardów (Opera działa w zbliżony sposób do Firefoksa).
3. Tworzymy i testujemy witrynę na wszystkich trzech przeglądarkach. Niestety, jest to czasochłonne.
Przełącznik stylów
Zobaczmy, jak na stronie Firefoksa rozwiązano kwestię manualnej zmiany wielkości czcionki. Pod menu z lewej strony są trzy odnośniki dla rozmiarów czcionek – małej, dużej i normalnej. Skrypt JavaScript ładuje jeden z trzech dostępnych arkuszy stylów CSS (w zależności od wybranej opcji), by zapewnić użytkownikowi poprawne wyświetlenie powiększonych bądź pomniejszonych czcionek.
Nie wszyscy o tej opcji wiedzą, a ponadto nie działa ona na tych stronach, gdzie rozmiar czcionek w stylach CSS został podany w nieskalowalnych jednostkach (np. określono go w pikselach). Ponadto IE, jako jedna z niewielu przeglądarek, nie pozwala na wybór preferowanego przez użytkownika stylu. Skrypt JavaScript służący do realizacji takiego mechanizmu znajdziemy pod adresem: http://www.alistapart.com/articles/alternate/.
Styl w zależności od przeglądarki
Opierając się na podobnej zasadzie, możemy stworzyć kilka plików ze stylami, które będą się ładować w zależności od przeglądarki, z której korzysta użytkownik. Możemy stworzyć explorer.css, inne.css i wczytywać je za pomocą JavaScriptu lub specjalnie przygotowanego skryptu działającego po stronie serwera.
W PHP (język skryptowy wykorzystywany do kompleksowego generowania witryn internetowych, tzw. dynamicznych witryn) można to zrobić bardzo prosto. Wystarczy, że instrukcją warunkową sprawdzimy, czy odpowiednia zmienna serwera zawiera deklarację Internet Explorera. W zależności od wyniku, stronie przypisujemy odpowiedni styl. Przykładową implementację umieszczamy pomiędzy znacznikami HEAD w dokumencie HTML, który jest interpretowany przez PHP:
\';
?>
Najpopularniejsza pułapka
Tworząc strony WWW zastanawiamy się nad końcowym rezultatem. Chcemy stworzyć \”pudełko\” – element div o szerokości 200 pikseli, marginesie wewnętrznym 10 pikseli i okalającej go ramce w kolorze czarnym o szerokości 4 pikseli. Do naszego pudełka, które oznaczamy klasą box, wstawiamy przykładowy tekst. Kod HTML wygląda więc następująco:
przyklad 1
Lorem ipsum dolor sit amet[..]
Do kodu przydałby się również styl:
.box { width: 200px; padding: 10px; border: 4px solid black; }
Firefox wyświetlił to, czego sobie zażyczyli¶my, ale Internet Explorer nie pokazuje ramki 200 px. Przyczyny tego problemu nie należy szukać w stylu, on jest poprawny. Brakuje jednak deklaracji typu dokumentu (DTD). Wstawmy więc taką deklarację na początek naszego pliku HTML:
Dlaczego? Otóż Internet Explorer 6.0, w którym ta strona została wyświetlona, ma dwa tryby interpretacji dokumentów CSS. Jest to tryb aktualny, czyli implementujący wszystkie założenia CSS 2, i tryb Quirks, który uruchamia się wówczas, gdy IE \”nie ma pewności\”, że dany dokument jest utworzony w aktualnie obowiązującym standardzie i włącza emulację starszych wersji przeglądarki.
Dlatego też tak ważne jest deklarowanie typu dokumentu. W starej implementacji owe 200 pikseli to szerokość ramki włącznie z obramowaniem i marginesami wewnętrznymi i zewnętrznymi.
Zauważmy, że jeśli przed deklaracją typu umieścimy pustą linię lub deklarację:
znów wpadniemy do trybu Quirks.
Problem kompatybilności
Każda przeglądarka w inny sposób implementuje założenia standardu CSS. Aby rozwiązać problem, musimy stosować różnego rodzaju kruczki. Na czym one polegają?
Utworzony styl CSS dla Internet Explorera sprawia, że w tej przeglądarce wszystko działa bez zarzutu. Gdy jednak zauważamy pewne różnice w Firefoksie, pragniemy je czym prędzej zniwelować. Szybko okazuje się to niemożliwe, bo zmiana na korzyść jednej przeglądarki pogarsza sytuację w drugiej. Aby temu zapobiec wielu projektantów posługuje się ukrywaniem kodu CSS przed wybraną przeglądarką.
W praktyce wygląda to tak, że wykorzystuje się błędy interpretacji stylów CSS i publikując jakiś określony fragment kodu sprawia, że przeglądarka pomija dalszą deklarację stylu określającego np. wielkość czcionki, jej kolor lub marginesy. W ten sposób Firefox uważa, że dana odległość ma mieć 5 pikseli, podczas gdy Explorer sądzi, że 7. Efektem jest uzyskanie witryny wyglądającej identycznie w obydwu przeglądarkach.
Kolejnym zastosowaniem kruczków są różne wersje Internet Explorera. Zobaczmy więc, co pojawia się na ekranie Internet Explorera 5.0, gdy uruchomimy drugi przykład, który miał ponoć już działać prawidłowo.
Dwie dalej zaprezentowane sztuczki zostały opracowane i opublikowane przez Tanteka Çelika (http://www.tantek.com). Są powszechnie stosowane przez webmasterów z całego świata.
Sztuczka Voice-Family
Do rozwiązania powyższego problemu możemy wykorzystać sztuczkę z użyciem właściwości Voice-Family. Pamiętajmy, że tego typu sztuczki mogą nie współpracować z następnymi wersjami przeglądarek, wywołując błąd bądź nieprawidłowo wyświetlając stronę. Jeżeli użyjemy sztuczki, osadźmy odpowiedni komentarz, który w razie potrzeby pozwoli przypomnieć, w jakim celu dana sztuczka została użyta.
By uzyskać pożądany efekt, musimy znacznie rozszerzyć nasz dotychczasowy kod CSS:
.box {
padding: 10px;
border: 4px solid black;
width: 228px;
voice-family: \"\\"}\\"\";
voice-family: inherit;
width: 200px;
}
html>body .box {width: 200px;}
Zauważmy, że IE 5 (jak również IE 5.5), którego dotyczy problem, nie jest w stanie odczytać informacji umieszczonej pod sekcją:
voice-family: \"\\"}\\"\";
voice-family: inherit;
W tym miejscu interpreter się całkowicie gubi i omija całą deklarację. Nie jest też w stanie odczytać kodu:
html>body .box { width: 200px; }
Skąd wzięliśmy 228 pikseli? IE 5 tworzy ramkę, która ma 200 pikseli włącznie z obramowaniem i marginesami. Dodając do 200 pikseli 2 x 10 paddingu + 2 x 4 obramowania, otrzymujemy właśnie 228.
Filtr górnoprzepustowy
Kolejna sztuczka znajdzie zastosowanie wszędzie tam, gdzie istnieje konieczność ukrycia arkusza stylów przez starszymi przeglądarkami, niezdolnymi do jego poprawnego wyświetlenia (IE <5.5, Nestscape <4, IE dla Mac <4.5). W tym celu korzystamy z takiego zapisu:
Pierwsza linia @import pozwala zmylić wszystkie starsze przeglądarki, które nie przystąpią do załadowania dokumentu filtr.css. Nowe przeglądarki nie będą miały z tym najmniejszego problemu i sformatują dokument według opisanych w nim zasad..
Netscape 4
Przeglądarka Netscape Navigator 4 nie radzi sobie dobrze z obsługą formatowania formularzy i bardziej złożonymi stylami. Jeżeli zależy nam na poprawnej obsłudze gości korzystających z tej przeglądarki, możemy wyłączyć z analizowania wybrany plik stylów. Zamiast użyć:
skorzystajmy z:
Przy tej okazji warto skorzystać ze skryptu (przedstawionego powyżej), by poinformować użytkownika, że ta strona nie będzie poprawnie wyświetlana w jego przeglądarce.
Inne media
Netscape 4 nie \”rozumie\” stylów, w których zadeklarowany został typ medium inny niż screen:
Powyższa deklaracja nie zostanie odczytana przez NN 4. Ten sam efekt udaje się uzyskać, stosując kombinacje mediów:
