Prawdziwą zmorą każdego frontend developera jest tzw. cross-browsing, czyli testowanie kompatybilności stron, aplikacji internetowej, struktur HTML czy skryptów wykonywanych po stronie użytkownika w różnych przeglądarkach. Naturalnie problemy z kompatybilnością, co trzeba zaznaczyć, dotyczą głównie przeglądarki ze stajni Microsoftu, czyli Internet Explorera, dobrze jest jednak mieć świadomość tego, że nawet różne wersje tej samej przeglądarki (niekoniecznie IE) mogą niekiedy różnie interpretować kod. Jak temu zaradzić? Testować na rożnych przeglądarkach. Z głową.

Testowanie witryny pod różnymi przeglądarkami w zasadzie nie stanowi większego problemu – wystarczy je zainstalować. Ja tak robię – standardowo testuję witryny pod Firefoxem, Operą, Chromem, rzadziej Safari i oczywiście Internet Explorerem. Dodam, ze pierwsze cztery przeglądarki mam zawsze zaktualizowane do najnowszej wersji. Jeśli chodzi o kIEpskiego, to w sekcji head póki co umieszczam taki oto zapis:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

który to powoduje, że nowsze wersje IE (czyli w zasadzie IE8) emulują IE 7. Uważam, że to rozsądne rozwiązanie,mimo że na dzień dzisiejszy w grupie użytkowników MSIE dominują już użytkownicy IE8. Dla mnie IE był, jest i będzie nieprzewidywalny, a takie podejście eliminuje różnice w sposobie interpretacji kodu przez różne jego wersje. Przy okazji można podarować sobie osobny arkusz dla IE 7 (dla mnie starsze wersje już nie istnieją) w podpinany w komentarzach warunkowych.

Oczywiście nie musi to być wcale rozwiązanie permanentne. Możemy np. wymusić na IE emulację wersji 7 tylko po to, żeby właśnie przetestować jak prezentuje się strona w tej wersji kIepskiego, następnie zmodyfikować odpowiednio arkusz stylów, podpiąć go w komentarzu warunkowym a na koniec usunąć zapis. W ten sposób można wyeliminować różnicę w wyświetlaniu strony pod IE7 i IE8.

Browser Shoots

Jednym ze sposobów na sprawdzenie jak witryna prezentuje się w różnych przeglądarkach, różnych wersjach tych samych przeglądarek, ba – nawet na różnych systemach, jest serwis Browser Shoots. Użycie jest banalnie proste – podajemy adres strony, zaznaczamy interesujące nas przeglądarki w interesujących nas systemach, zaznaczamy interesujące nas opcje dodatkowe (rozdzielczość ekranu, obługa Java Script, itp. i… czekamy. No właśnie.

Po pierwsze – zanim uzyskamy zrzuty ekranu musimy chwilę poczekać. Niekiedy naprawdę dłuuugą chwilę. Po drugie – nieraz zdarzyło mi się, że zrzuty były niekompletne albo w ogóle an nich nie było,natomiast kolejne zapytanie o te samą witrynę to już zupełnie inna para kaloszy, ponieważ istnieje pojęcie limitu zrzutów dziennych. Nie muszę chyba wyjaśniać, co to oznacza, dodam tylko, że w takim trybie trudno na bieżąco śledzić, czy wprowadzone w kodzie zmiany cokolwiek zmieniły w sposobie wyświetlania strony. Po trzecie – to są tylko zrzuty, więc nie ma mowy o przetestowaniu funkcjonalności. Możemy sprawdzić tylko sposób wyświetlania – nic ponadto. Niemniej trzeba przyznać, że twórcy oferuję imponujący wachlarz systemów operacyjnych i przeglądarek.

Browser Sandox

Bardzo fajnym rozwiązaniem jest serwis Browser Sandbox. Serwis ten umożliwia odpalenie niektórych przeglądarek bez konieczności ich instalacji. Jedyne co trzeba zrobić do zainstalować darmową wtyczkę (na pewno działa z Firefoxem, nie wiem jak z innymi przeglądarkami) i wybrać przeglądarkę oraz jej wersję. Viola! Przeglądarka odpalona – wystarczy wpisać adres strony i można testować. Niestety – z niezrozumiałych dla mnie przyczyn Microsoft zażądał od twórców serwisu usunięcia Internet Explorera. Bardzo nad tym ubolewam, ponieważ był to dla mnie jak na razie najlepszy i najszybszy sposób na sprawdzenie jak działa witryna różnymi wersjami Internet Explorera. W tej chwili do dyspozycji mamy więc „tylko” Firefoxa w wersjach 4, 3.6, 3.5 i 2, Chroma w wersjach 6, 5 i 4 oraz Operę w wersjach 10 i 9. Niezależnie od tego gorąco polecam ten serwis!

Przy okazji, zauważyłem, że na Browser Sandbox reklamowany jest nowy serwis (przynajmniej dla mnie nowy) – CrossBrowserTesting, który zapowiada się dość ciekawe. Na razie nie zamierzam w najbliższym czasie zgłębiać jego funkcjonalności, ale po nowym roku – kto wie. Jeśli skorzystam, na pewno podzielę się wrażeniami. Dodam, że zapowiada się ciekawie.

Adobe BrowserLab

Fajna propozycja od Adobe – narzędzie, które na żywo generuje obrazy witryny z różnych przeglądarek. Działaniem przypomina trochę Browser Shots – jest jednak wygodniejsze, choć wymaga rejestracji, zdecydowanie szybsze i przede wszystkim – niezawodne. Ilość systemów została przez Adobe ograniczona do Windowsa i OS X, natomiast z przeglądarek mamy do dyspozycji Chrome 3.0, Firefoxa 2.0, 3.0 i 3.6, IE6, IE7 i IE8 (oczywiście tylko dla windy) oraz Safari 3.0, 4.0 i 5.0 (oczywiście tylko dla Maca). Niestety, tu również nie przetestujemy funkcjonalności, niemniej na pewno jest to narzędzie bardzo pomocne.

Microsoft SuperPreview

Narzędzie będące częścią pakietu Microsoft Expression. Szczerze przyznam, że niewiele mogę powiedzieć o tej propozycji Microsoftu. Jakiś czas temu posiadałem 30-dniowego triala, który umożliwiał mi tworzenie zrzutów strony w różnych wersja IE. Narzędzie działało na podobnej zasadzie co BrowserLab i muszę przyznać, że nawet przypadło mi do gustu. Niestety nie potrafię napisać o nim nic więcej, tym bardziej zarekomendować lub nie.

Wirtualna maszyna lub wersja portable

Generalnie jeśli chodzi o różne wersje przeglądarek z grupy nieinternetexplorerowych, to z tego co kojarzę istnieje możliwość posiadania różnych ich wersji na jednym komputerze. Na pewno jest tak w przypadku Firefoxa, nie sprawdzałem Opery i Chroma, ale myślę, że tu również taka opcja nie stanowi problemu. Problem pojawia się natomiast w przypadku Internet Explorera – dwie różne wersje tej przeglądarki na jednym kompie niestety przerosły możliwości jej twórców. Pozostawało jedno z dwóch rozwiązań – wirtualna maszyna lub wersja portable IE. Pierwsze rozwiązanie trochę niewygodne – wymaga pobrania programu, instalacji, ustawiania. Drugie rozwiązanie natomiast często po prostu nieskuteczne – po sieci krążą różne wersje IE portable, niektóre niedziałające, niektóre zawirusowane, poza tym niekompatybilne np. z Windowsem 7 – słowem zawodne. Żadne z tych rozwiązań nie jest moim zdaniem wygodne, dlatego tez nie korzystam i nie polecam.

Podsumowanie

Cross-browsing to ważna sprawa, bo ważne jest, żeby strona prezentowała się tak samo niezależnie od przeglądarki. Z wymienionych przez mnie sposobów z czystym sumieniem mogę polecić rozwiązanie firmy Adobe i Sandboxa, który to mam nadzieję jakoś dogada się z Microsoftem. Spore nadzieję żywię również odnośnie serwisu CrossBrowserTesting, który to planuję na pewno przetestować i podzielić się wrażeniami.

Jeśli chodzi o samo podejście do cross-browsingu, to wydaje się całkiem oczywiste, że bez sztabu testerów raczej trudno zagwarantować, że strona zawsze wyświetli się prawidłowo i będzie wyglądać oraz działać tak samo w każdych warunkach. Można jednak zadbać o to, żeby strona wyświetlała się i działała poprawnie w większości mainstreamowych przeglądarek i to – moim zdaniem – nie jest jakiś nadludzki wysiłek. Osobiście tę kwestię uważam za bardzo istotną.

BTW – jeśli ktoś mnie czyta i ma jakieś sugestie albo korzysta z jakiś ciekawych rozwiązań z tej dziedziny, to chętnie się o nich dowiem.

Podobne wpisy: