Welcome back.
In this video, we're going to be talking about season three now, just like with ASML and all five,
success is a standard that constantly evolves to adapt to new demands of websites.
So CSFs three is the latest evolution of success, where we've added new properties and new features
so that we can make our design even better.
So if you remember in our diagram over here, all these browsers have different developers, different
teams that work on implementing their features.
Now, in an ideal world, everybody agrees on what success does.
And when new features and new properties are added, everybody implements them at the same time.
But that's simply not the case.
Some browsers might work with some property, some might not, because they haven't gotten around to
making it work.
So let's go back to our website.
Now let's play with one of my favorite success, three properties.
How cool would it be if when we hover over these pictures, the picture moves?
Well, with corsetry, they've introduced something called transition, and if I do all one second and
I'll explain to what that does in one second image hover.
So this should be familiar where when we hover, we want the image to transform.
This is a new property as well.
And we'll say scale.
One point one, so let's see what happens, I refresh.
My images are now moving on hover.
Isn't that cool?
What these properties do is say that I want the image to transition when an action is taken upon it
and I want all the properties to transition over one second.
And what's that transition going to be?
Well, when I hover, I wanted to transform.
By a scale of one point one, so it's essentially growing if I change this to four seconds and I refresh.
Well, now takes four seconds for the image to scale.
You can see over here I'm going to change this back to one second just because it looks better that
way.
If I make this website full screen, you see that we now have a beautiful effect for our image gallery.
And there is there's also another property called animation, which you can look at on your own.
But again, history has brought in a lot of these new properties to make websites even more dynamic
than they are now.
But there is a little caveat to using such properties, and that is you want to make sure that each
browser has implemented a new feature.
So if I go to one of our favorite websites, three schools, they have a browser support reference.
And here you can look at all the success to make sure that browsers support whatever property you want
to use.
So if we go to transition, we see that it is supported by all the latest browsers.
But you also see that if we go to something like User Select, they have this Ms.
Moore's Web kids line over it.
And if we scroll all the way down, it'll show you that it is supported by Internet Explorer with prefix.
Ms.
What does that mean?
Well, these are browser prefixes and you'll see them every once in a while.
What it is, is these are new features of success that haven't fully been implemented by the browsers,
and you want to use a prefix to make sure that they work as an experimental feature in the browser.
Let me explain what that means.
If I wanted to add a, let's say, a box ShadowStats, that means kind of making this look 3D and having
a shadow underneath the edge over here, previously I had to do something like this where I put Box
Shadow and you can read into the property to see what I'm about to do.
But I'm going to do four pixels, four pixels, five pixels, and then the color, which is a bit of
a gray.
So if I do this and refresh, well, that looks nice.
And my browser is the new Chrome, so it has this feature.
But a few years ago when Black Shadow was first introduced, you had to do something like this.
Copy and paste this, and this makes sure that it works on the Mozilla browser, and then you also had
Ms.
Which made sure that it works on Internet Explorer, you had.
What kit, which made sure that it works on safari and chrome.
And then finally, you also had oh.
Which made it work on the opera browser, and then he also had to still mention the box shadow without
the prefix is at the bottom.
So now if any of these browsers don't support Borke Shadow, well, they have these prefixes so that
it should work.
And Bug Shadow, it has been some time now, so you don't need to do this anymore.
But there is one great way of seeing if a certain property still needs browser prefixes, and that is
using something like this, which I will leave for you so you can check it out.
Another thing I wanted to show you is, can I use so can I use dotcom is a great resource to see anything
that you might want to try out.
So if I type in here, access transition, you'll see access.
Three transitions are supported in all these browsers, except we have one operator, many, and it
says it's two point sixty three percent of the global usage.
So if you use access three transitions, two point six three percent of the population might not be
able to see it.
Now, whether that is your user base or not, you can kind of decide what the tradeoffs are.
But this is a great thing to use.
And if we use something like flex box, well, we see that flex box has all support.
So it should it shouldn't be a problem for you to use it.
OK, let's go back to this and just finish up this website to make it look nice.
So I don't like that there's space here, ideally, this is all the way to the left.
If I do.
Margin zero pixels and I refresh that actually doesn't change much because sometimes browsers have their
own default margins.
So the way to get around it is to.
Do margin zero for the body, so margin.
Zero pixels, let's save and refresh.
Perfect.
Now we have this all the way to the left.
OK, but we do want a bit of a buffer at the top.
So I'm going to add margin top.
And we'll do 10 pixels, save and refresh, perfect, now we have a beautiful website, and it didn't
really take us much.
We just wrote a few lines of CSFs, a few lines of HTML.
And look what we have.
We'll see in the next one.