Up next in 10
How To Use Modern CSS Without Breaking Old Browsers (1)
4K views
Feb 7, 2024
"How To Use Modern CSS Without Breaking Old Browsers" is a tutorial video that provides strategies for implementing modern CSS features while maintaining compatibility with older web browsers. The creator likely discusses techniques such as feature detection, progressive enhancement, and graceful degradation to ensure that websites remain functional and visually appealing across a wide range of browser versions. By offering practical tips and examples, the video aims to help developers leverage modern CSS capabilities without sacrificing compatibility with older browser versions. Viewers can expect to gain valuable insights into optimizing CSS usage for cross-browser compatibility while taking advantage of modern CSS features.
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
0:23
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 entire year-long free trial of their servers
0:32
And these are pretty powerful servers. They're more powerful than the servers you're going
0:36
to find with any other free trial out there, and this free trial lasts an entire year
0:41
not just a single month. On top of that, these servers have great data reliability and backup
0:47
systems, and on top of 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 project sooner
1:04
So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one
1:09
Now, to get started, I have Chrome open up on the top side of my screen, and I have Firefox open on the bottom side of my screen
1:16
But something important to note is I have a really old version of Firefox open
1:21
And this version of Firefox does not support position sticky. So as you can see on the left-hand side, I have some really simple code
1:29
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 all of our content shows up after it, unlike position fixed
1:59
If we change this to fixed, for example, you can see our content goes behind it
2:03
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:09
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 going to be a lot of
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 RAM, 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 zero 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 button
3:47
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:16
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:23
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 our 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
5:06
everything that does support sticky turns white, and we can even go a step further and combine
5:10
this with, for example, an and. We want to see what supports position relative as well
5:17
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 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:41
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 to check for not sticky position
5:50
because we want to apply special characteristics to our 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 to be fixed
6:05
We can remove this relative position up here. And now if we save, immediately you're going to notice
6:10
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
6:20
all of this, so it works just as it would before. But how do we fix this issue with our text showing
6:25
up behind? 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
6:34
specific height of for example 50 pixels just like that 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 explore, 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:17
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
7:29
that support 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
7:39
be essentially our fallback, and then our feature query is going to contain all of our
7:43
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
7:54
our 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 as
8:07
well because Internet Explorer is just going to ignore everything inside of this section and
8:11
just use our fallback values because it doesn't know how to read at supports
8:16
But the way we had our code before, if I just rewind this a little bit, where we had this
8:20
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 at supports is where you're going to put your at supports, is where you're going to be putting all of your modern CSS for doing sticky position or grid or whatever
8:41
else you want to do inside of that code. 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
#Skins
# Themes & Wallpapers
#Software