0:08
You're watching CSS for Beginners Lesson 51 and in this video we're going to take a look
0:12
at browser support. So before we dive deep into browser support, which is a really important topic by the way
0:20
I just want to ask you, how do we view websites? And yeah, it's a simple answer
0:25
We view websites typically in a browser, namely one of these ones here
0:30
These are the most popular ones, so Safari, Firefox, Opera, Chrome, or Internet Explorer
0:36
Now if I'm viewing a website, I'll typically just use one of these, Chrome I'll use
0:40
But if I'm making a website, if I'm coding one up, then before I put it live, I'll test
0:46
it thoroughly in each one of these because different people use different browsers
0:51
So they'll be viewing my website in a different browser than me. Now each of these browsers have different standards and different levels of support
0:59
when it comes to CSS. Some of them support everything, some of them support most things, and some of them don't
1:06
support a lot of things. So you have to test each browser carefully to make sure that all of your CSS looks good
1:12
in each browser. And if it doesn't, then we have to provide fallback options or other ways of getting
1:19
around that so that people viewing your website have a good experience of it
1:24
So the first way we do that is by simple fallback options
1:29
Now I've talked about fallback options briefly when we've looked at gradients, but not in
1:35
any depth. Now a fallback option is something that you provide to a browser should a certain CSS
1:42
feature not work. And we did this with gradients. We said we had our root here, and we said we wanted a linear gradient
1:48
Now a fallback option would be this thing here, the background color
1:52
Now because not all browsers out of the box support this linear gradient feature, if this
2:01
thing here wasn't there, if the browser didn't support this, then it wouldn't have any background property
2:06
However, because this is here above it, then it will fall back to the white colored background
2:12
So the CSS is a cascade, remember. It comes from the top to bottom, so it comes down here
2:17
It finds this background property in this rule, and it colors it white. Then it comes down here, and it finds another background property
2:23
Now if it supports this linear gradient, then this background property will override this
2:28
If it doesn't support it, then it won't override this, and this will remain
2:32
So that is the fallback option, OK? So that's one way of getting around browser inconsistencies
2:37
Now that might not always work. So you want to check whether certain browsers can use certain effects or certain features sometimes
2:49
I'm going to recommend caniuse.com. So you've probably seen this website a few times because I've been on it a few times
2:56
during this playlist. Now it's a dead good website. It tells you whether certain features are available in certain browsers, and that's
3:03
not just for CSS but also for HTML5, JavaScript, et cetera. So it's really good
3:09
All you need to do is search for your property up here. We'll put gradient in, and then it comes up with all the browsers here and whether it
3:16
can support it. So green means it can support it. Yellow, which isn't here, means it partially supports it
3:22
And red means it doesn't support it. So you can see that everything supports it pretty much except for these here and this
3:28
So Internet Explorer 8 and 9, they don't support it. And what's cool is it gives you the global browser usage
3:34
So if this is really low, then the fact that it's not supported may not matter to you
3:40
If it's less than 1% is my general kind of rule. If the global usage is less than 1%, then that's fine by me
3:49
However, if it's more than 1%, you may want to come up with some alternative
3:54
But this is a really cool website to find out whether browsers support those features
4:00
And it also gives you more notes down here if you want to read about it, some sub-features
4:05
and resources to the W3 specification and other links here. So it's a really cool website
4:12
This is my first stop if I come across a new CSS feature that I go to to check that
4:16
I can use it in all the browsers. The next thing I want to show you is this please.io forward slash play
4:25
And this is to give you a vendor prefix code. So we saw before that gradients in some browsers require a vendor prefix
4:36
And a vendor prefix is just a bit of experimental code used by certain browsers to allow those
4:42
features to be used. So for example, the WebKit vendor prefix here, that is so that the linear gradient can be
4:50
used within WebKit browsers such as Chrome. Because out of the box, it may not be supported
4:55
So we use this experimental syntax here so that it can be used within Chrome
5:01
And then after a while, Chrome may adopt it natively and we no longer need to use this
5:06
and it will pick up this. So what I've done here is I've just put this little A class here
5:11
I've given it a background of linear gradient. And then over here, it's converted it into the code that I need for it to be supported
5:18
in all browsers. So it's added this WebKit vendor prefix in. So I just copy and paste this now and pop that back in my code
5:25
So that's a really cool website for generating vendor prefixed code. And the last thing I want to show you is a little bit more advanced
5:32
It's Modernizr, which is a JavaScript library. And it detects HTML5 and CSS3 features within the user browser
5:41
And say you have certain features within that browser that you want to use
5:45
If it enables those features in the browser, then you can use them
5:49
If not, then you can use this JavaScript library to provide alternative features and fallback options
5:57
So that's quite cool. I'm not going to go into this in too much detail because it's beyond the scope of this course
6:01
But by all means, get out there and try this on your own because it is quite cool
6:06
So that's about it for this lesson. If you have any questions whatsoever about browser support, feel free to comment down below
6:14
I'll answer all of those. Otherwise, if you enjoy these videos, please subscribe, like, or share
6:21
And I'll see you guys in the next video
