Zgodność przeglądarek i caniuse.com
Sprawdzaj obsługę funkcji w różnych przeglądarkach na caniuse.com, poznaj prefiksy dostawców i w razie potrzeby używaj polyfillów lub rozwiązań awaryjnych.
Zgodność przeglądarek i caniuse.com to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego zgodność ma znaczenie?
Różne przeglądarki wdrażają standardy internetowe w różnym tempie. Właściwość CSS lub API JavaScript dostępne w Chrome 130 może nie istnieć w starszej wersji Safari lub Firefoksa. Testowanie i planowanie pod kątem zgodności zapobiega problemom z działaniem aplikacji u użytkowników.
caniuse.com — źródło informacji o zgodności
Otwórz stronę caniuse.com i wpisz dowolną właściwość CSS, API JavaScriptu lub atrybut HTML. Zobaczysz oznaczoną kolorami tabelę obsługi we wszystkich głównych przeglądarkach i ich nowszych wersjach, a także statystyki użycia i informacje o częściowej obsłudze.
Czytanie tabeli caniuse
Zielony = obsługiwane. Żółty = częściowa obsługa. Czerwony = brak obsługi. Szary = nieznane. Sprawdź u góry globalny procent użycia — jeśli ma tę funkcję 97%+ użytkowników, zwykle można korzystać z niej bez rozwiązania awaryjnego.
browser-compat-data i MDN
Strony MDN Web Docs zawierają tabelę zgodności przeglądarek na dole każdej strony z dokumentacją API. Korzysta ona z tych samych danych co caniuse i jest często aktualizowana przez samych dostawców przeglądarek.
Inicjatywa Baseline
Inicjatywa Baseline (web.dev/baseline) oznacza funkcje jako Newly Available lub Widely Available na podstawie ich obsługi w Chrome, Edge, Firefoksie i Safari. Funkcji oznaczonej jako Widely Available można bezpiecznie używać bez polyfillów.
Polyfilly
Polyfill to kod JavaScript implementujący nowsze API w starszych przeglądarkach. Popularne źródła to: polyfill.io (dostarczający tylko potrzebne polyfillе), core-js (kompleksowe polyfille JavaScriptu) oraz helpery Babel.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — zapytania o obsługę funkcji w CSS
@supports pozwala pisać reguły CSS, które są stosowane tylko wtedy, gdy dana właściwość jest obsługiwana. Zapewnia mechanizmy awaryjne w CSS, podobnie jak media queries pozwalają definiować responsywne nadpisania.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}Prefiksy dostawców (starsze rozwiązanie)
Starsze funkcje CSS wymagały prefiksów dostawców: -webkit-, -moz-, -ms-. Obecnie są one w większości przestarzałe — nowoczesne przeglądarki używają standardowych właściwości bez prefiksów. Autoprefixer (wtyczka PostCSS) dodaje je automatycznie, jeśli nadal są potrzebne.
Transpilacja z użyciem Babel
Babel kompiluje nowoczesny JavaScript (ES2022+) do ES5, który mogą uruchamiać starsze przeglądarki. Vite i webpack integrują Babel za pomocą wtyczek. Docelowe przeglądarki należy skonfigurować w browserslist w pliku package.json.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]Testowanie w rzeczywistych przeglądarkach
Emulacja urządzeń w DevTools nie zastępuje testowania w rzeczywistych przeglądarkach. Do rzetelnej weryfikacji zgodności między przeglądarkami należy używać BrowserStack, Sauce Labs lub właściwej przeglądarki Safari (wymaga systemu macOS lub iOS).
Ekosystem przeglądarek z automatycznymi aktualizacjami
Chrome, Edge, Firefox i Safari aktualizują się automatycznie. Liczba przestarzałych przeglądarek maleje z każdym rokiem. W przypadku większości produktów konsumenckich obsługa dwóch ostatnich głównych wersji każdej przeglądarki obejmuje ponad 95% użytkowników.
Szybki test
Co oznacza zielona komórka w tabeli obsługi w serwisie caniuse.com?
Podsumowanie: zgodność przeglądarek
Przed użyciem nowych interfejsów API należy sprawdzić caniuse.com. Należy zapoznać się z tabelami zgodności w MDN. Warto określać rozsądny zestaw przeglądarek za pomocą browserslist. Należy używać @supports do zapytań o obsługę funkcji CSS. Polyfill należy dodawać tylko wtedy, gdy jest potrzebny. Nowoczesny JavaScript należy transpilować za pomocą Babel. W przypadku kluczowych funkcji należy testować aplikację w rzeczywistych przeglądarkach.
Często zadawane pytania
Czy lekcja „Zgodność przeglądarek i caniuse.com” jest bezpłatna?
Tak — pełny tekst „Zgodność przeglądarek i caniuse.com” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zgodność przeglądarek i caniuse.com”?
Sprawdzaj obsługę funkcji w różnych przeglądarkach na caniuse.com, poznaj prefiksy dostawców i w razie potrzeby używaj polyfillów lub rozwiązań awaryjnych. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 4 z 4.
Ile czasu zajmuje lekcja „Zgodność przeglądarek i caniuse.com”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Chrome DevTools: Elements, Console, Network
- VSCode: rozszerzenia, Emmet i skróty
- Konfiguracja Prettier i ESLint
- Zgodność przeglądarek i caniuse.com