• 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;

Podobnie jak w poprzednim odcinku, przygotowałem stronę testową. Zgodnie z intuicją wszystkie trzy kwadraty powinny ułożyć się jeden nad drugim i dać jeden prostokąt o wymiarach 100×300px.

Firefox 3.5, Opera, IE8

Powyższe trzy przeglądarki wyświetliły wszystko zgodnie z przewidywaniami: kwadraty jeden pod drugim, równo i bez problemów. Miłą niespodzianką było to, że Internet Explorer 8 wyświetlił wszystko poprawnie. W tych trzech przeglądarkach pozycja wyśrodkowanego tła i wyśrodkowanych elementów przekształcana jest do liczby całkowitej jednym sposobem (w FF3.5 przez zaokrąglenie, w Operze i IE8 – przez obcięcie części ułamkowej).

Firefox 3.0, IE7

Zaskoczeniem okazał się Firefox 3.0, który wyświetla wyśrodkowane tło przesunięte o 1px w lewo w stosunku do pozostałych kwadratów. Związane jest to z tym, że pozycja tła w jest wyliczana przez obcięcie części ułamkowej, a pozycja elementu na stronie – przez zaokrąglenie. Oczywiście przesunięcie występuje tylko wtedy, kiedy szerokość okna przeglądarki (bez elementów interfejsu: paska przewijania, brzegów okna) jest liczbą nieparzystą.

Safari, Chrome

W przeglądarkach na silniku webkit występuje odwrotny problem niż w FF3.0 i IE7 – pozycja tła tworzona jest przez zaokrąglenie, a pozostałych elementów przez obcięcie, co przy nieparzystej szerokości strony tworzy przesunięcie tła o 1px w prawo.

IE6

Ta przeglądarka jest, oczywiście, klasą samą w sobie. Dla tła w ogóle nie działa automatyczne wyśrodkowanie przez co nie znalazło się ono na screenie (wyświetlone było w lewym górnym rogu strony testowej), z kolei element wyśrodkowany przez position:absolute został ustawiony przez zaokrąglenie, a przez margin:auto – przez obcięcie.

Rozwiązanie

Tutaj, niestety, nie ma optymistycznych wieści. Wprawdzie można mieć nadzieję na nową wersję webkita, która naprawi problem w Safari i Chrome, a także na wyjście z użycia IE6, IE7 i FF3.0, ale trzeba założyć, że nie nastąpi to szybko. Jedynym sensownym rozwiązaniem wydaje się omijanie tego problemu i umieszczanie wyśrodkowanego tła strony tylko wtedy, gdy nie szkodzi nam jednopikselowe przesunięcie w jedną lub drugą stronę, a także wyśrodkowywanie elementów na stronie przy użyciu tylko jednej, wybranej metody.

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:

1. png w kolorze czarnym (#000000) z 50% przeźroczystością (dodatkowo jego lewy górny róg ustawiłem na pełną przeźroczystość)
2. png w kolorze #808080 bez przeźroczystości
3. gif w kolorze #808080
4. 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.