-: [Jonas Schmedtman] 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 Omnifoot 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 any more,
but still I think it is 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 ten 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, 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
Can I Use dot 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 browser support is like
for CSS Grid, and well, we can see that all the
modern browsers are basically supported, 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 nonexistent 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.
All right, 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 these mobile browsers are also important to
keep in mind as more and more of the internet traffic
is shifting to mobile.
All right, and so up here, we can see basically that
CSS Grid is supported for around 95 percent 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 98 percent,
and if we added prefixing, then that would increase
to almost 100 percent.
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 backdrop 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, 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 will just use the property here,
and then I will explain what it does.
So backdrop filter...
And then, I'm going to use blur,
and let's say ten pixels.
All right, so now here on our page,
let's open this up and open navigation.
Well, 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 percent transparent.
And so let's turn that off and on again.
And so you see now that basically,
the content that is behind this element is blurred.
Right?
So let's inspect that.
So, where is that?
Right here.
So if I turn this off, then see what happens.
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, backdrop filter basically,
simply blurs everything that is behind that element.
All right? And here let's maybe adjust this
a little bit more.
Maybe like this.
And actually, I will leave it here at 60 percent,
and I will leave this one here on.
All right, but now, what happens in Safari?
So just to make sure, I'm going to reload it here.
All right, and as I open it,
now you see that it is actually not blurred.
Right? 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
dash, webkit, dash, backdrop filter.
So adding this dash webkit dash vendor prefix
and so if we tried it out again, then you see
it does work finally.
All right, 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.
Right?
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 it with 80 percent.
And well, 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,
yeah, maybe we can just use less blur.
So maybe, yeah, I think I like these five pixels.
Okay. 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,
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. [Chuckles]
So, this one is the one for Mozilla Firefox.
For Edge, well now it's also webkit,
because they use webkit now,
but for Microsoft Edge and for Internet Explorer,
it used to be dash M S dash
You also have Opera, where it is...
Oh, it is also webkit.
So now it's webkit,
but it used to be just dash O dash.
And so, if you see those vendor prefixes out there
in some other code 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 learned how to use vendor prefixes
to basically make a CSS property work
across multiple browsers.
In this case, it was the backdrop filter property.
Right? 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 gap 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 a little bit 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.
Okay? 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 users is using does not support Flexbox gap.
And so then you can use this property here
to basically add those gaps back with margins.
So that's the code that I 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.
Placing 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 the gap property together with Flexbox
so that now we don't have to waste any time
writing all of this code here ourselves.
All right, 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 four point eight rem
on the flex container,
so basically what that means is that we want a margin
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,
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.
Right?
And so that's where we now add the margin right
of 4 point 8 rem when the gap os not supported.
All right, 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 the style on all elements,
but not on the last child.
All right, 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.
All right, 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.
Right. So let's see that here, just very quickly.
So somewhere down here,
and indeed, here is the list,
where we have a gap of one point six
and flex direction column.
And so the child elements here are the list item,
and so there, we are now adding those one point six 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.
All right, 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 that's no longer gonna
be necessary.