Browsers’ Issues #1
Filed Under (informatyka) by Tomek on 23-02-2010
Tytuł oczywiście dlatego, że po angielsku lepiej brzmi ;) Postanowiłem pisać tu o problemach z przeglądarkami (nie tylko IE, mimo tendencyjnej grafiki ;) ). Nie tylko o takich, o których wszędzie napisano już mnóstwo, ale o takich, które odkryłem sam, a także o tym, jak sobie z tymi problemami radzić.
Na pierwszy ogień pójdzie jednak tradycyjnie Internet Explorer zaczynając od szóstki, a na ósemce kończąc, a w kolejnym odcinku pojawi się test porównawczy pozycjonowania kwadratu o określonej szerokości (100px) na środku strony za pomocą trzech metod:
- jako tło strony z parametrem background-position:center;
- z wykorzystaniem position:absolute;left:50%;margin-left:-50px;
- z wykorzystaniem margin-left:auto;margin-right:auto;
Nie lubię PNG
Oczywiście ja bardzo je lubię i czynią one tworzenie stron dużo efektywniejszym. Niestety, nie lubi ich Microsoft i do dziś występują problemy z ich wyświetlaniem we wszystkich Internet Explorerach.
Aby zaprezentować problem, stworzyłem testową białą stronę, na której wyświetliłem kwadrat o rozmiarach 100×100px w kolorze #808080 (w założeniu) na cztery sposoby:
- png w kolorze czarnym (#000000) z 50% przeźroczystością (dodatkowo jego lewy górny róg ustawiłem na pełną przeźroczystość)
- png w kolorze #808080 bez przeźroczystości
- gif w kolorze #808080
- div z ustawionym kolorem tła na #808080
Nowoczesne przeglądarki
W nowoczesnych przeglądarkach (Firefox, Opera, Safari, Chrome – na takich testowałem) efekt jest przewidywalny: prostokąt 400×100px z pustym kwadratem 50×50px w lewym górnym rogu.
Internet Explorer 5 i 6
Na początek przykład najbardziej drastyczny. Wszystkie próby użycia przeźroczystości w plikach PNG oznaczane są niebieskim cieniem. Dodatkowo wszystkie pliki PNG (nawet te bez przeźroczystości) wyświetlane są odrobinę ciemniejsze niż powinny (w tym przypadku wyświetlany kolor to #757575 zamiast #808080). Z tego, co udało mi się znaleźć, związane jest to z błędem obsługi filtru gamma.
Jedynym sposobem na uzyskanie poprawnego wyglądu jest całkowita rezygnacja z PNG i zapisywanie wszystkich grafik w innych formatach.
Internet Explorer 7 i 8
Tutaj uczyniono pewien postęp. Nie ma już niebieskiego cienia nad przeźroczystymi obrazami, aczkolwiek kolory dalej są przekłamane ze względu na błędną obsługę filtru gamma (błąd niepoprawiony przez 11 lat i 4 wersje programu!). Pierwszy kwadrat wyświetlony jest w kolorze #7F7F7F, drugi w #757575.
Tu również najlepszym sposobem na poprawny wygląd jest całkowita rezygnacja z PNG. Przy pewnej dozie tolerancji można by przyjąć, że wersja z użytą przeźroczystością nie różni się aż tak bardzo od oczekiwanego rezultatu i stosować PNG do obrazów z przeźroczystościami, a pozostałe formaty do obrazów bez, ale jest to dziwny kompromis, skoro w innych przeglądarkach nie trzeba go stosować.
Stop IE!
Jak widać nawet najnowsza wersja Internet Explorera nie jest wolna od błędów i na wersję 9.0 wypada patrzeć z nadzieją, że dostosuje się ona do standardów stosowanych przez pozostałe przeglądarki, a jednocześnie z obawą, czy przypadkiem nie będzie to kolejna wersja IE do wspierania w zupełnie inny sposób niż poprzednie i zupełnie inaczej niż pozostałe przeglądarki.
Jako ciekawostka: od pierwszego marca Google przestaje wspierać IE6 w swoich aplikacjach.
A jako optymistyczny akcent najnowsze statystyki przeglądarek w polskim internecie.