1
00:00:02,090 --> 00:00:04,689
Now the next step is that we should be aware

2
00:00:04,689 --> 00:00:07,640
of browser limitations, and that we might want

3
00:00:07,640 --> 00:00:11,560
to improve our code so that it works in more browsers.

4
00:00:11,560 --> 00:00:13,520
That is something you want to check for

5
00:00:13,520 --> 00:00:16,540
because not all your website visitors will use

6
00:00:16,540 --> 00:00:19,220
the same browser and browser version as you do,

7
00:00:19,220 --> 00:00:22,030
and not all browsers support all the features,

8
00:00:22,030 --> 00:00:25,310
though the vast majority of features are supported

9
00:00:25,310 --> 00:00:27,260
by all important browsers.

10
00:00:27,260 --> 00:00:29,770
So it's not a huge issue these days anymore,

11
00:00:29,770 --> 00:00:31,890
but something to be aware of.

12
00:00:31,890 --> 00:00:34,250
And what's really important here is

13
00:00:34,250 --> 00:00:38,120
that with that, I'm talking about browser-side code only.

14
00:00:38,120 --> 00:00:41,055
So CSS and browser-side JavaScript,

15
00:00:41,055 --> 00:00:43,964
because HTML is pretty standardized.

16
00:00:43,964 --> 00:00:46,156
I'm talking about these features

17
00:00:46,156 --> 00:00:49,190
because what happens on the backend is not interesting

18
00:00:49,190 --> 00:00:50,680
to the browser at all.

19
00:00:50,680 --> 00:00:54,044
Your node JS code is not interesting to the browser at all,

20
00:00:54,044 --> 00:00:56,510
there, you just need a hosting provider

21
00:00:56,510 --> 00:01:00,510
that supports the node JS version you used for development,

22
00:01:00,510 --> 00:01:03,160
but the browsers don't care.

23
00:01:03,160 --> 00:01:04,690
Now, here in these examples,

24
00:01:04,690 --> 00:01:07,850
I don't have any browser-side JavaScript code,

25
00:01:07,850 --> 00:01:10,040
just some browser-side CSS code,

26
00:01:10,040 --> 00:01:12,380
but even here it is, for example,

27
00:01:12,380 --> 00:01:15,470
worth pointing out that I'm using flexbox

28
00:01:15,470 --> 00:01:19,440
Now flexbox, like all the CSS features we taught you

29
00:01:19,440 --> 00:01:22,001
in this course, is very well supported.

30
00:01:22,001 --> 00:01:24,232
Actually, all the features in general,

31
00:01:24,232 --> 00:01:28,481
including JavaScript features, are very well supported.

32
00:01:28,481 --> 00:01:30,640
Still, You might want to look up

33
00:01:30,640 --> 00:01:33,610
what the browser is support for a certain feature is

34
00:01:33,610 --> 00:01:35,120
if you're in doubt.

35
00:01:35,120 --> 00:01:37,050
And a great page that can help you

36
00:01:37,050 --> 00:01:40,490
with that is caniuse.com.

37
00:01:40,490 --> 00:01:45,150
Here, you can simply enter something like flexbox,

38
00:01:45,150 --> 00:01:50,150
and it will give you the CSS flexbox information page,

39
00:01:50,420 --> 00:01:53,807
where you see the browser support for this feature,

40
00:01:53,807 --> 00:01:57,020
and you see different browsers and different versions here.

41
00:01:57,020 --> 00:01:59,310
And you also, that's very convenient,

42
00:01:59,310 --> 00:02:02,933
get the market share off different browser versions.

43
00:02:03,830 --> 00:02:06,380
So here you have this global number,

44
00:02:06,380 --> 00:02:10,600
which is the usage of that specific version of that browser.

45
00:02:10,600 --> 00:02:12,080
And you see it differs between

46
00:02:12,080 --> 00:02:14,100
browsers and browser versions.

47
00:02:14,100 --> 00:02:16,220
And you've got an overall summed up

48
00:02:16,220 --> 00:02:19,409
support level here in the top right corner.

49
00:02:19,409 --> 00:02:21,890
So you, for example, see that flexbox

50
00:02:21,890 --> 00:02:24,097
has amazing support and there is nothing

51
00:02:24,097 --> 00:02:26,890
you have to worry about there in the end.

52
00:02:26,890 --> 00:02:29,300
You can, by the way, also always just directly

53
00:02:29,300 --> 00:02:32,550
search for, can I use, and then whatever

54
00:02:32,550 --> 00:02:35,200
you want to check, for example, CSS grid.

55
00:02:35,200 --> 00:02:38,770
And can I use should be one of the first results then,

56
00:02:38,770 --> 00:02:41,031
and you'll learn what the grid support is

57
00:02:41,031 --> 00:02:43,993
As you can see here, it's also very good.

58
00:02:44,920 --> 00:02:45,753
Now, as I mentioned,

59
00:02:45,753 --> 00:02:48,500
the features we taught you in his course have amazing

60
00:02:48,500 --> 00:02:52,081
support and you don't need to check every single CSS or

61
00:02:52,081 --> 00:02:55,220
JavaScript feature you are using.

62
00:02:55,220 --> 00:02:58,170
Typically, you know when you are using an

63
00:02:58,170 --> 00:03:01,020
agile level feature which is relatively new

64
00:03:01,020 --> 00:03:03,760
and that's when you might want to double-check

65
00:03:03,760 --> 00:03:06,050
the feature support.

66
00:03:06,050 --> 00:03:09,153
So for example, if I search for a CSS variables,

67
00:03:10,090 --> 00:03:12,700
and with that I mean the custom properties here,

68
00:03:12,700 --> 00:03:15,680
that is something where we could be unsure about,

69
00:03:15,680 --> 00:03:18,275
but we see even that has great support.

70
00:03:18,275 --> 00:03:20,510
Though it is worth pointing out,

71
00:03:20,510 --> 00:03:22,640
that for example Internet Explorer,

72
00:03:22,640 --> 00:03:26,330
no matter which version has no support for it.

73
00:03:26,330 --> 00:03:30,170
Now thankfully Internet Explorer is finally dying,

74
00:03:30,170 --> 00:03:33,035
it was alive way too long in various companies.

75
00:03:33,035 --> 00:03:36,570
And yes, some companies are still using it,

76
00:03:36,570 --> 00:03:37,907
but it's finally dying.

77
00:03:37,907 --> 00:03:41,050
And therefore typically you don't need to worry about

78
00:03:41,050 --> 00:03:43,290
supporting Internet Explorer.

79
00:03:43,290 --> 00:03:46,250
The Edge browser, which is now a standard browser

80
00:03:46,250 --> 00:03:50,193
on Windows has support for a custom properties for example.

81
00:03:51,210 --> 00:03:54,703
If for some reason, you know that some key visitors

82
00:03:54,703 --> 00:03:58,882
of your website will be using Internet Explorer though,

83
00:03:58,882 --> 00:04:01,560
you, for example, would not be able to use

84
00:04:01,560 --> 00:04:04,210
CSS variables and you would have to

85
00:04:04,210 --> 00:04:08,620
write CSS code that does not rely on that feature.

86
00:04:08,620 --> 00:04:11,620
Though I will also say that there are tools out there

87
00:04:11,620 --> 00:04:14,210
that can automatically transform your code

88
00:04:14,210 --> 00:04:17,570
to replace a certain feature you use in your code

89
00:04:17,570 --> 00:04:21,399
with cross-browser compatible code behind the scenes,

90
00:04:21,399 --> 00:04:24,343
and it's then the transformed file which you would deploy,

91
00:04:24,343 --> 00:04:26,800
but that's beyond the scope of this course

92
00:04:26,800 --> 00:04:28,810
and a bit more advanced, and as mentioned

93
00:04:28,810 --> 00:04:31,353
for most features, it's also not needed.

94
00:04:32,200 --> 00:04:35,190
Another great resource to use is MDN.

95
00:04:35,190 --> 00:04:38,180
For example if you're unsure about the fetch function,

96
00:04:38,180 --> 00:04:41,200
which be used for sending HTTP requests.

97
00:04:41,200 --> 00:04:43,800
Then if you search for fetch MDN,

98
00:04:43,800 --> 00:04:47,170
you will not just get a detailed explanation examples,

99
00:04:47,170 --> 00:04:50,339
but you also find a browser support table down there.

100
00:04:50,339 --> 00:04:52,690
And here we, for example, also see that

101
00:04:52,690 --> 00:04:55,488
Internet Explorer also doesn't support fetch.

102
00:04:55,488 --> 00:04:58,430
Other browsers do though.

103
00:04:58,430 --> 00:05:01,550
We could have also used can I use here by the way.

104
00:05:01,550 --> 00:05:05,140
So that is something you want to check for it because not

105
00:05:05,140 --> 00:05:08,400
all your website visitors will use the same browser and

106
00:05:08,400 --> 00:05:09,930
browser version as you do.

107
00:05:09,930 --> 00:05:12,455
And not all browsers support all the features,

108
00:05:12,455 --> 00:05:14,466
though the vast majority of features

109
00:05:14,466 --> 00:05:17,644
are supported by all important browsers.

110
00:05:17,644 --> 00:05:20,510
So it's not a huge issue these days anymore,

111
00:05:20,510 --> 00:05:22,123
but something to be aware of.