All language subtitles for 143 Browser Support and Fixing Flexbox Gap in Safari.en_US

So with the latest effects

that we just implemented using JavaScript,

we can now basically consider that the design

and planning step of our project is finished.

So what that means is that now we're ready

to move on to the next step.

And that next step is the test and optimize phase,

which remember includes these points here.

So just like we talked about before

at the beginning of our Omnifood project.

And so over the next few lectures,

we are going to talk about some of these points here

and starting in this one,

we will talk about browser support.

Now browser support used to be a hugely important topic

some years ago, but fortunately not so much anymore,

but still I think that it's worth taking a couple of minutes

to talk about browser support now.

And when I say browser support,

what I mean is basically how different web browsers

support different CSS properties.

So back in the day, like some 10 years ago,

there used to be a ton of inconsistencies between browsers.

So our websites would look completely different

in different browsers.

And that was simply because some browsers

didn't implement some of the modern properties

that we were using at the time.

Now those days are fortunately over

at least for the most important CSS properties

and if we consider that our users

are usually using the latest browser versions.

However, there will, of course, always be some users

that are left behind using some very old browsers,

like some old Internet Explorer

or are stuck on some older Safari version.

And so there are some of the things

that we use on our website might not work as we intend.

So to help us developers with that,

there is a very, very handy tool

that we can use to basically see

how different CSS properties

are supported by different browsers.

So let's check that out and it is called caniuse.com.

And so here we can input any CSS property

that we want and let's try, for example,

one of the more modern things that we are using,

which is CSS grid.

So let's try to see what the browser support is like

for CSS grid, and well, we can see

that all the modern browsers

basically support it, of course.

So Microsoft Edge, Firefox all the way back to version 52,

which was released all the way in 2017, you can see there.

However, if some user still uses

one of these old versions here,

then they will not be able to basically see our layout.

However, if one of our users

is using this very old Firefox version here,

then they will basically not be able

to see anything that we did with CSS grid.

And so our layout will basically be non-existent to them

because we built our entire layout with CSS grid

and if that doesn't exist,

then all our elements will basically just appear

one after another.

Here, we also have this older Microsoft Edge version,

which was also released way back

and of course the even older Internet Explorers.

So the Internet Explorers,

they were always very big problems for web designers

and web developers.

So supporting them used to be really a nightmare

and so we can be really glad that those days are over.

So right now, basically the main browsers

that matter to us are Microsoft Edge,

Firefox, Chrome and Safari.

And so if all the properties that we use

are supported in these four browsers,

then everything is fine and they should also be supported

on their mobile versions.

So Safari on iOS supports basically the same thing

as the regular Safari

and the same thing with Chrome for Android here.

So this mobile browsers are also important to keep in mind

as more and more of the internet traffic

is shifting to mobile.

And so up here,

we can see basically that CSS grid

is supported for around 95% of all users.

And so that's quite good.

And so therefore that's why we can right now

choose to use CSS grid without any problem.

And the same is true for Flexbox.

So here it has even better support at a 98%

and if we added prefixing,

then that would increase to almost 100%.

Now we didn't talk yet about what prefixing is.

And so to talk about that, let me show you another example.

So this is a CSS property that we haven't used yet.

So back drop filter,

and this is quite a modern one

where you see that, for example,

Firefox is not even supporting it at all.

Now, Chrome supports it without any problem

but then here you have this note here

and what that note, so this yellow thing here, means,

is that this property is only supported in Safari

with the WebKit prefix.

So let's actually try that out.

So using this backdrop filter property,

so let's go back here and in our queries,

let's go to our main nav here.

So, we'll just use the property here

and I will then explain what it does.

So backdrop filter,

and then I'm going to use a blur

and let's say 10 pixels.

So now here on our page,

let's open this up and open navigation.

While now we cannot really see anything.

So let's actually make this here a bit darker.

So a little bit less transparent and maybe even more so,

let's make it just 50% transparent

and so let's turn that off and on again.

And so you'll see now that basically,

the content that is behind this element is blurred.

So let's inspect that.

So where is that, right here?

So if I turn this off, then see what happens.

So you saw that?

Now it's no longer blurred, but this,

it is very nicely blurred and this is a very modern

and really, really cool effect

that we can now create just using CSS.

So again, the backdrop filter basically simply blurs

everything that is behind that element.

Alright, here let's maybe adjust this a little bit more,

maybe like this,

and actually I will leave it here at 60%

and I will leave this one here on.

All right, but now watch what happens in Safari.

So just to make sure I'm gonna reload it here.

All right, and as I open it,

now you see that it is actually not blurred.

So a different behavior, than in Google Chrome.

And so that makes sense

because here we have this information

that it is only supported with that WebKit prefix.

So let's use that prefix in practice

and so basically what we need to do

is to duplicate this line here.

And then in the first occurrence,

we can say -WebKit-backdrop filter.

So adding this -WebKit- then their prefix.

And so if we tried it out again,

then you see it does work finally.

But also let's test it in Firefox

where it should not be working.

So here we see that indeed

it is not supported in any version right now.

So let me open up Firefox

and let's then copy paste that here.

Okay, let's make it smaller and let's see.

And yeah, just as expected,

the background is not being blurred.

And so what this means is that right now,

if we have a user that is visiting our page,

using Firefox, they will not really be able

to see our navigation links here.

And there's actually nothing we can do about that.

So the only thing that we can do

instead of being able to fix that blur

is to simply put the background color here,

back to being a little bit less transparent.

So let's try with 80% and while that's still not so nice.

And so here we are really trying to adapt our design

to all different browsers now.

So this is what browser support is all about.

So here it does look maybe acceptable now,

but here that blurring effect has almost been gone now

because there is almost no transparency,

but well, it is important that our Firefox users

can also use the page

and so I'm gonna leave it like this.

Maybe it would fix it if we reduced the blur a little bit.

So basically zero pixels means there is no blur at all.

And yeah, maybe we can just use less blur.

So maybe, yeah, I think I like these five pixels.

And so, yeah,

this is the prefix here that we use for Safari

and for Google Chrome,

but there are other prefixes for other browsers.

For example, for the appearance,

yeah, so for the appearance property,

which basically allows us to easily style form elements,

we might use this vendor prefix here

of moz or moz or whatever (laughs).

So this one is the one for Mozilla Firefox.

For Edge now it's also WebKit because they use WebKit now,

but for Microsoft Edge and for Internet Explorer,

it used to be -MS-.

You also have Opera where it is, oh, it's also WebKit.

So now it's WebKit but it used to be just -O-

and so if you see those vendor prefixes out there

in some other codes that you analyze,

then now you know what they mean.

All right, so we learned a little bit

what browser support is.

We also learned how we can use this very important tool here

to check how well a certain CSS property

that we might want to use is supported across all browsers.

And we also learnt how to use vendor prefixes

to basically make a CSS property work

across multiple browsers.

And in this case it was the backdrop filter property.

However, there is still something very important

that we need to do,

which is to fix the gap property in Flexbox

for the Safari browsers.

So up until very recently at the beginning of 2021,

Safari did not support the usage

of the get property in Flexbox only in CSS grid,

but we did use gap all the time using Flexbox.

And so if there is some like Safari browser,

especially on an older iPhone,

they will not be able to see our layout as expected.

So Flexbox will not really work for them,

or at least all the spacing will be gone.

So the page is gonna look terrible for them

and so we should definitely fix that.

So I already included some code for that here

in this JavaScript file.

And so for that, we have basically this function here.

So this is kind of a hack that I found online

and I'm not really gonna go into it.

But what it does is that if a certain browser

does not support the gap property for Flexbox,

it will add this class here to the body.

And so I advise you,

for at least in the next couple of years,

to always include this function here in your code,

which again, will add this property here to your body

in case that any of the browsers

that any of your user is using does not support Flexbox gap.

And so then you can use this property here

to basically add those gap back with margins.

And so that's the code that they have down here.

So let me copy all of this here.

So everything that is in this comment,

because this is not JavaScript code, it is actually CSS.

So I'm copying it now

and I will put it here at the end of the queries.

Pasting that there, let me also get some comment block here.

So fixing Safari Flexbox gap,

so basically what I did here was to write

this entire code here,

for every instance where we use to get property

together with Flexbox so that now,

we don't have to waste any time

writing all of this code here ourselves.

So let me just quickly go through one or two examples,

just so you see how you could do it on your own.

So this one here is in the main nav list.

So let's move that here actually.

So here we have a gap of 4.8 rem on the flex container

and so basically what that means

is that we want a margin right on all the flex items.

So the flex items of the main nav list

are of course, the li elements.

So just so you can see it.

So that's here in the header that we closed.

So main nav list and the direct children,

so the flex items are these ones here.

And so that's where we now at the margin right of 4.8 rem

when the gap is not supported.

And we want to add that, of course not on all of them.

And so here, I'm using that trick that I showed you earlier.

So basically applying this style on all elements,

but not on the last child.

But of course, we only want this style here to apply

when the no Flexbox gap class is present in the body.

So basically being a parent element of this main nav list.

And so again, this class here is coming from JavaScript.

So right here in case that Flexbox

does not support the gap property.

So unfortunately I cannot show you this in practice

because my Safari here does now already support gap,

but up until like one month ago, it didn't work.

So this is how we do it here for the default Flexbox,

let's say, so margin right

when we are using Flexbox horizontally,

but sometimes remember,

we change the flex direction to column.

And so in those situations we use margin bottom,

just like, for example, in the list,

which we made vertical.

So let's see that here just very quickly.

So some were down here and indeed here is the list

where have a gap of 1.6 and flex direction column.

And so the child elements here are the list item

and so there we are now adding those 1.6 rem

as a margin to the bottom on all of them,

except again, the last child.

Then I also needed to do that in the media queries

in some situations.

And so here, I got these two exact same media queries

that we also have already in the top there.

And by the way,

writing the same media query twice,

basically, is absolutely no problem at all.

So that's actually something that we do all the time,

while in this project, we actually didn't do it,

but that is completely possible as well.

So simply both of them will apply at the same time.

And so, yeah,

I think that's all I had to tell you about browser support.

So make sure to understand this part here

and to do the similar thing

if you want to use the gap property together with Flexbox

at least for the next couple of years, at least.

So maybe in 2024 or 25,

they're no longer gonna be necessary.