Jak sprawdzić wygląd strony pod różnymi przeglądarkami

Obecnie twórcy nowych wersji przeglądarek starają się dostosowywać je tak, aby ta sama strona internetowa wyglądała w nich tak samo. W starszych wersjach, np. Internet Explorer, czy Firefox można było zobaczyć kolosalne różnice. Tworząc stronę internetową trzeba było dostosowywać ją pod konkretną przeglądarkę, ponieważ ich twórcy różnie interpretowali kaskadowe arkusze stylów (css).

Pomimo powolnego zunifikowania, warto skorzystać z mechanizmów pozwalających zobaczyć czy nasza strona rzeczywiście wygląda identycznie pod różnymi przeglądarkami.

W tym celu posłużymy się internetową aplikacją Adobe BrowserLab dostępną na stronie: https://browserlab.adobe.com/en-us/

Aby z niej skorzystać musimy kliknąć na przycisk Start using browser Lab i wpisać dane identyfikujące nas w serwisie (adres email, hasło). Jeżeli wcześniej nie rejestrowaliśmy się w serwisach Adobe, konieczne będzie zarejestrowanie bezpłatnego konta.

Po zalogowaniu się, klikamy zakładkę Browser sets na samej górze aplikacji - która pozwoli nam zdefiniować, które przeglądarki mają brać udział w teście. Będziemy mogli określić nie tylko samą przeglądarkę (Chrome, Firefox, Safari, Internet Explorer), ale także jej wersję (starsze, nowsze).

Gdy określimy, które przeglądarki będą brane pod uwagę - wpisujemy adres strony internetowej w szerokim pasku, zaraz pod logiem Adobe BrowserLab i klikamy przycisk Refresh (dwie strzałeczki).

Po chwili zobaczymy zrzuty ekranu testowanej strony internetowej, pod różnymi wersjami przeglądarek. Na czarnym pasku u góry ekranu, będziemy mogli wybrać widok kolejnej testowanej przeglądarki. Dzięki temu zobaczymy, czy strona internetowa jest rzeczywiście zoptymalizowana pod kątem różnych wersji przeglądarek.

Klikając przycisk View, znajdujący się na samej górze po prawej stronie - mamy możliwość podglądu zrzutów ekranu pochodzących z kilku przeglądarek jednocześnie. Jest to o tyle wygodne, że od razu dostrzeżemy różnicę w ewentualnych różnicach.