Cross-browser compatibility

Cross-browser compatibility (zgodność międzyprzeglądarkowa) to właściwość strony lub aplikacji internetowej polegająca na tym, że wygląda ona i działa poprawnie w różnych przeglądarkach — Chrome, Firefox, Safari, Edge — a także w ich wersjach mobilnych i starszych wydaniach. Choć wszystkie przeglądarki implementują te same standardy W3C i WHATWG, robią to w różnym tempie i z różnicami w szczegółach, dlatego zgodność trzeba świadomie projektować i testować.

Na czym polega zgodność międzyprzeglądarkowa

Źródłem różnic są przede wszystkim silniki renderujące: Blink (Chrome, Edge, Opera), Gecko (Firefox) i WebKit (Safari). Każdy z nich może inaczej interpretować nowsze właściwości CSS, wspierać inne API JavaScript albo różnić się domyślnymi stylami elementów. Historycznie największe problemy sprawiał Internet Explorer; dziś jego rolę „najtrudniejszej przeglądarki” często przejmuje Safari, zwłaszcza na iOS, gdzie do niedawna wszystkie przeglądarki musiały korzystać z silnika WebKit.

Podstawowe techniki zapewniania zgodności to:

• progressive enhancement — budowanie działającej bazy na sprawdzonych standardach i dodawanie nowoczesnych usprawnień tam, gdzie są wspierane,
• wykrywanie funkcji zamiast wykrywania przeglądarki — @supports w CSS, sprawdzanie istnienia API w JS,
• transpilacja i polyfille — Babel oraz core-js pozwalają pisać nowoczesny kod działający w starszych środowiskach,
• autoprefixer i normalizacja stylów — automatyczne prefiksy oraz ujednolicenie domyślnych styli przeglądarek,
• lista wspieranych przeglądarek (browserslist) — jawna deklaracja, dla jakich wersji budowany jest projekt.

Zastosowanie w praktyce

W komercyjnych projektach zgodność definiuje się w wymaganiach: zwykle wspiera się dwie–trzy ostatnie wersje głównych przeglądarek oraz te, które realnie występują w statystykach odwiedzin danego serwisu. Testy prowadzi się w narzędziach do automatyzacji (Playwright, Selenium — każdy potrafi uruchamiać różne silniki) oraz w usługach chmurowych udostępniających setki kombinacji przeglądarka–system–urządzenie. Sklep internetowy, którego formularz płatności nie działa w Safari na iPhonie, traci realny przychód — dlatego weryfikację najważniejszych ścieżek użytkownika w kilku silnikach warto włączyć na stałe do procesu wydawniczego, obok testów responsywności.