Tworząc stronę internetową, możemy korzystać z coraz bardziej rozbudowanych możliwości HTML, CSS i JavaScript. Nie każda funkcja jest jednak obsługiwana przez wszystkie przeglądarki oraz ich starsze wersje. Rozwiązanie, które działa poprawnie w najnowszym Chrome, może nie działać w Safari, Firefoxie albo przeglądarce zainstalowanej na starszym telefonie.
Właśnie w takich sytuacjach przydaje się Can I Use - popularne narzędzie pozwalające szybko sprawdzić zgodność technologii internetowych z poszczególnymi przeglądarkami.
Co to jest Can I Use?
Can I Use to internetowa baza informacji o obsłudze technologii webowych przez przeglądarki. Narzędzie przedstawia dane w postaci czytelnych tabel, w których można sprawdzić, od jakiej wersji przeglądarki działa określona funkcja HTML, właściwość CSS, interfejs JavaScript lub inne API dostępne na platformie internetowej.
W bazie znajdują się między innymi informacje dotyczące:
- elementów i atrybutów HTML,
- właściwości, selektorów i funkcji CSS,
- funkcji języka JavaScript,
- interfejsów Web API,
- formatów obrazów, dźwięku i filmów,
- technologii związanych z bezpieczeństwem,
- funkcji dostępnych na urządzeniach mobilnych.
Nazwa narzędzia pochodzi od pytania, które regularnie zadają sobie programiści: “Czy mogę już użyć tej funkcji w swoim projekcie?”.
Do czego służy Can I Use?
Podstawowym zadaniem Can I Use jest sprawdzenie, czy konkretna technologia będzie działać w przeglądarkach używanych przez odbiorców strony.
Załóżmy, że podczas tworzenia arkusza stylów chcemy zastosować selektor CSS :has(). Po wyszukaniu go w Can I Use
otrzymamy tabelę pokazującą, które wersje Chrome, Edge, Firefox, Safari oraz przeglądarek mobilnych go obsługują.
Na tej podstawie możemy zdecydować, czy:
- wykorzystać funkcję bez dodatkowych zabezpieczeń,
- przygotować prostsze rozwiązanie dla starszych przeglądarek,
- zastosować mechanizm stopniowego ulepszania strony,
- skorzystać z polyfilla,
- całkowicie zrezygnować z funkcji w danym projekcie.
Can I Use nie służy więc wyłącznie do sprawdzania, czy dana technologia “działa”. Pomaga również ocenić, jak duża część użytkowników będzie mogła z niej skorzystać.
Jak czytać tabele w Can I Use?
Po wyszukaniu wybranej funkcji zobaczymy tabelę podzieloną na przeglądarki i ich wersje. Poszczególne komórki mają różne kolory.
Kolor zielony oznacza pełną obsługę funkcji.
Kolor czerwony oznacza brak obsługi.
Kolor żółtozielony informuje o obsłudze częściowej.
Kolor szary oznacza, że poziom obsługi nie został potwierdzony.
Najwięcej uwagi warto poświęcić obsłudze częściowej. Może ona oznaczać, że funkcja działa dopiero po włączeniu dodatkowej flagi, wymaga prefiksu, nie obsługuje wszystkich wariantów albo zawiera błędy charakterystyczne dla danej przeglądarki.
Pod tabelą często znajdują się dodatkowe informacje:
- przypisy dotyczące konkretnych wersji,
- opis ograniczeń,
- znane problemy,
- odnośniki do dokumentacji i specyfikacji,
- informacje o prefiksach,
- materiały umożliwiające dalszą weryfikację.
Dlatego nie należy poprzestawać wyłącznie na sprawdzeniu koloru komórki. W przypadku ważnej funkcji warto przeczytać również przypisy i sekcję ze znanymi problemami.
Najważniejsze funkcje Can I Use
Wyszukiwarka technologii
Najczęściej używaną funkcją serwisu jest wyszukiwarka. Można w niej wpisywać nazwy technologii, właściwości oraz fragmenty składni. Wyniki mogą pochodzić z głównej bazy Can I Use, danych zgodności MDN oraz szerszego katalogu funkcji platformy internetowej.
Tabele zgodności przeglądarek
Każda funkcja otrzymuje tabelę obejmującą przeglądarki komputerowe i mobilne. Można w niej sprawdzić zarówno aktualne, jak i starsze wersje programów.
Can I Use uwzględnia między innymi Chrome, Edge, Firefox, Safari, Operę, przeglądarki mobilne oraz przeglądarki instalowane przez producentów telefonów.
Globalny poziom obsługi
Serwis pokazuje procentowy udział użytkowników, których przeglądarki obsługują daną funkcję. Dzięki temu można spojrzeć na kompatybilność nie tylko przez pryzmat numerów wersji, ale również rzeczywistej popularności poszczególnych przeglądarek.
Funkcja może nie działać w kilku starszych wersjach, lecz mimo to być dostępna dla zdecydowanej większości użytkowników. W innym przypadku brak obsługi jednej ważnej przeglądarki mobilnej może mieć istotny wpływ na cały projekt.
Poniżej przykład - poziom obsługi technologii grid w przeglądarkach (im wyższy słupek, tym więcej użytkowników posiada daną przeglądarkę)
Regionalne dane o wykorzystaniu przeglądarek
Popularność przeglądarek różni się w zależności od kraju i regionu. Can I Use pozwala zmienić źródło statystyk, dzięki czemu można ocenić obsługę funkcji dla użytkowników z konkretnego obszaru geograficznego.
Ma to znaczenie szczególnie wtedy, gdy strona jest przeznaczona dla odbiorców z jednego państwa, a globalne statystyki nie odzwierciedlają struktury jej ruchu.
Własne statystyki użytkowników
Jeszcze lepsze rezultaty daje wykorzystanie danych pochodzących z własnej strony. Can I Use umożliwia pracę ze statystykami przeglądarek używanych przez rzeczywistych odwiedzających.
Może się okazać, że globalnie dana funkcja ma bardzo dobrą obsługę, ale w konkretnym serwisie znaczna część użytkowników korzysta ze starszych urządzeń. Może być również odwrotnie - użytkownicy strony mogą mieć na tyle aktualne przeglądarki, że utrzymywanie kosztownej zgodności ze starymi wersjami nie jest już uzasadnione.
Własny zestaw obsługiwanych przeglądarek
W ustawieniach można określić, które wersje przeglądarek mają być widoczne w tabelach. Reguły mogą być oparte na składni znanej z narzędzia Browserslist.
Zamiast analizować wszystkie dostępne wersje, zespół może skoncentrować się na własnej polityce kompatybilności, na przykład:
- dwóch ostatnich wersjach najważniejszych przeglądarek,
- przeglądarkach mających określony udział w rynku,
- wersjach wydanych po wskazanej dacie,
- konkretnych przeglądarkach używanych przez klientów firmy.
Porównywanie przeglądarek
Can I Use pozwala również porównywać możliwości wybranych przeglądarek. Funkcja może być pomocna przy ustalaniu, która z nich zapewnia najszerszą obsługę technologii istotnych dla danego projektu.
Dane dostępne dla innych narzędzi
Baza Can I Use jest wykorzystywana również przez narzędzia programistyczne. Dane o kompatybilności mogą być używane między innymi podczas budowania aplikacji, analizy kodu i dobierania transformacji potrzebnych dla starszych przeglądarek.
Z Can I Use powiązane są również narzędzia umożliwiające osadzanie tabel na innych stronach, sprawdzanie kodu CSS oraz analizowanie łącznej obsługi kilku funkcji.
Praktyczne wskazówki dotyczące Can I Use
Nie traktuj globalnego procentu jako jedynego kryterium
Globalna obsługa na poziomie 95 lub 98 procent nie zawsze oznacza, że funkcja jest odpowiednia dla konkretnej strony. Najważniejsze są dane dotyczące jej własnych użytkowników.
Inne wymagania będzie miał nowy serwis technologiczny, a inne system używany w firmach, szkołach lub instytucjach publicznych.
Zawsze sprawdzaj przypisy
Żółtozielona komórka może oznaczać drobne ograniczenie, ale może też informować o braku kluczowego elementu funkcji. Przed wdrożeniem należy przeczytać przypisy dotyczące interesujących nas przeglądarek.
Can I Use nie zastępuje testów
Informacja o obsłudze funkcji oznacza, że przeglądarka ją implementuje. Nie gwarantuje jednak, że cały interfejs będzie działał i wyglądał identycznie na każdym urządzeniu.
Różnice mogą dotyczyć sposobu renderowania, obsługi dotyku, klawiatury ekranowej, dostępności, wydajności lub błędów występujących tylko w określonej wersji systemu.
Najważniejsze elementy strony nadal należy testować w rzeczywistych przeglądarkach.
Stosuj progressive enhancement
Nowoczesna funkcja nie zawsze musi działać u wszystkich użytkowników, pod warunkiem że jej brak nie blokuje podstawowej funkcjonalności strony.
Można przygotować prostą wersję działającą wszędzie, a następnie wzbogacić ją w przeglądarkach obsługujących nowszą technologię. Takie podejście nazywa się progressive enhancement, czyli stopniowym ulepszaniem.
Korzystaj z @supports
W przypadku funkcji CSS warto rozważyć regułę @supports, która pozwala sprawdzić bezpośrednio w przeglądarce, czy
obsługuje ona określoną właściwość lub wartość.
Przykład:
.card {
display: block;
}
@supports (display: grid) {
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
Starsza przeglądarka zastosuje podstawowy układ, natomiast nowsza skorzysta z CSS Grid.
Łącz Can I Use z Browserslist
W projektach wykorzystujących narzędzia takie jak Babel, Autoprefixer lub nowoczesne bundlery warto zdefiniować listę obsługiwanych przeglądarek za pomocą Browserslist.
Pozwala to zachować spójność między decyzjami zespołu, konfiguracją procesu budowania aplikacji i tabelami analizowanymi w Can I Use.
Sprawdzaj funkcje jeszcze przed zaprojektowaniem rozwiązania
Kompatybilność najlepiej sprawdzić przed rozpoczęciem implementacji, a nie dopiero wtedy, gdy gotowy interfejs przestanie działać w Safari. Kilka minut poświęconych na analizę może oszczędzić wiele godzin późniejszych poprawek.
Ograniczenia Can I Use
Can I Use jest bardzo przydatnym narzędziem, ale nie odpowiada na każde pytanie dotyczące kompatybilności.
Serwis nie sprawdzi automatycznie, czy konkretna strona działa poprawnie w danej przeglądarce. Nie wykryje również wszystkich błędów implementacyjnych, problemów z wydajnością ani różnic w wyglądzie interfejsu.
Dane dotyczą obsługi określonych funkcji, a nie całych aplikacji. Nawet gdy wszystkie użyte technologie są oficjalnie obsługiwane, ich połączenie może ujawnić problemy, które będą widoczne dopiero podczas testów.
Can I Use należy więc traktować jako narzędzie wspierające podejmowanie decyzji, a nie zamiennik testowania strony.
Alternatywy dla Can I Use
MDN Web Docs
MDN jest rozbudowaną dokumentacją technologii internetowych. Na stronach poświęconych poszczególnym elementom HTML, właściwościom CSS i interfejsom JavaScript znajdują się tabele zgodności przeglądarek.
MDN będzie lepszym wyborem, gdy oprócz informacji o kompatybilności potrzebujemy także wyjaśnienia działania funkcji, opisu składni, przykładów kodu oraz informacji o dostępności i dobrych praktykach.
Can I Use pozwala szybciej ocenić obsługę przeglądarek, natomiast MDN dostarcza szerszy kontekst techniczny. W praktyce najlepiej korzystać z obu narzędzi.
Web Platform Baseline
Baseline upraszcza ocenę dostępności funkcji internetowych. Zamiast analizować wiele numerów wersji, otrzymujemy informację, czy funkcja jest nowo dostępna we wszystkich najważniejszych silnikach przeglądarek, szeroko dostępna albo nadal ma ograniczoną obsługę.
Baseline sprawdza się wtedy, gdy potrzebujemy szybkiej i łatwej do zakomunikowania polityki kompatybilności. Can I Use nadal oferuje jednak bardziej szczegółowe dane dotyczące konkretnych wersji przeglądarek.
BrowserStack
BrowserStack nie jest bazą zgodności, lecz platformą pozwalającą uruchamiać i testować strony w różnych przeglądarkach oraz na różnych urządzeniach.
Jest to rozwiązanie uzupełniające Can I Use. Najpierw można sprawdzić teoretyczną obsługę technologii, a następnie przetestować gotową stronę w przeglądarkach, które są istotne dla projektu.
Can I Email
W przypadku tworzenia wiadomości e-mail zwykłe dane dotyczące przeglądarek nie wystarczą. Programy pocztowe mają własne, często znacznie większe ograniczenia dotyczące HTML i CSS.
Can I Email prezentuje tabele obsługi technologii przez klientów pocztowych, takich jak Gmail, Outlook, Apple Mail czy aplikacje mobilne. Jest więc odpowiednikiem Can I Use przeznaczonym dla twórców newsletterów i szablonów e-mail.
Dokumentacja producentów przeglądarek
W przypadku bardzo nowych lub eksperymentalnych technologii warto również sprawdzać informacje publikowane przez twórców Chrome, Firefox i Safari. Dokumentacja producenta może zawierać dokładniejsze informacje o funkcjach dostępnych za flagą, testach eksperymentalnych i planowanych terminach wdrożenia.
Takie źródła pokazują jednak przede wszystkim perspektywę jednej przeglądarki, podczas gdy Can I Use umożliwia szybkie porównanie całego rynku.