It’s #FrontendFriday – Browserslist: kleiner Eintrag mit viel Wirkung

30.07.2021

Es ist #FrontendFriday und heute zeige ich euch die browserslist und warum durch diese kleine Konfiguration ein Frontend so viele Browser unterstützen kann…

Verschiedene Browser = verschiedene Herausforderungen

Jeder darf sich den Browser, mit dem er im Internet surfen möchte, aussuchen. Diese Browser müssen natürlich auch aktuell sein. Chrome macht ca. alle 4-7 Wochen ein Update und zwischendurch kleinere Updates, um Sicherheitslücken zu schließen. Diese Browser unterscheiden sich zudem noch, sodass sie JavaScript oder CSS anders interpretieren können bzw. etwas andere Syntax benötigen. Damit Frontendentwickler nicht mehrere Versionen ihres Programmcodes schreiben müssen, gibt es Tools, die dafür sorgen, dass ein einheitliches JavaScript und CSS entsteht. Zwei der wohl bekanntesten Tools sind: babel und Autoprefixer [1]. babel sorgt dafür, dass ein einheitliches JavaScript entsteht und Autoprefixer sorgt für einheitliches CSS. Das ist wichtig, damit der Programmcode auf den verschiedenen Browsern gleich läuft. Woher wissen babel und Autoprefixer welche Browser sie unterstützen müssen? – Es ist die browserslist.

Ein so kleiner Eintrag mit so viel Wirkung

Meistens wird diese browserslist aber in eine eigene Datei ausgelagert, die .browserslistrc heißt. Diese Datei enthält die Konfigurationen, für welche Browser das Projekt laufen soll.

Beispieleintrag aus einer .browserslistrc:

> 0.5% 
last 2 versions 
Firefox ESR 
not dead 
IE 9-11

Um die .browserslist in Worte zu fassen:

Es soll JavaScript/CSS für alle Browser geschrieben werden,

  • die global von mehr als 0,5% der Bevölkerung benutzt werden
  • die letzten 2 Versionen der Browser
  • die den letzten Firefox Extended Support Release unterstützen
  • die Ihren offiziellen Support nicht vor 24 Monaten oder mehr beendet haben (zu „toten Browsern“ gehört z.B. IE 10)
  • die IE 9, IE 10 oder IE 11 sind

Durch diese Konfiguration wissen nun alle Tools, die das JavaScript/CSS umschreiben, für welche Browser sie es umschreiben müssen. [2]

Good to know

Da wir nun wissen, wozu die browserslist dient, müssen wir nur noch verstehen, wie wir sie verändern können, um sie auch zu nutzen. Auf der offiziellen GitHub-Seite zur browserslist gibt es eine Ansammlung der Syntax: https://github.com/browserslist/browserslist#queries. Hier steht zum Beispiel auch, dass auch Node.js Versionen angeben können, da die browserslist auch im Node Umfeld funktioniert.

Wer auch einfach nur schauen möchte, welche Browser mit der aktuellen browserslist unterstützt werden, kann diese Seite nutzen: https://browserslist.dev
Einfach in das Suchfeld > 0.5% eingeben und man sieht, welche Browser das sind. Die Konfiguration von oben kann auch getestet werden, nur muss diese mit „or“ verknüpft werden, damit die Seite dies richtig interpretiert:

0.5% or last 2 versions or Firefox ESR or not dead or IE 9-11

 

Fazit

Ich muss ehrlich sagen, dass ich bis vor Kurzem die browserslist schon oft gesehen hatte, aber diese nie wirklich beachtet hatte. Es ist auf jeden Fall gut zu wissen, was sie kann, da in Projekten des öfteren Browser und auch die Version der Browser vorgeben werden. Diese Information kann nun in die browserslist eingeben werden und das Projekt baut direkt für die jeweiligen Browser die richtige Syntax für JavaScript und CSS.

 

Mehr über Frontend Entwicklung erfahren


Quellen:

[1]: https://css-tricks.com/browserlist-good-idea/

[2]: https://github.com/browserslist/browserslist#queries

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*