Name: How To Use Modern CSS Without Breaking Old Browsers
Uploaded: 2020-04-23T03:53:15.000Z
Duration: 8 min 59 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Transition words & phrases

Terrible CSS Because you have to support I e 11 and I eat 10.

So in this video, I'm gonna show you how you can write modern CSS without worrying about breaking older browsers.

And if you're interested in learning more about CSS, you can check out the full course.

I have linked down in the description below.

But first I want to talk about today's video sponsor, which is atlantic dot net hosting.

And they're gonna be giving you an entire year long free trial of their servers and these air pretty powerful servers.

They're more powerful than the servers you're gonna find with any other free trial out there.

And this free trial last an entire year, not just a single month.

On top of that, these servers have great data reliability and backup systems.

And on top of that, if you use the code, Kyle, you're going to get an additional $50 of credit.

So make sure you sign up for atlantic dot net using the link down in the description below.

Welcome back toe Web have simplified My name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner.

So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one, you know, 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.

But something important to note is I have a really old version of Firefox book then, and this version of Firefox does not support positions sticky.

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 right hand side, as you can see in chrome and then just a ton of text so that we can actually scroll are header.

And then if we look up here, we just have zero margin on the body.

Just to get our text looking like it does a background color of red, and the important stuff is that we have a position of sticky any top of zero.

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, we change us to fixed.

For example, you can see our content goes behind it also are closed.

Button here has a position of absolute, and then it should be in the top right hand corner of our header.

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.

As you can see here when we scroll, the header doesn't actually scroll with the page.

And because position sticky is not supported, this X doesn't actually have a parent to be positioned absolute inside of because this position sticky essentially does not exist in Firefox.

And as you can see, if we remove it, we get the same thing.

That's what we need is some form of fullback that the browser can use if we're in a browser that does not support position sticky.

And by far the easiest way to do this is just to add a second position property directly 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 here in the bottom and Firefox and everything still works just the same as before, in our example up here, where we're using chrome now.

The reason this actually works is because what happens is chrome reads this header code and it goes okay, background color red patting one R E M position relative, and then it sees position sticky, and it overwrites this position relative.

So essentially this position relative just does not even exist in the context of chrome.

But if we go down to the context of our Firefox browser, what happens is the same thing it says.

Background color, red padding, one R E M position relative, and then it gets to position sticky and it doesn't know what this is, so just ignores it.

Top zero with 80% and we still have that position relative for a bottom here, so that gives our position absolute apparent to be positioned inside of.

One thing you'll notice that's different between the 20 is that sticky?

While down here we don't have anything sticking to the top of our page.

Firefox toe have that sticky position at the top of the page.

In order to do that, we would need to do some fancy coating around the idea of position fixed.

And I'm gonna show you how to do that by using CSS feature queries.

And this is the with the real power lies and making things work in new browsers and old browsers alike.

So what we need to do is just right at supports, and this works very similar to a media query or rewrite out at supports.

In our case, it would have been media query for media queries 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 browsers supports position sticky.

So, for example, we could just change our body lips, background color to be blue.

And now, if we save, you're gonna notice In our top browser, where we have position sticky being supported, this turns blue.

But down in Firefox, core position sticky is not supported.

We can do a negation by saying we want to check everything that does not support sticky.

And now you could see everything that does not support.

Sticky has that blue color and everything that does support sticky turns white.

And we can even go a step further, combined this with, for example in.

And we want to see what supports position relative as well.

So, as you can see, chrome was gonna turn blue because it supports both position sticky and position relative, while Firefox only supports relative and if we changes to one, or we're gonna get both turning blue because chrome supports both, and Firefox supports relative position, which is one of the oars.

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're gonna check if we have a sticky position toe work with so we can say if we have sticky position, then what do we want to do?

And actually, we want to do here instead of checking for sticky position if we want to check for not sticky position because we want to apply special characteristics toe are Firefox browser.

So if we say we could see we have our Firefox browser selected, What we want to do is we're gonna take our header and we want to change our position here to be fixed.

We can remove this relative position up here and now if we save immediately, you're going to notice.

I just given his background color that our property has changed to fix.

It's going to stay at the top of our page, but our text is now showing up behind it.

Chrome is working the same because it just essentially ignores all of this, so it works just as it would before.

But how do we fix this issue with our text showing up behind well, really easy way to do that is to force our header to be a specific size so we can do is just remove are patting in here and just say that we're gonna have a specific height of, for example, 50 pixels just like that.

And then instead of our support property, if we know that we do not have sticky position support and we have to use fixed that we just need to tell her body toe, have a margin on the top to be equal to the height of our header of 50 pixels.

Now, if we say we essentially have the exact same experience in both our older browser as well as our newer browser, and all we had to do was a little bit of this feature query magic.

But you're gonna run into a problem that not all browsers supports the future.

Cree, namely Internet Explorer, does not support the feature query property, So what you need to do is essentially the opposite.

You need to check for when you have support for position sticky because Internet Explorer doesn't know how to read the at supports property.

So don't just ignore all of this, 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 the supports property.

So in order to get around working with Internet Explorer where it doesn't support this at supports, we need to have our normal state be essentially are fall back.

And then our feature query is going 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 gonna move up into here.

And then what we do is move our position sticky down into our supports property.

And then we're going to remove the margin top inside of our body.

And if we save, we get the exact same result.

And the great thing about this code is it actually going to work in Internet Explorer as well?

Because intern export is just going to ignore everything inside of this section and just use our fallback values because it doesn't know how to read at supports.

But the way we had our code before, if I just rewind this a little bit where we had this not property here again, Internet Explorer would ignore all of this so it wouldn't get all of those fallback values that is Why almost always when you're dealing with the at supports property, you want to make it so that you actually have your fallback values of here in your normal code and then in your at supports is where you're gonna pretty putting all of your modern CSS for doing sticky position or grid or whatever else you want to do in sight of that code.

And that's all it takes to use modern CSS without breaking older browsers.

If you enjoyed this video, make sure check out my full CSS course link down below and subscribe to the channel for more videos just like this.

 Thank you very much for watching and have a good day. 