Up next in 10
How To Use Modern CSS Without Breaking Old Browsers
200 views
Feb 7, 2024
"How To Use Modern CSS Without Breaking Old Browsers" is an informative tutorial video aimed at web developers who want to utilize modern CSS features while ensuring compatibility with older web browsers. The video explores techniques and best practices for implementing advanced CSS properties and functionalities, such as grid layouts, flexbox, and custom properties, while gracefully degrading for browsers that lack support for these features. Viewers learn strategies for feature detection, fallbacks, and progressive enhancement, allowing them to create websites that provide a great experience across a wide range of browsers, regardless of their level of support for modern CSS. Whether you're a beginner or an experienced developer, this video offers valuable insights into balancing modern design techniques with backward compatibility in web development projects.
View Video Transcript
0:00
Are you tired of writing terrible CSS because you have to support iE11 and iE10
0:05
I know I am, so in this video I'm going to show you how you can write modern CSS
0:10
without worrying about breaking older browsers. And if you're interested in learning more about CSS, you can check out the full course
0:16
I have linked down in the description below. Let's get started now. But first, I want to talk about today's video sponsor, which is atlantic.net hosting
0:28
and they're going to be giving you an interesting, an entire year-long free trial of their servers
0:33
And these are pretty powerful servers. They're more powerful than the servers you're going to find with any other free trial out
0:38
there, and this free trial lasts an entire year, not just a single month
0:43
On top of that, these servers have great data reliability and backup systems, and on top of
0:48
that, if you use the code Kyle, you're going to get an additional $50 of credit
0:52
So make sure you sign up for atlantic.net using the link down in the description below
0:56
Welcome back to WebDev Simplified. My name's Kyle and my job is to simplify the web for you so you can start building your dream
1:03
project sooner. So if that sounds interesting, make sure you subscribe to the channel for more videos just
1:09
like this one. Now to get started, I have Chrome open up on the top side of my screen and I have Firefox
1:15
open on the bottom side of my screen, but something important to note is I have a really old
1:19
version of Firefox open. And this version of Firefox does not support position sticky
1:26
So, as you can see on the left-hand side, I have some really simple code. I just have a header, which contains some text and a close button, which should be on the
1:33
right-hand side, as you can see in Chrome, and then just a ton of text so that we can actually
1:37
scroll our header. And then if we look up here, we just have zero margin on the body
1:42
Our header has a padding of one REM just to get our text looking like it does, a background
1:46
color of red, and the important stuff is that we have a position of sticky and a top of zero
1:52
So when we scroll in Chrome, you see that this is going to be stuck to the top of our page, but
1:55
all of our content shows up after it, unlike position fixed. If we change this to fixed, for example, you can see our content goes behind it
2:02
Also, our close button here has a position of absolute, and then it should be in the top right-hand corner of our header
2:08
As you can see in Chrome it shows up in the correct position But if we look down here in Firefox this is not showing up inside of our header And that is because Firefox in this old version does not support the sticky position
2:22
As you can see here, when we scroll, the header doesn't actually scroll with the page
2:26
And because position sticky is not supported, this X doesn't actually have a parent to be positioned
2:31
absolute inside of, because this position sticky essentially does not exist in Firefox
2:36
And as you can see, if we remove it, we get the same thing in Chrome. So what we need is some form of fallback that the browser can use if we are in a browser
2:43
that does not support position sticky. And by far the easiest way to do this is just to add a second position property directly
2:51
above the property that we want to overwrite in modern browsers. And now if we save, you can see we fixed the close button for our position header down
2:59
here in the bottom and Firefox, and everything still works just the same as before in our
3:04
example up here where we're using Chrome. Now the reason this actually works is because what happens is that we're just, we're
3:08
happens is Chrome reads this header code and it goes, okay, background color red, padding one
3:12
REM, position relative, and then it sees position sticky, and it overwrites this position
3:17
relative. So essentially, this position relative just does not even exist in the context of
3:23
Chrome. But if we go down to the context of our Firefox browser, what happens is the same
3:27
thing, it says background color red, padding one REM, position relative, and then it gets to
3:32
position sticky and it doesn't know what this is, so it just ignores it. It essentially doesn't
3:36
exist, top 0 with 80%, and we still have that position relative for our bottom here
3:42
So that gives our position absolute apparent to be positioned inside of, and now our X
3:47
button works properly. One thing you'll notice that's different between the 2O is that sticky makes this stick
3:52
to the top of our page, while down here we don't have anything sticking to the top of our page
3:57
So what if we actually wanted Firefox to have that sticky position at the top of the page
4:01
In order to do that, we would need to do some fancy coding around the idea of position fixed
4:06
And I'm going to show you how to do that by using CSS feature queries
4:10
And this is where the real power lies in making things work in new browsers and old browsers alike
4:15
So what we need to do is just write at supports. And this works very similar to a media query where we write out at supports
4:22
In our case it would have been media query for a media query And inside the parentheses we just put what property we want to check In our case we want to check to see if this browser supports position sticky If the browser supports position sticky everything inside of here will run
4:38
So for example, we could just change our body, background, color to be blue
4:48
And now if we save, you're going to notice in our top browser where we have position sticky being supported, this turns blue, but down in front of the screen
4:54
Firefox, where position sticky is not supported, it stays white. We can do a negation by saying we want to check everything that does not support sticky
5:02
and now you can see everything that does not support sticky has that blue color, and everything that does support sticky turns white
5:08
And we can even go a step further and combine this with, for example, an and. We want to see what supports position relative as well
5:16
So as you can see, Chrome is going to turn blue because it supports both position sticky
5:20
and position relative, while Firefox only supports relative. And if we change this to an oar, we're going to get both turning blue because Chrome supports
5:29
both and Firefox supports relative position, which is one of the oars
5:33
So that's kind of a breakdown of how this support feature query works. But in our case, what we want to do is we want to check if we have a sticky position to work with
5:42
So we can say, if we have sticky position, then what do we want to do? And actually, what we want to do here, instead of checking for sticky position, we want
5:49
to check for not sticky position because we want to apply special characteristics to our
5:53
Firefox browser. So if we save, we can see we have our Firefox browser selected
5:58
What we want to do is we want to take our header and we want to change our position here
6:03
to be fixed. We can remove this relative position up here. And now if we save, immediately you're
6:09
going to notice, if I just get rid of this background color, that our property is changed to fix
6:13
It's going to stay at the top of our page, but our text is now showing up behind it. Everything in Chrome is working the same because it just essentially ignores all of this
6:21
so it works just as it would before. But how do we fix this issue with our text showing up behind
6:26
Well, a really easy way to do that is to force our header to be a specific size
6:30
So what we can do is just remove our padding in here and just say that we're going to have a specific height of, for example, 50 pixels, just like that
6:38
And then inside of our support property if we know that we do not have sticky position support and we have to use fixed then we just need to tell our body to have a margin on the top to be equal to the height of our header of 50 pixels
6:52
Now if we say we essentially have the exact same experience in both our older browser, as well as our newer browser
6:58
and all we had to do was a little bit of this feature query magic. But you're going to run into a problem
7:04
that not all browsers support the feature query, namely, Internet Explorer does not support the feature query property
7:11
So what you need to do is essentially the opposite. You need to check for when you have support for position sticky
7:18
because Internet Explorer doesn't know how to read the AtSupports property, so it'll just ignore all of this
7:22
So this code will not work in Internet Explorer. But it is going to work in browsers such as Firefox and other browsers that support
7:30
the supports property. So in order to get around working with Internet Explorer
7:35
where it doesn't support this AtSupports, We need to have our normal state be essentially our fallback, and then our feature query is going
7:42
to contain all of our special position sticky code. So let's just move our margin top up here into our normal code, and our position fixed is
7:49
going to move up into here, and then what we do is move our position sticky down into our
7:55
supports property, and then we want to remove the margin top inside of our body
8:00
And if we save, we get the exact same result. And the great thing about this code is it's actually going to work in Internet Explorer
8:06
as well because Internet Explorer is just going to ignore everything inside of this section
8:11
and just use our fallback values because it doesn't know how to read at supports
8:15
But the way we had our code before, if I just rewind this a little bit, where we had this
8:19
not property here, again, Internet Explorer would ignore all of this so it wouldn't get all
8:24
of those fallback values. That is why almost always when you're dealing with the at supports property, you want to
8:30
make it so that you actually have your fallback values up here in your normal code
8:34
and then in your ad supports is where you're going to be putting all of your modern CSS
8:38
for doing sticky position or grid or whatever else you want to do inside of that code
8:44
And that's all it takes to use modern CSS without breaking older browsers
8:48
If you enjoyed this video, make sure to check out my full CSS course, link down below
8:53
and subscribe to the channel for more videos just like this. Thank you very much for watching and have a good day
#Programming
#Software
#Web Design & Development