0Pricing
HTML Academy · Lekcja

Wykrywanie funkcji a rozpoznawanie przeglądarki

Stosowanie wykrywania funkcji zamiast rozpoznawania user agenta

Wykrywanie funkcji a rozpoznawanie przeglądarki to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Dwa podejścia do zgodności

Aby sprawdzić, czy bieżąca przeglądarka obsługuje daną funkcję, można albo wykrywać funkcję bezpośrednio ("IntersectionObserver" in window), albo analizować ciąg user agenta (navigator.userAgent.includes("Chrome")). Jedno podejście jest niezawodne, a drugie od dawna stanowi źródło błędów.

Dlaczego analiza user agenta zawodzi

Ciągi user agenta wprowadzają w błąd. Edge przedstawia się jako Chrome (a także Safari i Firefox). Chrome na Androidzie wysyła inny UA niż Chrome na iOS. Przeglądarki respektują „zamrażanie” ciągu UA ze względów prywatności. Każda logika oparta na ciągach UA przestaje działać co kilka miesięcy.

Wzorzec wykrywania funkcji

Należy sprawdzić rzeczywiste API wymagane przez kod: if ("IntersectionObserver" in window) { ... }. Jeśli właściwość istnieje, przeglądarka ją obsługuje; jeśli nie, należy użyć ścieżki zastępczej. Sprawdzenie jest bezpośrednie, szybkie i odporne na przyszłe zmiany.

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(handler);
} else {
  loadPolyfill().then(() => { /* use IntersectionObserver */ });
}

Najpierw wykryj, potem użyj

Wykrywanie należy połączyć z rzeczywistym mechanizmem zastępczym. Wykrycie braku funkcji jest przydatne tylko wtedy, gdy wiadomo, co zrobić w takiej sytuacji — załadować polyfill, wyrenderować statyczną alternatywę albo całkowicie ukryć daną funkcję.

Zapytania o funkcje CSS

CSS ma własny mechanizm wykrywania funkcji: @supports (display: grid) { ... }. Blok jest stosowany tylko wtedy, gdy przeglądarka rozumie daną parę właściwości i wartości. Należy używać go do dostarczania układów opartych na gridzie wraz z układami zastępczymi opartymi na float dla bardzo starych przeglądarek.

@supports (display: grid) {
  .grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
  .grid > * { float: left; width: 33%; }
}

Wskazówki klienta dotyczące user agenta

Nowoczesne przeglądarki udostępniają ustrukturyzowane informacje za pomocą navigator.userAgentData (tylko Chromium). Zwracają one pary marka+wersja zamiast ciągu o dowolnym formacie. Nadal należy preferować wykrywanie funkcji — wskazówki UA są przydatne tylko wtedy, gdy możliwości nie można ustalić na podstawie sprawdzenia właściwości.

Kiedy analiza user agenta jest dopuszczalna

Jedynym wąskim, uzasadnionym zastosowaniem wykrywania UA jest wykluczenie wadliwych przeglądarek, na przykład znanego błędu iOS Safari w wersji X. Nawet wtedy należy preferować wykluczenia oparte na funkcjach (CSS.supports("aspect-ratio: 1")). Wykrywanie UA powinno być ostatecznością.

Biblioteki w stylu Modernizr

Modernizr grupuje wiele mechanizmów wykrywania funkcji i udostępnia ich wyniki jako klasy na elemencie <html> (html.flexbox, html.no-flexbox). Nowoczesne projekty rzadko go potrzebują — większość takich mechanizmów wykrywania mieści się w jednej linii — ale nadal jest przydatny podczas migracji starszych systemów.

Testowanie wariantu zastępczego

Po wdrożeniu wykrywania należy przetestować obie ścieżki. Należy otworzyć DevTools, zastąpić funkcję wartością undefined i sprawdzić, czy wariant zastępczy działa. Nietestowane warianty zastępcze z czasem przestają działać — gdy użytkownik ich potrzebuje, często zawodzą w sposób, którego programista nigdy nie przewidział.

Wykrywanie w frameworkach

React, Vue i inne frameworki nie mają specjalnego API do wykrywania funkcji — należy używać zwykłego JavaScriptu wewnątrz efektu lub podczas inicjalizacji komponentu. Aplikacje renderowane po stronie serwera muszą wykrywać funkcje po stronie klienta, ponieważ "IntersectionObserver" in window ma wartość undefined podczas SSR.

Unikanie analizy UA opartej na możliwościach

Niektóre zespoły sprawdzają UA, aby odgadnąć możliwości urządzenia („Czy to iPhone? W takim razie prawdopodobnie obsługuje Touch”). Łączy to dwie niezależne kwestie. Obsługę dotyku należy wykrywać bezpośrednio za pomocą "ontouchstart" in window albo, jeszcze lepiej, preferować zdarzenia wskaźnika, które abstrahują od rodzaju używanego urządzenia wejściowego.

Sprawdzenie wiedzy

Dlaczego podczas obsługi możliwości przeglądarki preferuje się wykrywanie funkcji zamiast analizy user agenta?

Podsumowanie

Należy preferować wykrywanie funkcji ("API" in window) zamiast analizy user agenta. CSS udostępnia do tego samego celu @supports. Wykrywanie zawsze należy łączyć z rzeczywistym wariantem zastępczym i testować obie ścieżki. Analizę UA należy rezerwować do wykluczania znanych wadliwych wersji przeglądarek, a nigdy do odgadywania ich możliwości.

Często zadawane pytania

Czy lekcja „Wykrywanie funkcji a rozpoznawanie przeglądarki” jest bezpłatna?

Tak — pełny tekst „Wykrywanie funkcji a rozpoznawanie przeglądarki” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wykrywanie funkcji a rozpoznawanie przeglądarki”?

Stosowanie wykrywania funkcji zamiast rozpoznawania user agenta Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Wykrywanie funkcji a rozpoznawanie przeglądarki”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Filozofia PE — zacznij od HTML
  2. Wykrywanie funkcji a rozpoznawanie przeglądarki
  3. Graceful Degradation a Progressive Enhancement
  4. Budowanie akordeonu PE
← Powrót do HTML Academy