okruch-kodu

browserslist czyli lista wspieranych przeglądarek trzymana w kodzie

Od dłuższego czasu korzystam z browserslist, jednak dowiedziałem się, że nie jest to narzędzie tak znane jak sądziłem, więc napiszę kilka słów wyjaśnienia i zachęty.

browserslist - co to takiego?

browserslist to jak sama nazwa wskazuje “lista przeglądarek” czyli konfiguracja wspieranych przeglądarek, która jest trzymana w kodzie a rozumieją ją ludzie i maszyny.

W pliku konfiguracyjnym (.browserslistrc,browserslist), sekcji w browserslist w package.json lub zmiennej środowiskowej browserslist programista/programiści deklarują listę przeglądarek lub wersji Node.js, która chcą/muszą wspierać. Lista składa się z zapytań (queries), które mogą zawierać nazwę i wersję przeglądarki np. Firefox > 30, procentowe użycie (> 0.5%), rok wydania (since 2018) oraz wiele innych sposobów (w tym kombinacje, np.: latest 2 versions or > 1%, not IE), których nie ma sensu opisywać tutaj dlatego odsyłam do dokumentacji oraz interaktywnego narzędzia do testowania zapytań.
Dane o procentowym użyciu pochodzą z Can I Use

Dla ludzi

Sposobów konfiguracji jest sporo ale każdy jest łatwo zrozumiały dla człowieka dlatego pod dodaniu browserslist do projektu nie trzeba już zastanawiać się nad pytaniem “Czy wspieramy IE10 i Samsung Internet?”

Dla maszyn

Konfiguracja przeglądarek jest współdzielona i rozumiana przez takie narzędzia jak:

Używając browserslist nie musimy osobno konfigurować każdego z tych narzędzi pod kątem kompatybilności z przeglądarkami. Czasami nie mamy bezpośredniego dostępu do konfiguracji np. autoprefixera (w Angular CLI konfiguracja jest ukryta głęboko w node_modules).

Plugin do stylelinta pozwala wykryć deklaracje CSS, których przeglądarki z naszej listy nie wspierają.
Analogiczny plugin istnieje dla eslinta. Przykład w dokumentacji szczegółowo opisuje jak różne narzędzia korzystają z konfiguracji.

Nie każdy wie i pamięta, co jest wspierane w Samsung Internet, Internet Explorerze 10, co w przeglądarkach powyżej 10% użycia w Indiach, a skoro komputer może nam o tym powiedzieć to po co przepłacać?

wpis dodany 2019-02-12

tematy: