1
00:00:01,480 --> 00:00:02,290
Welcome back.

2
00:00:02,830 --> 00:00:09,370
In this video, we're going to be talking about season three now, just like with ASML and all five,

3
00:00:09,670 --> 00:00:17,230
success is a standard that constantly evolves to adapt to new demands of websites.

4
00:00:18,260 --> 00:00:26,030
So CSFs three is the latest evolution of success, where we've added new properties and new features

5
00:00:26,030 --> 00:00:29,080
so that we can make our design even better.

6
00:00:30,420 --> 00:00:37,800
So if you remember in our diagram over here, all these browsers have different developers, different

7
00:00:37,800 --> 00:00:42,080
teams that work on implementing their features.

8
00:00:42,720 --> 00:00:48,270
Now, in an ideal world, everybody agrees on what success does.

9
00:00:48,420 --> 00:00:55,160
And when new features and new properties are added, everybody implements them at the same time.

10
00:00:55,230 --> 00:00:57,420
But that's simply not the case.

11
00:00:57,630 --> 00:01:04,710
Some browsers might work with some property, some might not, because they haven't gotten around to

12
00:01:04,710 --> 00:01:05,640
making it work.

13
00:01:06,580 --> 00:01:08,710
So let's go back to our website.

14
00:01:10,900 --> 00:01:15,400
Now let's play with one of my favorite success, three properties.

15
00:01:15,760 --> 00:01:21,280
How cool would it be if when we hover over these pictures, the picture moves?

16
00:01:22,230 --> 00:01:30,090
Well, with corsetry, they've introduced something called transition, and if I do all one second and

17
00:01:30,090 --> 00:01:36,220
I'll explain to what that does in one second image hover.

18
00:01:36,330 --> 00:01:42,300
So this should be familiar where when we hover, we want the image to transform.

19
00:01:42,300 --> 00:01:44,100
This is a new property as well.

20
00:01:44,250 --> 00:01:46,350
And we'll say scale.

21
00:01:47,500 --> 00:01:50,860
One point one, so let's see what happens, I refresh.

22
00:01:54,510 --> 00:01:57,150
My images are now moving on hover.

23
00:01:57,600 --> 00:01:58,230
Isn't that cool?

24
00:01:59,940 --> 00:02:07,350
What these properties do is say that I want the image to transition when an action is taken upon it

25
00:02:07,650 --> 00:02:11,460
and I want all the properties to transition over one second.

26
00:02:12,510 --> 00:02:14,790
And what's that transition going to be?

27
00:02:14,820 --> 00:02:17,550
Well, when I hover, I wanted to transform.

28
00:02:18,780 --> 00:02:25,690
By a scale of one point one, so it's essentially growing if I change this to four seconds and I refresh.

29
00:02:26,520 --> 00:02:31,050
Well, now takes four seconds for the image to scale.

30
00:02:33,320 --> 00:02:37,910
You can see over here I'm going to change this back to one second just because it looks better that

31
00:02:37,910 --> 00:02:38,150
way.

32
00:02:38,780 --> 00:02:46,700
If I make this website full screen, you see that we now have a beautiful effect for our image gallery.

33
00:02:46,880 --> 00:02:52,610
And there is there's also another property called animation, which you can look at on your own.

34
00:02:52,820 --> 00:03:00,470
But again, history has brought in a lot of these new properties to make websites even more dynamic

35
00:03:00,470 --> 00:03:01,280
than they are now.

36
00:03:02,250 --> 00:03:10,980
But there is a little caveat to using such properties, and that is you want to make sure that each

37
00:03:10,980 --> 00:03:14,610
browser has implemented a new feature.

38
00:03:15,660 --> 00:03:22,560
So if I go to one of our favorite websites, three schools, they have a browser support reference.

39
00:03:22,860 --> 00:03:29,430
And here you can look at all the success to make sure that browsers support whatever property you want

40
00:03:29,430 --> 00:03:29,850
to use.

41
00:03:30,510 --> 00:03:37,860
So if we go to transition, we see that it is supported by all the latest browsers.

42
00:03:37,890 --> 00:03:43,140
But you also see that if we go to something like User Select, they have this Ms.

43
00:03:43,140 --> 00:03:45,830
Moore's Web kids line over it.

44
00:03:46,440 --> 00:03:53,070
And if we scroll all the way down, it'll show you that it is supported by Internet Explorer with prefix.

45
00:03:53,080 --> 00:03:53,570
Ms.

46
00:03:53,760 --> 00:03:54,510
What does that mean?

47
00:03:55,140 --> 00:04:00,120
Well, these are browser prefixes and you'll see them every once in a while.

48
00:04:01,100 --> 00:04:08,450
What it is, is these are new features of success that haven't fully been implemented by the browsers,

49
00:04:08,600 --> 00:04:16,250
and you want to use a prefix to make sure that they work as an experimental feature in the browser.

50
00:04:16,430 --> 00:04:17,900
Let me explain what that means.

51
00:04:19,940 --> 00:04:25,910
If I wanted to add a, let's say, a box ShadowStats, that means kind of making this look 3D and having

52
00:04:25,910 --> 00:04:34,280
a shadow underneath the edge over here, previously I had to do something like this where I put Box

53
00:04:34,280 --> 00:04:38,300
Shadow and you can read into the property to see what I'm about to do.

54
00:04:38,300 --> 00:04:45,260
But I'm going to do four pixels, four pixels, five pixels, and then the color, which is a bit of

55
00:04:45,260 --> 00:04:45,690
a gray.

56
00:04:46,490 --> 00:04:51,290
So if I do this and refresh, well, that looks nice.

57
00:04:51,290 --> 00:04:55,730
And my browser is the new Chrome, so it has this feature.

58
00:04:55,940 --> 00:05:02,690
But a few years ago when Black Shadow was first introduced, you had to do something like this.

59
00:05:09,280 --> 00:05:17,530
Copy and paste this, and this makes sure that it works on the Mozilla browser, and then you also had

60
00:05:18,370 --> 00:05:19,060
Ms.

61
00:05:20,960 --> 00:05:25,190
Which made sure that it works on Internet Explorer, you had.

62
00:05:26,610 --> 00:05:31,110
What kit, which made sure that it works on safari and chrome.

63
00:05:32,170 --> 00:05:35,260
And then finally, you also had oh.

64
00:05:36,490 --> 00:05:44,470
Which made it work on the opera browser, and then he also had to still mention the box shadow without

65
00:05:44,470 --> 00:05:46,240
the prefix is at the bottom.

66
00:05:46,780 --> 00:05:54,520
So now if any of these browsers don't support Borke Shadow, well, they have these prefixes so that

67
00:05:55,300 --> 00:05:56,080
it should work.

68
00:05:56,650 --> 00:06:00,790
And Bug Shadow, it has been some time now, so you don't need to do this anymore.

69
00:06:01,150 --> 00:06:08,470
But there is one great way of seeing if a certain property still needs browser prefixes, and that is

70
00:06:08,500 --> 00:06:13,600
using something like this, which I will leave for you so you can check it out.

71
00:06:14,730 --> 00:06:23,430
Another thing I wanted to show you is, can I use so can I use dotcom is a great resource to see anything

72
00:06:23,430 --> 00:06:25,160
that you might want to try out.

73
00:06:25,230 --> 00:06:28,810
So if I type in here, access transition, you'll see access.

74
00:06:28,950 --> 00:06:37,860
Three transitions are supported in all these browsers, except we have one operator, many, and it

75
00:06:37,860 --> 00:06:43,980
says it's two point sixty three percent of the global usage.

76
00:06:44,610 --> 00:06:52,050
So if you use access three transitions, two point six three percent of the population might not be

77
00:06:52,050 --> 00:06:52,740
able to see it.

78
00:06:53,010 --> 00:06:58,110
Now, whether that is your user base or not, you can kind of decide what the tradeoffs are.

79
00:06:58,620 --> 00:07:00,660
But this is a great thing to use.

80
00:07:00,660 --> 00:07:07,500
And if we use something like flex box, well, we see that flex box has all support.

81
00:07:07,920 --> 00:07:11,430
So it should it shouldn't be a problem for you to use it.

82
00:07:12,840 --> 00:07:18,080
OK, let's go back to this and just finish up this website to make it look nice.

83
00:07:20,670 --> 00:07:24,310
So I don't like that there's space here, ideally, this is all the way to the left.

84
00:07:24,330 --> 00:07:25,230
If I do.

85
00:07:26,920 --> 00:07:36,760
Margin zero pixels and I refresh that actually doesn't change much because sometimes browsers have their

86
00:07:36,790 --> 00:07:38,880
own default margins.

87
00:07:39,040 --> 00:07:41,710
So the way to get around it is to.

88
00:07:43,880 --> 00:07:46,970
Do margin zero for the body, so margin.

89
00:07:48,260 --> 00:07:50,330
Zero pixels, let's save and refresh.

90
00:07:51,430 --> 00:07:51,990
Perfect.

91
00:07:52,030 --> 00:07:55,040
Now we have this all the way to the left.

92
00:07:55,120 --> 00:07:57,790
OK, but we do want a bit of a buffer at the top.

93
00:07:57,790 --> 00:08:02,290
So I'm going to add margin top.

94
00:08:03,770 --> 00:08:12,860
And we'll do 10 pixels, save and refresh, perfect, now we have a beautiful website, and it didn't

95
00:08:12,860 --> 00:08:13,880
really take us much.

96
00:08:14,540 --> 00:08:18,560
We just wrote a few lines of CSFs, a few lines of HTML.

97
00:08:19,710 --> 00:08:21,600
And look what we have.

98
00:08:22,620 --> 00:08:23,520
We'll see in the next one.