Up next in 10
CSS Tutorial For Beginners 51 - Browser Support
1K views
Feb 7, 2024
This video provides valuable insights into browser support for CSS, particularly aimed at beginners in web development. Viewers will gain an understanding of the importance of considering browser compatibility when writing CSS code. The tutorial likely covers strategies for handling differences in rendering CSS across various browsers, along with tools and resources to help ensure a consistent user experience. It serves as an essential guide for beginners looking to create websites that function seamlessly across different browsers.
View Video Transcript
0:00
Yo, what's up guys
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, it finds this background property in this rule, and it colors it white
2:20
Then it comes down here, and it finds another background property. 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. 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:48
So to do that, 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, etc. 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. Green means it can support it. Yellow, which isn't here, means it partially supports it, and red means it doesn't support it
3:25
So you can see that everything supports it pretty much except for these here and this. So Internet Explorer 8 and 9, they don't support it
3:31
And what's cool is it gives you the global browser usage. 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 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 I
4:16
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:56
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:12
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:42
So let's say you have certain features within that browser that you want to use. 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:20
And I'll see you guys in the next video
#Skins
# Themes & Wallpapers