If you're writing an application with Javascript, if you're writing some Javascript code that should
run in a browser, you of course need to find out if a certain feature you're planning to use is available
and of course that might be the case multiple times in a project
if you're using multiple features where you're not sure. Now of course there is a certain core feature set,
core syntax that is available in most browsers but it comes with experience that you know what
is available where and for newer features
but even for older features where you're just not sure whether they're supported everywhere,
there are a couple of resources you can check to find out how browsers support is looking for these
features.
One resource is MDN,
we already used MDN throughout this course because it is a great resource for getting more information about
Javascript functionalities, diving deeper into Javascript features and simply learning more about Javascript.
Now whenever you are on an article, on a page on MDN about a certain feature, you'll find a browser
support table in that same article,
typically at the bottom of the article. The table there or the article might also not just give you
that a rough overview over which browser version supports which feature, it might also give you extra
notes, hints about how you can work around missing browser support, fallbacks and so on.
Let's take the fetch API as an example, here I googled for fetch and i get the MDN result as the
first result and now I'm here on the article.
We can learn more about fetch and that's all nice but if we scroll down, we see the browser compatibility
table here.
Now there, you see various browsers,
here you also see the differentiation between desktop browsers and mobile browsers and then you see
how well they're supporting fetch and different variations or different niche features of the fetch
API and you see for fetch, the support is generally quite good,
Chrome supports it, Edge, Firefox, Opera, Safari but for example Internet Explorer does not.
You'll also see since which version this is getting supported
and if you expand this, here on Firefox for example, you got this on a couple of browsers,
you'll learn more about it, how it is enabled there and so on.
So that should give you a first good idea
and if you for example know that you don't need to support Internet Explorer in your application because
you're targeting users who are not likely to use Internet Explorer,
well then you can of course simply go ahead and use fetch like this and it should work in all these
browsers. Maybe you want more details though
or simply an alternative source to double check
and then caniuse.com is another great resource for determining browser support for a certain feature.
There, you can search for a feature name to get a detailed overview over that feature and which browser
support it, you even get market shares so that you can see how many users will be able to use this feature
if you implement it in your application,
so how many users are using which browser and then this is added up for you
so that you get an impression of how many people you could reach and how many people on the other hand
would visit your web site
and it would just not work as expected. This page, just like MDN also often includes notes and fallbacks
and workarounds to give you extra information and extra ideas on how you can make something work.
So for that, you can visit caniuse.com and here for example,
you could just type fetch, by the way
you can also type something like let and find out how the let keyword is supported.
So it's not just about browser APIs but also about syntax features.
So here I'm searching for fetch though and now you see this table, there you see various browsers,
also desktop browsers and then the mobile versions and you see which versions are supporting a feature,
which versions are supporting parts of that feature,
which versions are not supporting it
and there you also see how many people are using these browser versions,
for example Chrome 4 to Chrome 39 in this example is getting used by 0.26% of all users,
so not that many of course.
For example if we go to this stable version, we got almost 30% using one of these versions here which
does support fetch.
We see Internet Explorer is not supporting it and there we see overall, we would miss out on around 2%
of users
if we use fetch and we ship that on our page, 2% of all users would not be able to use our page
correctly because fetch would just not work there.
So this can be another great resource for finding out how well a certain feature is supported. Here you also
find additional notes that might be interesting,
you'll find subfeatures, so features related to that feature which might also be interesting to you
and under resources, you can find additional information,
for example a polyfill, something that will become interesting later and so on.
So this is another very useful resource and MDN and caniuse.com together are the two
resources I commonly used to find out how well something is supported.
Now we don't stop there however, there also is Google of course. Now the first two resources are by far
the most important but for some niche feature or some advanced use case, it can also be useful to just
google for it, something like fetch Javascript browser support and then check the results. You'll of course
also find MDN and caniuse there
but you might also find some stack overflow discussions that might contain additional useful hints,
for example there you might also learn how you can make it work in older browsers as well.
So these are three great resources for that.
Now when we talk about Javascript syntax features, there is another very interesting feature, that's
a specific ES6 Javascript compat table, compat for compatibility.
It's a web site which you can visit where you find a detailed list of Javascript syntax features and
which browser is supporting these features,
so it's great for checking whether some next generation Javascript feature is available. You'll find
a detailed feature split there and it even shows you support of various transpilers, something I'll
come back to later in this course, so that you can learn that even if a browser does not support a feature,
whether you can make it work with a certain transpilation tool. If you will google for E56 compat table,
you should find this ECMAScript 6 compatibility table by kangax and if you visit this, you'll find
this page here,
now that's a huge table here.
Now what you see here is for one up there, you can choose Javascript versions, ES6 and then even more,
next gen 2016+ and so on.
You can simply click through that and learn about certain features, like the global this keyword here
which is a very new feature or if you go back to E56, about rest parameters which you learned all
about, const, let
and so on
and then here you see how support is looking for it. You see compilers and polyfills,
so this basically shows you if you can make this feature work everywhere with some tools and there you
see for const and let, support would be pretty good for example but then if you scroll to the right, you also
find browsers, desktop browsers to be precise and you'll learn how support is looking like in Firefox
different versions, Chrome different versions, Safari, Edge, Internet Explorer and you'll see that for example
Internet Explorer 11 is having some support for const and let actually, older versions of Internet
Explorer will not have that however. So this can also be nice to learn whether some core Javascript syntax
is available there. If you scroll all the way to the right by the way, you can even see that for Node.js,
so if you don't plan on running your Javascript code in the browser but instead with Node.js, something
I will come back to in a separate module, then here you can learn which Node.js version you need
to use to support certain core Javascript features.
So this is the last really useful resource I want to show you so that you can build your application in
the best possible way and find out which browser supports which feature and which syntax.